做有态度的前端团队

网易FEG前端团队

floyd 发布的文章

  • 关于使用Koa2的点点滴滴

    Koa是基于Nodejs的一个后端框架,算是比较常用的,核心思想就是中间件,Koa实现底层逻辑,其余的就需要自己实现,包括:session、数据库操作、文件上传、路由、模板、静态资源访问等 前言 一直以来都是使用thinkjs这个框架,集成很多功能,基本上就只需要负责写逻辑就OK了,所以想尝试一下Koa这种需要动手逐个实现功能的,类似也有express 这里并不打算写新手教程,可自行百度,只是写使用过程中遇到的一些疑惑 下面代码基于ES6、7 1、安装 官网推荐使用Nodejs >= 7.6的版本,小于这个版本需要采用babel方式曲线救国 实际使用发现,用了babe......

    JavaScript,总结,其他

  • 关于小组页面脚本错误捕获

    平时本地或者测试环境开发,我们都能在调试面板之类的很直观看到脚本错误,出什么错,在哪,错误定位,一目了然,还能断点调试,这部分错误,一般会在开发以及QA测试阶段,就能大部分发现与修复。但是,如何捕获发现线上用户的错误呢?用户的网络、浏览器、电脑、手机等千奇百怪,总不能每次都远程用户电脑看一下它的Chrome吧? 一、如何捕获错误? 1、全局方式 window.onerror函数,可以捕获追踪全局的脚本错误,只要报错了,就会调用此函数,函数具体使用参数如下: window.onerror = function(msg,url,line,col,errorObj){ ......

    工具,总结

  • ES6在新图册组件中的应用

    ES7都来了,然而我们连ES6都很少用到,基于ES6的不成熟,以及浏览器支持程度问题,导致大家都比较少使用得上它。不过目前日渐更新的浏览器,已经大面积支持ES6的新特性了,即使不支持,也可以使用Babel来进行转换为ES5来执行。此次就运用到Babel来编译,已集成到前端发布工具中,添加即可使用。 1、类定义 以前的做法: function ImageFall(param){ } ImageFall.prototype = {} 怎么看,都不像一个类,怪别扭 class ImageFall{ //构造函数 con......

    JavaScript,总结

  • 微信小程序初试-----音乐Demo

    微信小程序最近很火,所以我也来试试这个东东,看看它跟我们平时的Html5有什么区别? 官方有提供下载和新建项目的教程,这里就不重复,可以先查看这里和下载:请猛戳我 项目文件目录结构 新建项目后,默认的如下 pages //所有页面(也可以叫窗口)存放的文件夹 |--index //默认显示的第一个页面(窗口) |--index.js //页面的脚本逻辑 |--index.wxml //页面结构内容 |--index.wxss //页面样式 |--logs......

    其他

  • 如何实现异步代码用同步方式写(Web端)?

    前端写JavaScript的时候,经常需要使用两个异步回调的方法:$.ajax和setTimeout,这两个都是需要异步方式执行回调($.ajax可以设置为同步,但会卡住浏览器,不推荐这么使用),当有好多个$.ajax的时候,就会出现好多个回调,写起来很麻烦,甚至会出现传说中的回调金字塔,就像叠罗汉那样,Javascript有办法像Java、C#后台语言那样用同步方式写代码么?很抱歉,原生是不支持的(ES6、7会支持Promise同步调用,但需要非常高级的浏览器才支持,即使Node也不完全支持) 一般怎么写? var start = new Date(); //......

    JavaScript

  • 图册组件优化之路(一)

    根据六马系统需要,写了一个图册组件,方便给编辑器添加图册显示使用。 效果可以参考这里:http://game.163.com/2016/chinajoy/2016/07/29/22769_632281.html 匆忙发布了第一个版本出去,发现编辑们流行图册都发一两百张图上去的,由于没有做加载优化,导致问题很明显,一开始需要请求双倍的图片总数请求,页面存在多个图册,打开就会加载得很慢才出来,好多菊花满屏转 一、代码按需加载 图册兼容PC和移动两个web端,一般情况下,都是代码写一块,根据参数或者终端类型判断,来运行对应的代码 这样方式存在以下问题: 一个页面基本是不会存......

    JavaScript,总结

  • JavaScript观察者模式的运用

    观察者模式,是设计模式中的一种,具体含义和说明,这里就不写了,可以执行百度,这里主要讲解如何使用?如何改善现有的代码逻辑?如何解耦?等问题 一、最简单的例子 $("#test").on("click",function(e){ alert("hi"); }); 这是jQuery中的监听元素的点击事件,然后做出响应;其实这就是观察者模式的运用;监听某个事件,让其它模块来响应你,可能光这么说,感受不出它的好处,看下面的实例。 二、常规的模块间调用 用一个比较直接的例子说明,每个游戏中,都有生命值这个概念,当生命......

    JavaScript

  • 自定义命令行工具基于Nodejs

    每个人都会做一些简单的小工具去方便自己平时的工作,比如批处理文件。写个有界面的工具吧,有点费劲和没必要;如果能在命令行里面敲几个简单命令就能完成,就方便很多了,而我们又是前端开发,基于nodejs,学习的门槛就更低了 一、前期准备 需要下载两个node的插件 liftoff (执行命令行插件) minimist (读取命令行参数插件) 二、文件夹结构 需要将文件内容保存在指定文件夹才有效:windows用户一般为在C:\Users\用户名\AppData\Roaming\npm npm |--hello.cwd //windows下的命令入口文件(自定......

    JavaScript,工具,其他

  • 关于图片垂直居中的几个方法

    偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式 Javascript篇 用JS的方式处理解决图片,思路就是预加载图片,然后取宽和高,计算位置,设置margin值,达到目的 //计算图片居中位置的信息 function getImgSize(img,maxWidth,maxHeight){ var ratio, picW = img.width, picH = img.......

    JavaScript,CSS

  • 浅谈NIE组件加载方式的变化和原理

    这里主要会说说小组组件新旧加载方式的实现方式、优缺点,以及未来展望 旧的方式 一、调用方式: nie.use(["nie.util.share","nie.util.video"],function(){ //do something }); 典型的AMD加载方式,就是按需加载,异步回调,代表作:requirejs 二、实现原理: //以下为简单实现原理,并非代码全部 nie.use = function(modules,callback){ //定义异步请求组件js......

    其他

  • FIS插件制作说明

    FIS插件制作说明 虽然FIS在使用的过程中,几乎能解决我们遇到的所有前端问题,但总是会有一些特殊的问题是解决不了的,然后就需要上网去找能解决特殊问题的插件,不过一般都是找不到(不然就不叫特殊问题了),所以我们需要自己写插件来实现 一、FIS的运行过程与插件运行的时机 看上面的官网提供的图,就能大致知道原理了,也可以清楚看到,插件基本可以分为编译期间的、打包期间的 二、插件命名方式 举个简单的例子:fis-postpackager-supply 一定是fis打头 中间的postpackager表示插件的执行时机,详情可以参考上面的图 最后的supply就是插件的名字,这个你......

    工具

  • 一个通用广告脚本数据加载的容错

    最基本的需求 写一个通用的广告脚本文件,传递不同的广告ID,加载对应的数据出来,上报数据,最后显示出来 最简单的做法 每个站点,直接请求广告地址,带上不同参数,例如这样: var script = document.createElement("script"); script.src = 'ad.com?id=id1&callback=cb'; document.body.appendChild(script); function cb(param){ //do something ......

    JavaScript