es6模块 import, export 知识点小结

ES6模块只支持静态导出,你只可以在模块的最外层作用域使用export,不可在条件语句中使用,也不能在函数作用域中使用。总结了如下几种用法:

exports的几种用法

1. Named exports (导出每个 函数/变量)

名字导出,这种方式导出多个函数,一般使用场景比如 utils、tools、common 之类的工具类函数集,或者全站统一变量等。

只需要在变量或函数前面加 `export` 关键字即可。

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}


//------ main.js 使用方式1 ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ main.js 使用方式2 ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

我们也可以直接导出一个列表,例如上面的lib.js可以改写成:

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
	return x * x;
}
function add (x, y) {
	return x + y;
}
export {sqrt, square, add}

2. Default exports (导出一个默认 函数/类)

这种方式比较简单,一般用于一个类文件,或者功能比较单一的函数文件使用。一个模块中只能有一个export default默认输出。

export default与export的主要区别有2个:

  • 不需要知道导出的具体变量名
  • 导入(import)时不需要{}
//------ myFunc.js ------
export default function () { ... };

//------ main.js ------
import myFunc from 'myFunc';
myFunc();

导出一个类

//------ MyClass.js ------
class MyClass{
  constructor() {}
}
export default MyClass;

//------ Main.js ------
import MyClass from 'MyClass';

注意这里默认导出不需要用{}。

3. Mixed exports (混合导出)

混合导出,也就是 上面第一点和第二点结合在一起的情况。比较常见的比如 Lodash,阿里 Fusion之类的库都是这种组合方式。

//------ lib.js ------
export var myVar = ...;
export let myVar = ...;
export const MY_CONST = ...;

export function myFunc() {
  ...
}
export function* myGeneratorFunc() {
  ...
}
export default class MyClass {
  ...
}

// ------ main.js ------
import MyClass, {myFunc} from 'lib';

再比如lodash例子:

//------ lodash.js ------
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

//------ main.js ------
import _, { each } from 'lodash';

4. Re-exporting (别名导出)

一般情况下,export输出的变量就是在原文件中定义的名字,但也可以用 as 关键字来指定别名,这样做一般是为了简化或者语义化export的函数名。

//------ lib.js ------
export function getUserName(){
   ...
};
export function setName(){
  ...
};

//输出别名,在import的时候可以同时使用原始函数名和别名
export {
  getName as get, //允许使用不同名字输出两次
  getName as getNameV2,
  setName as set
}


5. Module Redirects (中转模块导出)

有时候为了避免上层模块导入太多的模块,我们可能使用底层模块作为中转,直接导出另一个模块的内容如下:

//------ myFunc.js ------
export default function() {...};
 
//------ lib.js ------
export * from 'myFunc';
export function each() {...};
 
//------ main.js ------
import myFunc,{ each } from 'lib';

错误的export用法

export 只支持在最外层静态导出、只支持导出变量、函数、类,如下的几种用法都是错误的。

//直接输出变量的值
export 'Mark';

//未使用中括号 或 未加default
// 当只有一个导出数,需加default,或者使用中括号
var name = 'Mark';
export name;

//export不要输出块作用域内的变量
function(){
  var name = 'Mark';
  export {name};
}

import的几种用法

import的用法和export是一一对应的,但是import支持静态导入和动态导入两种方式,动态import支持晚一些,兼容性要差一些,目前Chrome浏览器和Safari浏览器支持。

1. Import an entire module’s contents (导入整个模块)

当export有多个函数或变量时,如文中export的第一点,可以使用 * as 关键字来导出所有函数及变量,同时 as 后面跟着的名称做为 该模块的命名空间。

//导出lib的所有函数及变量
import * as lib from 'lib';

//以 lib 做为命名空间进行调用,类似于object的方式
console.log(lib.square(11)); // 121

2. Import a single/multiple export from a module

从模块文件中导入单个或多个函数,与 * as namepage 方式不同,这个是按需导入。如下例子:

//导入square和 diag 两个函数
import {square, diag} from 'lib';

// 只导入square 一个函数
import {square} from 'lib';

// 导入默认模块
import _ from 'lodash';

// 导入默认模块和单个函数,这样做主要是简化单个函数的调用
import _, { each } from 'lodash';

3. Rename multiple exports during import

和 export 一样,也可以用 as 关键字来设置别名,当import的2个类的名字一样时,可以使用 as 来重设导入模块的名字,也可以用as 来简化名称。如下例子:

// 用as 来 简化函数名称
import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

// 避免重名
import { lib as UserLib} from "ulib";
import { lib as GlobalLib } from "glib";

4. Import a module for its side effects only

有时候我们只想import进来,不需要调用,很常见的,比如在webpack构建时,我们经常import css 进来,或者import一个类库进来。

// 导入css
import './mystyle.css';

// 导入类库
import 'axios';

5. Dynamic Imports

静态import在首次加载时候会把全部模块资源都下载下来,但是,我们实际开发时候,有时候需要动态import(dynamic import),例如点击某个选项卡,才去加载某些新的模块,这个动态import特性浏览器也是支持的。

// 当动态import时,返回的是一个promise
import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

// 上面这句实际等同于
let module = await import('/modules/my-module.js');

es7的新用法:

async function main() {
    const myModule = await import('./myModule.js');

    const {export1, export2} = await import('./myModule.js');

    const [module1, module2, module3] =
        await Promise.all([
            import('./module1.js'),
            import('./module2.js'),
            import('./module3.js'),
        ]);
}
main();

参考资料:

React Native 性能优化建议

1. 异步逐层渲染。

React Native 虽然一直标榜媲美Native的体验,但实际使用下来,其渲染性还是非常低效,基于ScrollView和ListView两大容器,在渲染上,相当于web端的table布局,需要等整个大table渲染完成才显示页面,也就是说,当容器内有大量的子元素,其白屏时间会非常长。

如何让React Native做到像web端边渲染边加载?可以采用异步渲染的方式,使用requestAnimationFrame 或 setTimeout 定时将单个组件push进ScrollView容器。

基于这个原理,写了个逐层渲染的组件: react-progressive

2. 实现shouldComponentUpdate方法

如上第一点,逐层渲染提升打开时间,但是也会导致component重复渲染,也就是执行了大量无用的diff算法。虽然React里引以为傲的diff算法非常高效,但是执行数量达到一定程度后,也会带来非常大的影响。那么可使用 shouldComponentUpdate 来控制component的渲染次数。

如何做?

  • 如果确定该组件渲染完后无需再次更新,即这个组件是一个静态组件,那么可以直接return false。

shouldComponentUpdate(){
    return false
  • 如果组件比较复杂,自己对RN的更新机制不太熟,可以直接Minxi一下React提供的 PureRenderMixin 组件
mixins: [React.addons.PureRenderMixin]
  • 手动实现或使用第三方组件库,比如 Immutable-js

说白了,就是要确定组件内的不可变数据,让其不再执行diff及render。

3. 使用setNativeProps方法

setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的componentWillReceiveProps 、 shouldComponentUpdate 、 componentWillUpdate 等组件生命周期中的方法。

建议频繁更新的操作,如slider、tabs切换等拖曳操作时,使用 setNativeProps 来更新属性,会获得意想不到的性能体验。

代码片段:

me.refs.tabView.setNativeProps({
                style : {
                    height : 0,
                    opacity : 0
                }
            });

性能分析工具: React.addons.Perf

4. 不要使用阴影效果

React Native 里面的 shadow 相关的样式,是非常耗性能的css属性。这在web上,以前android 2.0年代,也是一样耗性能的css属性之一。如果需要使用阴影效果,建议使用图片来代替反而性能更好一些。

5. 最小化DOM

React Native里虚拟dom结构越复杂,则越低效。感觉RN的渲染性能,和以前android2.x时代没多大区别,如果层级结构大于5级,则要考虑下优化了。这没啥技巧,纯靠经验及硬实力。

6.组件粒度化

如何更好的划分组件粒度,这需要合理的对组件进行更细粒度的划分,区分出静态组件及动态组件。

Chrome渲染分析之Rendering工具使用(3)

在前面2篇文章中介绍了 Show paint rectangles 和 show composited layer borders 两个选项的作用。今天接着讲下一个: show FPS meter

show FPS meter

show fps meter 可以理解为显示FPS帧频/帧数。开启这个选项后,右上角会实时显示当前页面的FPS。

先简单科普一下啥是FPS。FPS全称叫 Frames Per Second (每秒帧数)。帧数越高,动画显示的越流畅。一般的液晶显示器的刷新频率也就是 60HZ。也就是说, 要想页面上的交互效果及动画流畅。那么FPS稳定在60左右,是最佳的体验。 。据悉 ios上的交互效果都是60FPS呢。

记得以前做Flash游戏的时候,FPS帧数是游戏流畅度的一个重要指标。在web端,道理也是一样。

还记得我之前的文章提到 《web移动端性能调优及16ms优化》 这里的16毫秒,实际就是 1000ms/60FPS = 16.6ms。 也就是一帧所花费的时间约是16毫秒。

科普完毕,回到正题。chrome提供的 show FPS meter 选项,在我们制作测试页面交互及动画性能时非常有用。同时它也提供了当前页面的GPU占有率给我们。

React Web: 让React Native代码跑在Web上

前言

Facebook发布React Native 已有两个多月,从开源初期我们就开始筹划的React Web终于也有了一个V1版本。在这次618大促的两个主会场中落地,实现了React Native代码到web的转换。

React Web的目的及意义非常明确: 让React Native代码跑在Web上让一套代码运行在各个移动终端,对前端及业务来说,这是开发效率中一个质的提升。在项目初期,我们也曾向 React团队咨询过类似的问题,他们团队的核心同学 @vjeux 也认为这是非常酷的事情,也是他们未来想做的事情。也许在发布React Native for Android的时候,也会发布React Web也说不定。(YY一下)

技术架构

基于React Native的适配方案,有几个:

  • 制定一个Bridge标准,RN与RW 各自用最优的方式实现这套标准。

比如基于Flex布局,我们实现一套一致的 Flex Component,<Flex><Cell> 等。

  • 完全向RN看齐,RW实现RN的所有能实现的API。

在讨论中,最终选择了后者。

因为React Web的理念,让React Native代码跑在Web端,那么就决定了RW只是一个构建及打包工具,脱离RN,RW的实现则没有太大的意义,那么整体的技术方向就非常明确了: 实现RN一致的Style、Component及API,最终通过构建工具编译成web版本

技术细节

Style补齐

RN中主要依靠FlexBox方式进行布局,它与CSS中的flexbox有一些差异,但概念基本是一致的。

在Style兼容方面,组内的同学@横天 做了很多探索,整理了布局中的差异性与共性。
在《react-native 与 react-web 的融合》《react-native 之布局篇》两篇文章中有详细的论述。

举个2个例子:

Flex布局转换

在RN中,使用Flex布局,只需要简单使用flex: 1 即可完成Flex布局。而在Web端,则需要添加浏览器前缀,并给父级加上display:flex才能表现一致。

RN:

var styles = StyleSheet.create({
    view : {
        flex : 1
    }
})


<View style={{flex:1}}><Image /></View>

转换到Web

RW:

View 的父级css :

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

View的css :

flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;

<View style={{flex:1}}><Image /></View>

Border转换

RN :

borderColor : #cccccc 
borderWidth : 1

转换到Web :

borderColor : #cccccc
borderWidth : 1
border-style: solid;

Style的兼容,主要是Flex布局的兼容,其他都是比较小的细节点,没有多大难度。

前期的原型demo可以查看react/demo.

component补齐

component补齐是件非常有意思的事情,相当于有个架构师帮你把接口定义好了,你只需要实现对应的接口行为就行。

有2个组件,是整个RW转换最为关键,也是最有难度的组件:ScrollView、ListView 。刚好这方面,淘宝的@伯才同学开发的xscroll与这两个native组件的理念非常接近。并且xscroll本身的实现也参考了Native中UIScrollView的接口。

也举个适配的例子:

Text组件中有个props numberOfLines 其表现的行为是多行文本截断

在web端,可通过css来控制:

//组件加载前调用
componentWillMount(){
    //如果是多行截断的话则使用css3来实现
    if(this.props.numberOfLines){
        this.props.style['overflow'] = 'hidden';
        this.props.style['display'] = '-webkit-box';
        this.props.style['WebkitLineClamp'] = this.props.numberOfLines;
        this.props.style['WebkitBoxOrient'] = 'vertical';
    }
},

其最终比较效果:

View组件的效果,效果对比图:

API补齐

API的补齐,相对比较简单,没有太难实现的API,并且很多API均来自Web。比如:
requestAnimationFramePromise

其中比较特别的API:fetch。在Native中,是拉取json格式的数据。而在web端则会存在跨域的问题。在实现上,fetch不仅需要支持json,同时也要支持jsonp,对开发者透明。

对于系统级别的API,则返回空对象。

packager补齐

RN里实现了一套编辑及打包机制。这也是RW适配比较关键,同时也是技术难度比较大的一环。通过一致的构建,才能让代码无差异性。

在packager的实现上,@元彦 同学在RN的基础上,实现了一套一致的打包工具,将RN的代码完美的编译成web版本。

举个例子:

在RN中,实现了一套require机制:可以不使用路径就可require文件。

比如:

var Dimensions = require('Dimensions');

学过nodejs的都知道,Dimensions 如果不带上路径,则查找当前目录和node_modules包,而在RN中,Dimensions这个API并不在node_modules里,而是在RN中的Libraries/Utilities/Dimensions.js中。

这种require方式,是在packager中通过DependencyResolver将所有文件读入内存,再进行包名查找替换。

具体可查看@元彦同学分享的文章《《传送门》让React Native代码也能运行在Web上》及源码

实际应用

本次天猫618大促中的预热主会场及主会场,就是基于RN与RW的实现。无差异性运行在IOS平台上。下图是编译后的2个版本:

在实际的项目中,也暴露出一些问题:

  • 性能问题。在android机器上跑RW版本比较吃力。
    • Flex布局本身(display: -webkit-box;)就是一个耗性能的css属性,大规模使用在低端android下性能堪忧。
    • 每个component都有其生命周期,在Web端,每个View都是一个component,导致在dom结构上,比原生reactjs实现复杂一倍,而reactjs调用mountComponent方法会带来一定的性能损耗。也就是说,越复杂的页面,性能约差。
  • 浏览器本身原因无法做到100%还原。比如RN中0.5px,0.3px的实现,在浏览器端除了ios8外,其他web环境均不支持1px以下的数值。
  • 抛弃了web的大部分功能,同时无法使用web最佳的方式来优化代码,而Native要照顾到web端的展示,也无法很好的使用一些特性,如上面说的0.5px实现。
  • 无法解决所有兼容性问题。
    • 用纯web来写页面,也都会遇到浏览器间的兼容性问题,目前RW没有提供一套写Hack的机制来解决兼容性。感觉就像Chrome与IE6的对比,要完美兼容IE6,务必无法优雅的使用一些Chrome所支持的新特性。

还有一些其他的细节问题,后续会通过PPT的形式来分享给大家。

总结与思考

React Web 的实现,其最大的难度在于性能优化。这也许是Facebook不推崇write once, working anywhere的主要原因。

那么 RW的实现是否有意义,这取决于业务的侧重点,如果80%的流量来源于APP,那么在web端,通过体验降级来换来业务开发效率提升,我觉得是有其存在的意义的。

在业务层面上实现write once, working anywhere,在组件层面,可以使用各端最佳的方式实现,也未尝不可。

这次618的尝试,是个非常不错的开始,后续天猫在RN中的探讨,会更加深入,比如在React Native中添加Web的布局方式,让开发方式更灵活。在开发规范上,两边会做一些平衡等。

感谢

最后,感谢 @鬼道 @铁军 在项目开发上提供大量的技术支持,协调了各方人员,也感谢 @圆空、@伯才、@元彦、@横天、@伊钧、@由校、@冬萌、@斯肯、@饭鱼、@大果 ……要感谢的人好多 At不过来了。。等等同学小伙伴的一起努力,使Native与Web融合踏出结实的一步哈。

iscroll 5 源码注释

iscroll 是一个轻量级的 lib,最近在做移动端的项目,如果要模拟原生体验,少不了这类模拟原生滚动的lib。

好在代码量不多,从github上fork了iscroll的源码,就开始调试分析,网上大部分资料都是针对iscroll 4的,对iscroll 5的分析基本没有,而且连个中文API文档都没有。

在研究源码的过程中,由于对iscroll项目使用并不多,对于源码内的一些变量及条件判断也并不是很理解其使用场景及作者这样写的意图。

本次注释的是iscroll-lite.js ,因为其核心功能都包含了,代码量也少,这样理解起来更容易些。

如下是源码注释,也可以查看我的github:https://github.com/baofen14787/iscroll/blob/master/build/iscroll-lite.js

/**
 * oxScroll
 */
(function (window, document, Math) {
    /**
     * rAF 不解释
     * @type {window.requestAnimationFrame|*|Function}
     */
    var rAF = window.requestAnimationFrame	||
        window.webkitRequestAnimationFrame	||
        window.mozRequestAnimationFrame		||
        window.oRequestAnimationFrame		||
        window.msRequestAnimationFrame		||
        function (callback) { window.setTimeout(callback, 1000 / 60); };

    /**
     * g工具类处理函数
     */
    var utils = (function () {
        //将需要暴露给外界调用的方法放在me对象里,其他var声明的方法则保持为私有
        var me = {};

        /**
         * 用于判断浏览器是否支持相关的CSS3属性
         * @type {CSSStyleDeclaration}
         * @private
         */
        var _elementStyle = document.createElement('div').style;
        /**
         * 判断CSS 属性样式前缀
         */
        var _vendor = (function () {
            var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
                transform,
                i = 0,
                l = vendors.length;

            for ( ; i < l; i++ ) {
                transform = vendors[i] + 'ransform';
                if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
            }

            return false;
        })();

        /**
         * 获取CSS 前缀
         * @param style
         * @returns {*} 返回CSS3兼容性前缀
         * @private
         */
        function _prefixStyle (style) {
            if ( _vendor === false ) return false;
            if ( _vendor === '' ) return style;
            return _vendor + style.charAt(0).toUpperCase() + style.substr(1);
        }

        /**
         * 获取时间戳
         * @type {Function}
         */
        me.getTime = Date.now || function getTime () { return new Date().getTime(); };

        /**
         *
         * @param target
         * @param obj
         */
        me.extend = function (target, obj) {
            for ( var i in obj ) {
                target[i] = obj[i];
            }
        };

        me.addEvent = function (el, type, fn, capture) {
            el.addEventListener(type, fn, !!capture);
        };

        me.removeEvent = function (el, type, fn, capture) {
            el.removeEventListener(type, fn, !!capture);
        };

        /**
         * 根据我们的拖动返回运动的长度与耗时,用于惯性拖动判断
         * @param current 当前鼠标位置
         * @param start touchStart时候记录的Y(可能是X)的开始位置,但是在touchmove时候可能被重写
         * @param time touchstart到手指离开时候经历的时间,同样可能被touchmove重写
         * @param lowerMargin y可移动的最大距离,这个一般为计算得出 this.wrapperHeight - this.scrollerHeight
         * @param wrapperSize 如果有边界距离的话就是可拖动,不然碰到0的时候便停止
         * @param deceleration 匀减速
         * @returns {{destination: number, duration: number}}
         */
        me.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
            var distance = current - start,
                speed = Math.abs(distance) / time,
                destination,
                duration;

            deceleration = deceleration === undefined ? 0.0006 : deceleration;

            destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
            duration = speed / deceleration;

            if ( destination < lowerMargin ) {
                destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
                distance = Math.abs(destination - current);
                duration = distance / speed;
            } else if ( destination > 0 ) {
                destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
                distance = Math.abs(current) + destination;
                duration = distance / speed;
            }

            return {
                destination: Math.round(destination),
                duration: duration
            };
        };

        var _transform = _prefixStyle('transform');

        me.extend(me, {
            hasTransform: _transform !== false,
            hasPerspective: _prefixStyle('perspective') in _elementStyle,
            hasTouch: 'ontouchstart' in window,
            hasPointer: navigator.msPointerEnabled,
            hasTransition: _prefixStyle('transition') in _elementStyle
        });

        // This should find all Android browsers lower than build 535.19 (both stock browser and webview)
        me.isBadAndroid = /Android /.test(window.navigator.appVersion) &amp;&amp; !(/Chrome\/\d/.test(window.navigator.appVersion));

        me.extend(me.style = {}, {
            transform: _transform,
            transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
            transitionDuration: _prefixStyle('transitionDuration'),
            transitionDelay: _prefixStyle('transitionDelay'),
            transformOrigin: _prefixStyle('transformOrigin')
        });

        me.hasClass = function (e, c) {
            var re = new RegExp("(^|\\s)" + c + "(\\s|$)");
            return re.test(e.className);
        };

        me.addClass = function (e, c) {
            if ( me.hasClass(e, c) ) {
                return;
            }

            var newclass = e.className.split(' ');
            newclass.push(c);
            e.className = newclass.join(' ');
        };

        me.removeClass = function (e, c) {
            if ( !me.hasClass(e, c) ) {
                return;
            }

            var re = new RegExp("(^|\\s)" + c + "(\\s|$)", 'g');
            e.className = e.className.replace(re, ' ');
        };

        me.offset = function (el) {
            var left = -el.offsetLeft,
                top = -el.offsetTop;

            // jshint -W084
            while (el = el.offsetParent) {
                left -= el.offsetLeft;
                top -= el.offsetTop;
            }
            // jshint +W084

            return {
                left: left,
                top: top
            };
        };

        me.preventDefaultException = function (el, exceptions) {
            for ( var i in exceptions ) {
                if ( exceptions[i].test(el[i]) ) {
                    return true;
                }
            }

            return false;
        };

        me.extend(me.eventType = {}, {
            touchstart: 1,
            touchmove: 1,
            touchend: 1,

            mousedown: 2,
            mousemove: 2,
            mouseup: 2,

            MSPointerDown: 3,
            MSPointerMove: 3,
            MSPointerUp: 3
        });

        /**
         * 动画函数
         * style为css3调用的
         * fn为js调用的
         */
        me.extend(me.ease = {}, {
            quadratic: {
                style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                fn: function (k) {
                    return k * ( 2 - k );
                }
            },
            circular: {
                style: 'cubic-bezier(0.1, 0.57, 0.1, 1)',	// Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)
                fn: function (k) {
                    return Math.sqrt( 1 - ( --k * k ) );
                }
            },
            back: {
                style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
                fn: function (k) {
                    var b = 4;
                    return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;
                }
            },
            bounce: {
                style: '',
                fn: function (k) {
                    if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
                        return 7.5625 * k * k;
                    } else if ( k < ( 2 / 2.75 ) ) {
                        return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
                    } else if ( k < ( 2.5 / 2.75 ) ) {
                        return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
                    } else {
                        return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
                    }
                }
            },
            elastic: {
                style: '',
                fn: function (k) {
                    var f = 0.22,
                        e = 0.4;

                    if ( k === 0 ) { return 0; }
                    if ( k == 1 ) { return 1; }

                    return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );
                }
            }
        });

        /**
         * 模拟tap事件
         * @param e
         * @param eventName
         */
        me.tap = function (e, eventName) {
            var ev = document.createEvent('Event');
            ev.initEvent(eventName, true, true);
            ev.pageX = e.pageX;
            ev.pageY = e.pageY;
            e.target.dispatchEvent(ev);
        };

        /**
         * 模拟点击事件
         * @param e
         */
        me.click = function (e) {
            var target = e.target,
                ev;

            if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
                ev = document.createEvent('MouseEvents');
                ev.initMouseEvent('click', true, true, e.view, 1,
                    target.screenX, target.screenY, target.clientX, target.clientY,
                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                    0, null);

                ev._constructed = true;
                target.dispatchEvent(ev);
            }
        };

        return me;
    })();

    function IScroll (el, options) {
        //wrapper 是iScroll的容器
        this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
        //scroller 是iScroll 滚动的元素
        this.scroller = this.wrapper.children[0];
        // scroller 的 Style对象,通过set他的属性改变样式
        this.scrollerStyle = this.scroller.style;
        //初始化参数
        this.options = {
            //步进
            snapThreshold: 0.334,

            startX: 0,
            startY: 0,
            //默认是Y轴上下滚动
            scrollY: true,
            //方向锁定阈值,比如用户点击屏幕后,滑动5px的距离后,判断用户的拖动意图,是x方向拖动还是y方向
            directionLockThreshold: 5,
            //是否有惯性缓冲动画
            momentum: true,
            //超出边界时候是否还能拖动
            bounce: true,
            //超出边界还原时间点
            bounceTime: 600,
            //超出边界返回的动画
            bounceEasing: '',
            //是否阻止默认滚动事件
            preventDefault: true,
            //当遇到表单元素则不阻止冒泡,而是弹出系统自带相应的输入控件
            preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },

            HWCompositing: true,
            useTransition: true,
            useTransform: true
        };
        //合并配置参数
        utils.extend(this.options,options);

        /**
         * 判断是否支持3D加速
         * @type {string}
         */
        this.translateZ = this.options.HWCompositing &amp;&amp; utils.hasPerspective ? ' translateZ(0)' : '';
        /**
         * 判断是否支持css3的transition 动画
         * @type {*|utils.hasTransition|boolean}
         */
        this.options.useTransition = utils.hasTransition &amp;&amp; this.options.useTransition;
        /**
         * 判断是否支持css3的Transform属性
         * 一般来说 目前主流的手机都支持Transform及transition
         * @type {*|utils.hasTransform|boolean}
         */
        this.options.useTransform = utils.hasTransform &amp;&amp; this.options.useTransform;
        /**
         * 是否支持事件穿透
         * TODO 还不明用途
         * @type {string}
         */
        this.options.eventPassthrough = this.options.eventPassthrough === true ? 'vertical' : this.options.eventPassthrough;
        /**
         * 是否阻止默认行为,这里一般设置为 true 防止页面在手机端被默认拖动
         * @type {boolean}
         */
        this.options.preventDefault = !this.options.eventPassthrough &amp;&amp; this.options.preventDefault;
        // If you want eventPassthrough I have to lock one of the axes
        /**
         * 判断滚动的方向 X or Y
         * @type {boolean}
         */
        this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
        this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;

        // With eventPassthrough we also need lockDirection mechanism
        /**
         * 是否是双向同时自由滚动,这个属性在项目中一般用的比较少,滚动大部分都是单方向的
         * @type {boolean|*|IScroll.options.freeScroll}
         */
        this.options.freeScroll = this.options.freeScroll &amp;&amp; !this.options.eventPassthrough;
        this.options.directionLockThreshold = this.options.eventPassthrough ? 0 : this.options.directionLockThreshold;
        /**
         * touchend后的惯性动画效果,
         * @type {*|circular}
         */
        this.options.bounceEasing = typeof this.options.bounceEasing == 'string' ? utils.ease[this.options.bounceEasing] || utils.ease.circular : this.options.bounceEasing;
        /**
         * 当window触发resize事件60ms后还原
         * PS:感觉一般用于PC端
         * TODO 后续没用的话 就删除
         * @type {number}
         */
        this.options.resizePolling = this.options.resizePolling === undefined ? 60 : this.options.resizePolling;

        if ( this.options.tap === true ) {
            this.options.tap = 'tap';
        }

// INSERT POINT: NORMALIZATION

        // Some defaults
        //一些默认 不会被重写的参数属性
        this.x = 0;
        this.y = 0;
        this.directionX = 0;
        this.directionY = 0;
        this._events = {};

// INSERT POINT: DEFAULTS
        /**
         * 初始化
         */
        this._init();
        this.refresh();

        this.scrollTo(this.options.startX, this.options.startY);
        this.enable();
    }

    IScroll.prototype = {
        version: '5.1.1',

        _init: function () {
            this._initEvents();

// INSERT POINT: _init

        },

        destroy: function () {
            this._initEvents(true);

            this._execEvent('destroy');
        },

        _transitionEnd: function (e) {
            if ( e.target != this.scroller || !this.isInTransition ) {
                return;
            }

            this._transitionTime();
            if ( !this.resetPosition(this.options.bounceTime) ) {
                this.isInTransition = false;
                this._execEvent('scrollEnd');
            }
        },

        /**
         * touchstart 触发该函数
         * @param e
         * @private
         */
        _start: function (e) {
            // React to left mouse button only
            //判断是否是鼠标左键按下的拖动
            if ( utils.eventType[e.type] != 1 ) {
                if ( e.button !== 0 ) {
                    return;
                }
            }
            /**
             * 判断是否开启拖动,是否初始化完毕 否则就呵呵。。
             */
            if ( !this.enabled || (this.initiated &amp;&amp; utils.eventType[e.type] !== this.initiated) ) {
                return;
            }

            /**
             * 如果参数里设置了preventDefault 则 阻止默认事件
             */
            if ( this.options.preventDefault &amp;&amp; !utils.isBadAndroid &amp;&amp; !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
                e.preventDefault();
            }

            var point = e.touches ? e.touches[0] : e,
                pos;

            this.initiated	= utils.eventType[e.type];
            this.moved		= false;
            this.distX		= 0;
            this.distY		= 0;
            this.directionX = 0;
            this.directionY = 0;
            this.directionLocked = 0;
            //开启动画时间,如果之前有动画的话,便要停止动画,这里因为没有传时间,所以动画便直接停止了
            //用于停止拖动产生的惯性动作(touchstart时页面可能正在滚动)
            this._transitionTime();
            //记录下 touch start 的事件
            this.startTime = utils.getTime();
            //如果正在动画状态,则让页面停止在手指触摸处
            if ( this.options.useTransition &amp;&amp; this.isInTransition ) {
                this.isInTransition = false;
                //获取x,y坐标值
                pos = this.getComputedPosition();
//            debugger;
                //touchstart 时 让正在滚动的页面停止下来
                this._translate(Math.round(pos.x), Math.round(pos.y));
                this._execEvent('scrollEnd');
            } else if ( !this.options.useTransition &amp;&amp; this.isAnimating ) {
                this.isAnimating = false;
                this._execEvent('scrollEnd');
            }
            //重设一些参数
            this.startX    = this.x;
            this.startY    = this.y;
            this.absStartX = this.x;
            this.absStartY = this.y;
            this.pointX    = point.pageX;
            this.pointY    = point.pageY;

            this._execEvent('beforeScrollStart');
        },

        /**
         * touchmove时调用的函数.
         * @param e
         * @private
         */
        _move: function (e) {
            /**
             * TODO 这里做事件类型的判断是啥意思?
             */
            if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
                return;
            }
            if ( this.options.preventDefault ) {	// increases performance on Android? TODO: check!
                e.preventDefault();
            }

            /**
             * 记录当前移动的一些数据,为dom移动做准备
             * @type {*}
             */
            var point		= e.touches ? e.touches[0] : e,             //
                deltaX		= point.pageX - this.pointX,                //拖动的距离X 这里的值每300ms刷新一次的距离 即小段小段的距离
                deltaY		= point.pageY - this.pointY,                //拖动的距离X
                timestamp	= utils.getTime(),                          //拖动时候的时间戳
                newX, newY,                                             //拖动的目的地 X Y 距离
                absDistX, absDistY;                                     //距离的绝对值,用于判断滚动方向

            this.pointX		= point.pageX;
            this.pointY		= point.pageY;

            this.distX		+= deltaX;                                  //拖动的距离
            this.distY		+= deltaY;
            absDistX		= Math.abs(this.distX);
            absDistY		= Math.abs(this.distY);
            // We need to move at least 10 pixels for the scrolling to initiate
            //滑动的时间大于300ms 并且距离小于10px 则不滑动
            if ( timestamp - this.endTime > 300 &amp;&amp; (absDistX < 10 &amp;&amp; absDistY < 10) ) {
                return;
            }
            /**
             * 这里根据10px的距离来做拖动方向判断,判断用户拖动的意图
             */
            // If you are scrolling in one direction lock the other
            if ( !this.directionLocked &amp;&amp; !this.options.freeScroll ) {
                if ( absDistX > absDistY + this.options.directionLockThreshold ) {
                    this.directionLocked = 'h';		// lock horizontally
                } else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
                    this.directionLocked = 'v';		// lock vertically
                } else {
                    this.directionLocked = 'n';		// no lock
                }
            }
            //横向滚动Y
            if ( this.directionLocked == 'h' ) {
                if ( this.options.eventPassthrough == 'vertical' ) {
                    e.preventDefault();
                } else if ( this.options.eventPassthrough == 'horizontal' ) {
                    this.initiated = false;
                    return;
                }

                deltaY = 0;
            } else if ( this.directionLocked == 'v' ) {
                if ( this.options.eventPassthrough == 'horizontal' ) {
                    e.preventDefault();
                } else if ( this.options.eventPassthrough == 'vertical' ) {
                    this.initiated = false;
                    return;
                }

                deltaX = 0;
            }
            //拖动的距离
            deltaX = this.hasHorizontalScroll ? deltaX : 0;
            deltaY = this.hasVerticalScroll ? deltaY : 0;
            //将当前位置 加上 位移 得出实际移动的距离
            newX = this.x + deltaX;
            newY = this.y + deltaY;
            // Slow down if outside of the boundaries
            /**
             * 如果拖动已经超出边界了,则减慢拖动的速度
             */
            if ( newX > 0 || newX < this.maxScrollX ) {
                newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
            }
            if ( newY > 0 || newY < this.maxScrollY ) {
                newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
            }

            /**
             * TODO 干嘛的?
             * @type {number}
             */
            this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
            this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
            //第一次拖动时的回调
            if ( !this.moved ) {
                this._execEvent('scrollStart');
            }

            this.moved = true;

            this._translate(newX, newY);

            /* REPLACE START: _move */
            /**
             * 每300ms会重置一次当前位置以及开始时间,这个就是为什么我们在抓住不放很久突然丢开仍然有长距离移动的原因,这个比较精妙哦
             */
            if ( timestamp - this.startTime > 300 ) {
                this.startTime = timestamp;
                this.startX = this.x;
                this.startY = this.y;
            }

            /* REPLACE END: _move */

        },

        _end: function (e) {
            if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
                return;
            }

            if ( this.options.preventDefault &amp;&amp; !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
                e.preventDefault();
            }

            /**
             * 在手指离开屏幕前 保存一些相关的数据
             * @type {*}
             */
            var point = e.changedTouches ? e.changedTouches[0] : e,
                momentumX,
                momentumY,
                duration = utils.getTime() - this.startTime,        //拖动的耗时,这里并不是touchstart之间的耗时,在_move() 里 每隔300ms 更新一下时间的
                newX = Math.round(this.x),
                newY = Math.round(this.y),
                distanceX = Math.abs(newX - this.startX),           //拖动的距离
                distanceY = Math.abs(newY - this.startY),
                time = 0,
                easing = '';
            //重置一些参数
            this.isInTransition = 0;        //是否处于css动画状态
            this.initiated = 0;             //是否初始化
            this.endTime = utils.getTime();

            // reset if we are outside of the boundaries
            /**
             * 若超出边界,则将重设位置 不再执行后面逻辑
             */
            if ( this.resetPosition(this.options.bounceTime) ) {
                return;
            }
            //惯性拖动距离
            this.scrollTo(newX, newY);	// ensures that the last position is rounded

            // we scrolled less than 10 pixels
            if ( !this.moved ) {
                if ( this.options.tap ) {
                    utils.tap(e, this.options.tap);
                }

                if ( this.options.click ) {
                    utils.click(e);
                }

                this._execEvent('scrollCancel');
                return;
            }

            if ( this._events.flick &amp;&amp; duration < 200 &amp;&amp; distanceX < 100 &amp;&amp; distanceY < 100 ) {
                this._execEvent('flick');
                return;
            }

            // start momentum animation if needed
            /**
             * 如果需要惯性移动的话 则运行如下计算公式等
             * 根据动力加速度计算出来的动画参数
             * 计算出相关的距离
             */
            if ( this.options.momentum &amp;&amp; duration < 300 ) {
                momentumX = this.hasHorizontalScroll ? utils.momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration) : { destination: newX, duration: 0 };
                momentumY = this.hasVerticalScroll ? utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : { destination: newY, duration: 0 };
                newX = momentumX.destination;
                newY = momentumY.destination;
                time = Math.max(momentumX.duration, momentumY.duration);
                this.isInTransition = 1;
            }

// INSERT POINT: _end
            if ( newX != this.x || newY != this.y ) {
                // change easing function when scroller goes out of the boundaries
                /**
                 * 如果有惯性移动 并且惯性移动超出了边界,则开启css3动画的回弹效果
                 */
                if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
                    easing = utils.ease.quadratic;
                }

                this.scrollTo(newX, newY, time, easing);
                return;
            }

            this._execEvent('scrollEnd');
        },

        _resize: function () {
            var that = this;

            clearTimeout(this.resizeTimeout);

            this.resizeTimeout = setTimeout(function () {
                that.refresh();
            }, this.options.resizePolling);
        },

        /**
         * 重置位置信息
         * @param time
         * @returns {boolean}
         */
        resetPosition: function (time) {
            var x = this.x,
                y = this.y;

            time = time || 0;

            if ( !this.hasHorizontalScroll || this.x > 0 ) {
                x = 0;
            } else if ( this.x < this.maxScrollX ) {
                x = this.maxScrollX;
            }

            if ( !this.hasVerticalScroll || this.y > 0 ) {
                y = 0;
            } else if ( this.y < this.maxScrollY ) {
                y = this.maxScrollY;
            }

            if ( x == this.x &amp;&amp; y == this.y ) {
                return false;
            }

            this.scrollTo(x, y, time, this.options.bounceEasing);

            return true;
        },

        /**
         * 禁用iscroll
         */
        disable: function () {
            this.enabled = false;
        },
        /**
         * 开启iscroll
         */
        enable: function () {
            this.enabled = true;
        },

        /**
         * 更新iscroll的相关信息,一般用于初始化时获取页面的相关数据以便后续调用
         * 在异步加载、旋转屏幕时也调用该函数 重新获取页面数据
         */
        refresh: function () {
            var rf = this.wrapper.offsetHeight;		// Force reflow

            this.wrapperWidth	= this.wrapper.clientWidth;
            this.wrapperHeight	= this.wrapper.clientHeight;

            /* REPLACE START: refresh */

            this.scrollerWidth	= this.scroller.offsetWidth;
            this.scrollerHeight	= this.scroller.offsetHeight;

            this.maxScrollX		= this.wrapperWidth - this.scrollerWidth;
            this.maxScrollY		= this.wrapperHeight - this.scrollerHeight;

            /* REPLACE END: refresh */

            this.hasHorizontalScroll	= this.options.scrollX &amp;&amp; this.maxScrollX < 0;
            this.hasVerticalScroll		= this.options.scrollY &amp;&amp; this.maxScrollY < 0;

            if ( !this.hasHorizontalScroll ) {
                this.maxScrollX = 0;
                this.scrollerWidth = this.wrapperWidth;
            }

            if ( !this.hasVerticalScroll ) {
                this.maxScrollY = 0;
                this.scrollerHeight = this.wrapperHeight;
            }

            this.endTime = 0;
            this.directionX = 0;
            this.directionY = 0;

            this.wrapperOffset = utils.offset(this.wrapper);

            this._execEvent('refresh');

            this.resetPosition();

// INSERT POINT: _refresh

        },

        on: function (type, fn) {
            if ( !this._events[type] ) {
                this._events[type] = [];
            }

            this._events[type].push(fn);
        },

        off: function (type, fn) {
            if ( !this._events[type] ) {
                return;
            }

            var index = this._events[type].indexOf(fn);

            if ( index > -1 ) {
                this._events[type].splice(index, 1);
            }
        },
        /**
         * 类似于zepto的 triiger ,事件触发器
         * @param type
         * @private
         */
        _execEvent: function (type) {
            if ( !this._events[type] ) {
                return;
            }

            var i = 0,
                l = this._events[type].length;

            if ( !l ) {
                return;
            }

            for ( ; i < l; i++ ) {
                this._events[type][i].apply(this, [].slice.call(arguments, 1));
            }
        },

        scrollBy: function (x, y, time, easing) {
            x = this.x + x;
            y = this.y + y;
            time = time || 0;

            this.scrollTo(x, y, time, easing);
        },

        /**
         *
         * @param  x 为移动的x轴坐标
         * @param y 为移动的y轴坐标
         * @param time 为移动时间
         * @param easing 为移动的动画效果
         */
        scrollTo: function (x, y, time, easing) {
            easing = easing || utils.ease.circular;

            this.isInTransition = this.options.useTransition &amp;&amp; time > 0;
            //如果有css动画 则直接调用css3移动
            if ( !time || (this.options.useTransition &amp;&amp; easing.style) ) {
                //设置相关的css3动画属性及位置 直接位移过去
                this._transitionTimingFunction(easing.style);
                this._transitionTime(time);
                this._translate(x, y);
            } else {
                this._animate(x, y, time, easing.fn);
            }
        },

        /**
         * 这个方法实际上是对scrollTo的进一步封装,滚动到相应的元素区域。
         * @param el 为需要滚动到的元素引用
         * @param time 为滚动时间
         * @param offsetX 为X轴偏移量
         * @param offsetY 为Y轴偏移量
         * @param easing 动画效果
         */
        scrollToElement: function (el, time, offsetX, offsetY, easing) {
            el = el.nodeType ? el : this.scroller.querySelector(el);

            if ( !el ) {
                return;
            }

            var pos = utils.offset(el);

            pos.left -= this.wrapperOffset.left;
            pos.top  -= this.wrapperOffset.top;

            // if offsetX/Y are true we center the element to the screen
            if ( offsetX === true ) {
                offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
            }
            if ( offsetY === true ) {
                offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 2);
            }

            pos.left -= offsetX || 0;
            pos.top  -= offsetY || 0;

            pos.left = pos.left > 0 ? 0 : pos.left < this.maxScrollX ? this.maxScrollX : pos.left;
            pos.top  = pos.top  > 0 ? 0 : pos.top  < this.maxScrollY ? this.maxScrollY : pos.top;

            time = time === undefined || time === null || time === 'auto' ? Math.max(Math.abs(this.x-pos.left), Math.abs(this.y-pos.top)) : time;

            this.scrollTo(pos.left, pos.top, time, easing);
        },

        /**
         * css3 动画时长
         * @param time 动画时间 单位ms 如果不传参数 则为0 ,即是直接停止动画
         * @private
         */
        _transitionTime: function (time) {
            time = time || 0;

            this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';

            if ( !time &amp;&amp; utils.isBadAndroid ) {
                this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
            }

// INSERT POINT: _transitionTime

        },

        /**
         * CSS3 动画函数
         * @param easing
         * @private
         */
        _transitionTimingFunction: function (easing) {
            this.scrollerStyle[utils.style.transitionTimingFunction] = easing;

// INSERT POINT: _transitionTimingFunction

        },

        /**
         * 动画位移 如果支持css3 动画 则使用transform进行位移
         * iscorll里都是靠它进行移动的
         * @param x
         * @param y
         * @private
         */
        _translate: function (x, y) {
            if ( this.options.useTransform ) {
                var me = this;
                /* REPLACE START: _translate */
                //将上rAF位移
                rAF(function(){
                    me.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + me.translateZ;
                });

                /* REPLACE END: _translate */

            } else {
                x = Math.round(x);
                y = Math.round(y);
                this.scrollerStyle.left = x + 'px';
                this.scrollerStyle.top = y + 'px';
            }

            this.x = x;
            this.y = y;

// INSERT POINT: _translate

        },

        /**
         * 页面初始化时候的一些事件 如果传参数则是取消事件绑定 不传的话 就是添加事件绑定
         * @param remove
         * @private
         */
        _initEvents: function (remove) {
            var eventType = remove ? utils.removeEvent : utils.addEvent,
            //bindToWrapper 貌似官网没有特别说明,这里意思就是相对应window的事件绑定
                target = this.options.bindToWrapper ? this.wrapper : window;
            //旋转屏幕事件
            eventType(window, 'orientationchange', this);

            eventType(window, 'resize', this);

            if ( this.options.click ) {
                eventType(this.wrapper, 'click', this, true);
            }

            /**
             * 判断机型做相应的事件绑定
             * 针对PC的touch 事件
             */
            if ( !this.options.disableMouse ) {
                eventType(this.wrapper, 'mousedown', this);
                eventType(target, 'mousemove', this);
                eventType(target, 'mousecancel', this);
                eventType(target, 'mouseup', this);
            }

            /**
             * 针对win phone的touch事件
             */
            if ( utils.hasPointer &amp;&amp; !this.options.disablePointer ) {
                eventType(this.wrapper, 'MSPointerDown', this);
                eventType(target, 'MSPointerMove', this);
                eventType(target, 'MSPointerCancel', this);
                eventType(target, 'MSPointerUp', this);
            }

            /**
             * 针对ios &amp; Android的touch事件
             */
            if ( utils.hasTouch &amp;&amp; !this.options.disableTouch ) {
                eventType(this.wrapper, 'touchstart', this);
                eventType(target, 'touchmove', this);
                eventType(target, 'touchcancel', this);
                eventType(target, 'touchend', this);
            }

            /**
             * css3 动画结束后的的回调事件
             */
            eventType(this.scroller, 'transitionend', this);
            eventType(this.scroller, 'webkitTransitionEnd', this);
            eventType(this.scroller, 'oTransitionEnd', this);
            eventType(this.scroller, 'MSTransitionEnd', this);
        },

        /**
         * 获得一个DOM的实时样式样式,在touchstart时候保留DOM样式状态十分有用
         * @returns {{x: *, y: *}} 返回x,y坐标的位移
         */
        getComputedPosition: function () {
            var matrix = window.getComputedStyle(this.scroller, null),
                x, y;
            //如果是css3 位移,则位移的距离从matrix获取,否则直接获取left top 的传统位移值
            if ( this.options.useTransform ) {
//            console.info(matrix[utils.style.transform])
                //css3的matrix矩阵,eg:matrix[utils.style.transform]的值为 matrix(1, 0, 0, 1, -642, 0)
                matrix = matrix[utils.style.transform].split(')')[0].split(', ');
                x = +(matrix[12] || matrix[4]);
                y = +(matrix[13] || matrix[5]);
            } else {
                x = +matrix.left.replace(/[^-\d.]/g, '');
                y = +matrix.top.replace(/[^-\d.]/g, '');
            }

            return { x: x, y: y };
        },

        /**
         * 如果启用了CSS3的动画,便会使用CSS3动画方式进行动画,否则使用_animate方法(js实现方案)
         * 这里使用了RAF的动画 用于保证动画的流程性
         * @param destX
         * @param destY
         * @param duration
         * @param easingFn
         * @private
         */
        _animate: function (destX, destY, duration, easingFn) {
            var that = this,
                startX = this.x,
                startY = this.y,
                startTime = utils.getTime(),
                destTime = startTime + duration;

            function step () {
                var now = utils.getTime(),
                    newX, newY,
                    easing;

                if ( now >= destTime ) {
                    that.isAnimating = false;
                    that._translate(destX, destY);

                    if ( !that.resetPosition(that.options.bounceTime) ) {
                        that._execEvent('scrollEnd');
                    }

                    return;
                }

                now = ( now - startTime ) / duration;
                easing = easingFn(now);
                newX = ( destX - startX ) * easing + startX;
                newY = ( destY - startY ) * easing + startY;
                that._translate(newX, newY);
                //自我调用的方式(递归)来执行动画
                if ( that.isAnimating ) {
                    rAF(step);
                }
            }

            this.isAnimating = true;
            step();
        },
        /**
         * 统一的事件处理对象
         * @param e
         */
        handleEvent: function (e) {
            switch ( e.type ) {
                case 'touchstart':
                case 'MSPointerDown':
                case 'mousedown':
                    this._start(e);
                    break;
                case 'touchmove':
                case 'MSPointerMove':
                case 'mousemove':
                    this._move(e);
                    break;
                case 'touchend':
                case 'MSPointerUp':
                case 'mouseup':
                case 'touchcancel':
                case 'MSPointerCancel':
                case 'mousecancel':
                    this._end(e);
                    break;
                case 'orientationchange':
                case 'resize':
                    this._resize();
                    break;
                case 'transitionend':
                case 'webkitTransitionEnd':
                case 'oTransitionEnd':
                case 'MSTransitionEnd':
                    this._transitionEnd(e);
                    break;
                case 'wheel':
                case 'DOMMouseScroll':
                case 'mousewheel':
                    this._wheel(e);
                    break;
                case 'keydown':
                    this._key(e);
                    break;
                case 'click':
                    if ( !e._constructed ) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                    break;
            }
        }
    };
    /**
     * 将utils工具类函数归到iscroll下面 方便开发者调用
     */
    IScroll.utils = utils;
    /**
     * 一些CMD AMD的实现 如require.js sea.js 等
     */
    if ( typeof module != 'undefined' &amp;&amp; module.exports ) {
        module.exports = IScroll;
    } else {
        window.IScroll = IScroll;
    }

})(window, document, Math);


jQuery实现的ajax队列(queue)

先来看个需求,页面上有2个ajax call。其中一个ajax需要另一个ajax的数据才能操作。如下面这段代码所描述的

$(function(){
    var a_data;
    $.ajax({
        url: "test.php",
        success: function(data){
            a_data = data;
        },
    });
    $.ajax({
        url: "test.php",
        success: function(data){
            if(a_data == "5"){
                //....
            }
        },
    });
});

第二个ajax的操作,需要等待第一个ajax的数据才能进行。(ps:当然以上写法是错误的,这里只是描述这个需求)

相信不少人都遇到ajax queue 队列的问题。好在自从jquery 1.3 以后,有个function能够很好的支持队列,那就是queue

queue(name)
返回指向第一个匹配元素的队列(将是一个函数数组)

要实现ajax队列,可以将ajax引入queue中。如下代码实现:

// 第一个ajax请求
$(document).queue("ajaxRequests", function(){
    //全局变量,储存第一个ajax请求数据
    var a_data;
    $.ajax({
        success: function(data){
            a_data = data;
            $(document).dequeue("myName");
        }
    });
});
// 第二个ajax请求
$(document).queue("ajaxRequests", function() {
  $.ajax({
    success: function(data) {
      alert(a_data);
      $(document).dequeue("myName");
    }
  });
});
// 触发queue往下执行
$(document).dequeue("ajaxRequests");

以上代码实现了ajax队列,2个ajax同步执行,其中dequeue用来结束当前ajax,并调用下一个ajax请求。

接下来,我们再来看看另一个ajax 队列的需求(需求二):
在注册的时候验证邮箱、用户名等时候,单个客户端可以频繁发出无数的ajax请求出去,而我们的结果肯定是以最后一个ajax请求为准的。
首先模拟一个服务端页面

<?PHP
    sleep(5);
    exit(time().'');
?>

然后是前台页面,假设由一个元素触发:
html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>测试ajax队列</title>
    </head>
<body>
    <div id="dtitle">点此触发</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</html>

JS代码:

$(function(){
    $("body").queue([]);
    $("#dtitle").click(function(){
        $("body").queue(function(){
            $.get("test.php?t=" + new Date().getMilliseconds(), function(){
                //这一句让queue往下执行;
                $("body").dequeue();
                if ($("body").queue().length == 0)
                    alert("done");
            });
        });
    });
});

下面是firebug下的执行结果,我连续对dtitle元素点击三次,如愿每5秒才发送一次请求。当然这只是演示的原理,既然发了三次请求,肯定要以最后一次为准,那么可以通过队列的length属性来轮循,一时length变为0了,就是全部请求结束了,你就可以执行你想要的逻辑了

好了,通过上面的代码,应该对queue的用法和ajax队列有一定了解了。人总是要不断追求完美的,粗矿的代码,并不能提升代码水平。既然队列那么常用,那是否需要将这个功能封装?答案是肯定的。网上也有一些已经封装好了的插件。
那就重写$.ajax 这个方法吧。说干就干:

(function($) {
    var ajax = $.ajax,
        pendingRequests = {},
        synced = [],
        syncedData = [],
        ajaxRunning = [];
    $.ajax = function(settings) {
        // create settings for compatibility with ajaxSetup
        settings = jQuery.extend(settings, jQuery.extend({}, jQuery.ajaxSettings, settings));
        var port = settings.port;
        switch (settings.mode) {
            case "abort":
                if (pendingRequests[port]) {
                    pendingRequests[port].abort();
                }
                return pendingRequests[port] = ajax.apply(this, arguments);
            case "queue":
                var _old = settings.complete;
                settings.complete = function() {
                    if (_old) {
                        _old.apply(this, arguments);
                    }
                    if (jQuery([ajax]).queue("ajax" + port).length > 0) {
                        jQuery([ajax]).dequeue("ajax" + port);
                    } else {
                        ajaxRunning[port] = false;
                    }
                };
                jQuery([ajax]).queue("ajax" + port, function() {
                    ajax(settings);
                });
                if (jQuery([ajax]).queue("ajax" + port).length == 1 &amp;&amp; !ajaxRunning[port]) {
                    ajaxRunning[port] = true;
                    jQuery([ajax]).dequeue("ajax" + port);
                }
                return;
            case "sync":
                var pos = synced.length;
                synced[pos] = {
                    error: settings.error,
                    success: settings.success,
                    complete: settings.complete,
                    done: false
                };
                syncedData[pos] = {
                    error: [],
                    success: [],
                    complete: []
                };
                settings.error = function() { syncedData[pos].error = arguments; };
                settings.success = function() { syncedData[pos].success = arguments; };
                settings.complete = function() {
                    syncedData[pos].complete = arguments;
                    synced[pos].done = true;
                    if (pos == 0 || !synced[pos - 1])
                        for (var i = pos; i < synced.length &amp;&amp; synced[i].done; i++) {
                        if (synced[i].error) synced[i].error.apply(jQuery, syncedData[i].error);
                        if (synced[i].success) synced[i].success.apply(jQuery, syncedData[i].success);
                        if (synced[i].complete) synced[i].complete.apply(jQuery, syncedData[i].complete);
                        synced[i] = null;
                        syncedData[i] = null;
                    }
                };
        }
        return ajax.apply(this, arguments);
    };
})(jQuery);

以上代码加入了1个mode变量,有3个值”abort”(中止),”queue”(队列),”sync”同步。

对于需求二,我们用这个封装好的ajax改写并改进下,js代码部分如下:

$(function(){
    $("body").queue([]);
    $("#dtitle").click(function(){
        $.ajax({
            url: "test.php?t=" + new Date().getMilliseconds(),
            success: function(html){
                jQuery("ul").append(html);
            },
            //用abort而不用queue,是因为需求是需要最后一个ajax request,而之前的ajax request
            //其实并没有用,那何必要等它们执行完呢?中途就可以把它中止掉
            mode: "abort"
        });
    });
});

看到这里,相信你已经完全了解ajax队列了。就算不了解,你也可以直接用封装好的那段js代码,直接用mode: “abort”
就可以了。

移动端H5页面 iphone6的适配技巧

iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了。

大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H5页面大部分都以320px为基准宽度进行布局,那些大屏屌丝android用户也懒得去理,而现在iphone也搞起多屏幕,老板们重视程度就不一样了。

回归正题,兼容iphone各版本机型最佳的方式就是 自适应

1、viewport 简单粗暴的方式:

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

直接设置viewport为320px的1.3倍,将页面放大1.3倍。

为什么是1.3?

目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,iphone6+则是 414/320 = 1.29375
那么以1.29倍也就约等于1.3了。

这方式也是活动页面快速适配ip6+的不二选择!

2、ip6+ 的CSS media query

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    /*iphone 6*/
}

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    /*iphone 6 plus*/
}

PS: 也可以直接使用实际的device-width:如device-width : 375px

在原有页面的基础上,再针对相应的屏幕大小单独写样式做适配。

3、REM布局

REM是CSS3新增的一种单位,并且移动端的支持度很高,android2.x+,ios5+ 都支持。
REM是相对于dom结构的根元素来设置大小,也就是html这个元素。相较于em单位,rem使用上更容易理解及运用。

REM布局也是目前多屏幕适配的最佳方式

REM与PX的换算可以查看网址:https://offroadcode.com/prototypes/rem-calculator/

假设,html我们设置font-size:12px; 也就是说12px相对于1rem,那么18px也就是 18/12 = 1.5rem。

那么我们以320px的设计布局为基准,将html设置为font-size:100px,即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。

REM如何做响应式布局?

1、如果仅仅是适配ip6+设备,那么使用media query就行。
伪代码如下:

/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/}

/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    html{font-size: 129.375px;}
}

这样,在ip6下,也就将页面内的元素放大了1.17倍,ip6+下也就是放大了1.29倍。

2、如果是完全自适应,那么可以通过JS来控制。

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

页面初始化的时候计算font-size,然后再绑定resize事件。这种效果就和百分比布局一样了。

3、那么用REM做单位与百分比做单位有什么优势?

主要优势在于能更好的控制元素大小【可控性强】。(一般百分比应用在布局层,一般常见设置为50%,33.3%,25%之类的整数居多,难以运用在复杂的页面小部件内)。
但是相比百分比布局,需要借助JS或media query实现,略有一点瑕疵。

DEMO地址

See the Pen Jojaqw by hugo (@baofen14787) on CodePen.

说明:使用REM布局必须选好基准宽度,如第2小点的JS实现,是以320px为基准设置的REM,若后续我们设计稿都改成以ip6为基准的375进行设计时,这个REM也要相应的做调整。

4、图片自适应

刚说完REM布局,那么用百分比布局也能实现一样的效果,但是用百分比布局,必须要面临一个问题:
图片宽度100%,页面加载时会存在高度塌陷的问题。

1

如图:页面加载时图片高度默认不存在。

那么可以用padding-top设置百分比值来实现自适应。

公式如下:

padding-top = (Image Height / Image Width) * 100%

原理:padding-top值为百分比时,取值是是相对于宽度的。

相关代码实现:

<div class="cover">
    ![](http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg)
</div>
.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}

DEMO地址,缩放浏览器窗口看看。

See the Pen vEYzgv by hugo (@baofen14787) on CodePen.

5、图片高清化

大家都知道,iphone6 plus 是3倍高清图了,它的devicePixelRatio = 3。 关于DPR的介绍可以查看这篇文章《设备像素比devicePixelRatio简单介绍

在ios8下,已经开始支持img的srcset 属性了(目前移动端也就ios8开始支持),也就是说,可以对一张图片设置2个URL,浏览器自动加载对应的图片。

3

支持程度如下:

黄色表示仅支持旧的srcset规范,绿色表示支持全新的srcset规范,包括sizes属性,w描述符。 这里不展开,详细了解可自行google。

4

如下DEMO,请切换devicePixelRatio值进行查看:

See the Pen YPzOxB by hugo (@baofen14787) on CodePen.

不过目前前端这边图片的实现基本都用lazyload的方式实现。srcset的图片加载方式在实际项目中运用还比较少。

6、背景图高清化

media query 实现高清化

img标签的高清化,可以通过JS判断devicePixelRatio的值来加载不同尺寸的图片,但是对于背景图,写在CSS中的,用JS来判断就略麻烦了,还好CSS通过media query也能判断dpr。

目前兼容性最好的背景图高清化实现方式,使用media query的-webkit-min-device-pixel-ratio做判断:

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
        .css{
            background-image: url(img_1x.png);
        }

        /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .css{
                background-image: url(img_2x.png);
            }
        }

        /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .css{
                background-image: url(img_3x.png);
            }
        }

进一步,可以通过工具生成相应的3x,2x,1x的图片及css,在使用时直接引用即可。谁搞一个?

关于移动设备的-webkit-min-device-pixel-ratio值,可以查看该网页的整理:http://bjango.com/articles/min-device-pixel-ratio/

image-set 实现高清化

image-set,它是Webkit的私有属性,也是Css4的一个属性,它是为了解决Retina屏幕下的图像显示而生。

使用方式也很简单。伪代码如下:

.css {
            background-image: url(1x.png);    /*不支持image-set的情况下显示*/
            background: -webkit-image-set(
                    url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
                    url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
                    url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
            );
        }

目前移动端的支持程度来看,ios7+,android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案。image-set也是一种实现方案。

使用image-set 与 media query 实现有什么区别及好处?

这篇文章里面做了很详细的阐述,大家可以看看:http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

大体的意思是:image-set不需要告诉浏览器使用什么图像,而是直接提供了图像让浏览器选择。这就意味着,如果在低网速下,浏览器可以选择加载低分辨率的图片。(PS:好智能的样子)

但是相比如media query的实现,image-set仅支持单个图片的高清化,不适合在css sprite下使用。 并且兼容性也是一大硬伤。

但是一般来说,用在LOGO区域,单个图片图标的区域下,也是个不错的选择。

7、图片列表的自适应

关于适配,也就是要让布局更灵活,在电商网站里面,商品列表是一个非常常见的结构。

一种比较智能的列表方式是: 两端对齐,间距自适应。

那么可以使用FLEXBOX布局来实现两端对齐的效果,也可以使用text-align:justify的方式实现。

先看个flex实现的例子,主要通过justify-content:space-between,来实现:

See the Pen YPzOLM by hugo (@baofen14787) on CodePen.

flexbox的布局方式,在PC端就不合适了,ie9以下都不支持,那么更友好的方式可以使用text-align:justify来实现,兼容各大主流浏览器,包括IE6。

详情请移步我以前写的博文:《inline-block + justify实现列表两端对齐

小DEMO:

See the Pen raNZKp by hugo (@baofen14787) on CodePen.

但是这2种布局方式都有一定的局限性。就是列表个数必须凑整。目前还没找到一种能够兼容不限个数的实现方案,如果各位看官有更好的实现方式,也欢迎提出,一起交流。

总结

  1. 活动页面快速适配可以使用修改viewport的方式快速适配。
  2. 目前我所知道的适配方案里面,使用REM单位做布局是目前最佳的实现方案,可优先考虑。
  3. 移动端ip6的适配方案有很多,没有固定的套路及方法,请根据自身业务的特点,选择其中的一些方法组合使用。

webkit浏览器渲染影响因素分析

前言:浏览器的渲染对性能影响非常大,特别是在移动端页面,在宏观上,我们可以参考雅虎那20几条军规来操作,但在微观渲染层面,实际还没有一套相对成型的理论做为依据。

本文只是抛砖引玉,带大家进入微观的优化领域,实际在渲染优化这块上,还有很多技巧及方法需要大家去挖掘。本文写的也比较凌乱,望包涵!!

先来看个chrome timeline 工具上的一个图:

rendering1

在timeline上,我们看到有6种颜色的柱子,这6个类型的柱子构建了整个webkit浏览器的渲染过程。

简单的分类一下:蓝色表示加载,黄色表示脚本执行,紫色表示计算样式及布局,绿色表示绘制合成,白色表示空闲时间,灰色表示其他时间。这里主要看的是前面三个。

如下图:

rendering2

蓝色loading包含各种资源加载,在页面初始化加载阶段可以看到蓝色部分是耗时最长的,因为正在加载资源(加载html、css、js、img、flash、mp3等。)

Chrome上各个渲染部分的实际含义:

Parse Html:

发送一个http请求,获取请求的内容,然后解析html的过程。

Recalculate Style:

重新计算样式,它计算的是Style,和Layout做的事情完全不同。Layout计算的一个元素绝对的位置和尺寸,或者说是“Compute Layout”。

Recalculate被触发的时候做的事情就是处理JavaScript给元素设置的样式而已。Recalculate Style会计算出Render 树(渲染树),然后从根节点开始进行页面渲染,将CSS附加到DOM上的过程。

任何企图改变元素样式的操作都会触发Recalculate 。同Layout一样,它也是在JavaScript执行完成后才触发的。

Layout:

计算页面上的布局,即元素在文档中的位置及大小。如上面所说,Layout计算的是布局位置信息。任何有可能改变元素位置或大小的样式都会触发这个Layout事件,如width、height

Rasterizer:

光栅化,一般的安卓手机都会进行光栅化,光栅主要是针对图形的一个栅格化过程。低端手机在这部分耗时还蛮多的。

Paint:

页面上显示东西有任何变动都会触发Paint 。包括拖动滚动条、鼠标选中文字,等这些完全不改变样式,只改变显示结果的动作都会触发Paint。

Paint的工作就是把文档中用户可见的那一部分展现给用户。Paint是把Layout和Recalculate的计算的结果直接在浏览器窗体上绘制出来,它并不实现具体的元素计算。

Image Decode:

图片解码,将图片解析到浏览器上显示的过程。

Image Resize:

图片的大小设置,图片加载解析后,若发现图片大小并不是实际的大小(CSS改变了宽高),则需要Resize。Resize越大,耗时越久,所以尽量以图片的原始大小输出。

Composite Layers:

最后合并图层,输出页面到屏幕。浏览器在渲染过程中会将一些含义特殊样式的DOM结构绘制于其他图层,有点类似于Photoshop的图层概念。一张图片在Photoshop是由多个图层组合而成,而浏览器最终显示的页面实际也是有多个图层构成的。

有哪些因素会导致新建图层:

1、进行3D或者透视变换的CSS属性

2、使用硬件加速视频解码的<video>元素

3、具有3D(WebGL)上下文或者硬件加速的2D上下文的<canvas>元素

4、组合型插件(即Flash)

5、具有有CSS透明度动画或者使用动画式Webkit变换的元素

6、具有硬件加速的CSS滤镜的元素

在CSS里面,不同的属性会触发不同的layout或者paint,所以通过JS改变css的属性时,应该考虑到这些方面。如下图:

2

再引用另外一张图来看看CSS不同属性所触发的情况:

3

关于CSS属性的一个渲染问题,可以看下表,需翻墙查看: https://docs.google.com/spreadsheet/pub?key=0ArK1Uipy0SbDdHVLc1ozTFlja1dhb25QNGhJMXN5MXc&single=true&gid=0&output=html

如何优化渲染时间

1、为了确保页面的流程,必须保证60fps内不发生2次渲染树更新。 如下图,16ms内只发生如下几个操作则是正常及正确的 :

QQ截图20140817214845

2、页面滚动时,需要避免不必要的渲染及长时间渲染。

不必要的渲染包括:

1)position:fixed

fixed定位在滚动时会不停的进行渲染,特别是如果是页面顶部有个fiexd,页面底部有个类似返回顶部的fixed,则在滚动时会整个页面进行渲染,效率非常低。可以加 transform :  translateZ(0) ; 解决。

7

2) overflow:scroll

3) hover effects

有些:hover伪类在页面滚动时会不小心就触发到,如hover效果有阴影、圆角等比较耗时的属性时,建议页面滚动时,先取消hover效果,滚动停止后再加上hover效果。这个可以通过在外层加类名进行控制。

4) touch listeners

6

长时间渲染包括:

1)复杂的CSS

2)Image Decodes

这里特别是图片的Image Decodes及 Images Resize 这2个过程在移动端是非常耗时的,如下图:

4

3)Large empty layers(大的空图层,DIV)

5

参考: https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-case-studies

[转]如何组织大型JavaScript应用中的代码

本文转自: http://www.csdn.net/article/2013-04-27/2815077-code-organization-angularjs-javascript

在实际项目中,如果单纯的按model、view、controllers、template 等文件夹进行分类,等项目做大或者文件复杂后,就会出现混乱。因为不清楚引用关系。如本文所说的,找不到袜子,虽然知道在哪个抽屉里,但抽屉里内容太多,太类似。

在项目中,我们经常会修改或者维护单一的页面或者某个功能模块。如本文所说按功能模块或者页面进行文件组织确实是个不错的方法。

同时,也可以两者结合起来:先按项目功能分文件夹,里面再按MVC的架构细分文件夹。

每个项目都有一些common之类的功能模块,我建议是,如果一个功能或者函数,有超过2个以上的页面使用,就将它放于common文件夹。

===================================

本文作者Cliff Meyers是一个前端工程师,熟悉HTML5、JavaScript、J2EE开发,他在开发过程中总结了自己在应对JavaScript应用越来越庞大情况下的文件结构,深得其他开发者认可。以下为CSDN编译:

地板上堆放的衣服

首先,我们来看看angular-seed,它是AngularJS应用开发的官方入门项目,其文件结构是这样的:

  • css/
  • img/
  • js/
    • app.js
    • controllers.js
    • directives.js
    • filters.js
    • services.js
  • lib/
  • partials/

看起来就像是把衣服按类型堆在地板上,一堆袜子、一堆内衣、一堆衬衫等等。你知道拐角的那堆袜子里有今天要穿的黑色羊毛袜,但你仍需要花上一段时间来寻找。

这种组织方式很凌乱。一旦你的代码中存在6、7个甚至更多的控制器或者服务,文件管理就会变得难以处理:很难找到想要寻找的对象,源代码控制中的文件也变更集变得难懂。

袜子抽屉

常见的JavaScript文件结构还有另一种形式,即按原型将文件分类。我们继续用整理衣服来比喻:现在我们买了有很多抽屉的衣柜,打算将袜子放在其中一个抽屉里,内衣放在另一个抽屉,再把衬衫整齐地叠在第三个抽屉……

想象一下,我们正在开发一个简单的电子商务网站,包括登陆流程、产品目录以及购物车UI。同样,我们将文件分为以下几个原型:models(业务逻辑和状态)、controllers以及services(HTTP/JSON端点加密),而按照Angular默认那样非笼统地归到“service”架构。因此我们的JavaScript目录变成了这样:

  • controllers/
    • LoginController.js
    • RegistrationController.js
    • ProductDetailController.js
    • SearchResultsController.js
  • directives.js
  • filters.js
  • models/
    • CartModel.js
    • ProductModel.js
    • SearchResultsModel.js
    • UserModel.js
  • services/
    • CartService.js
    • UserService.js
    • ProductService.js

不错,现在已经可以通过树形文件目录或者IDE快捷键更方便地查找文件了,源代码控制中的变更集(changeset)也能够清楚地描述文件修改记录。虽然已经获得了极大的改进,但是仍有一定的局限性。

想象一下,你现在正在办公室,突然发现明天有个商务出差,需要几套干洗的衣服,因此给家里打电话告诉另一半把黑色和蓝色的西装交给清洁工,还有黑纹领带配灰色衬衫、白衬衫配纯黄领带。如果你的另一半并不熟悉衣柜,又该如何从三条黄色的领带中挑出你的正确需求?

模块化

希望衣服的比喻没有让你觉得过于陈旧,下面举一个实例:

  • 你的搭档是新来的开发者,他被要求去修补这个复杂应用中的一处bug。
  • 他扫过这些文件夹,看到了controllers、models、services等文件夹整齐地排列着,但是他仍然不清楚对象间的依赖关系。
  • 处于某些原因,他希望能够重用部分代码,这需要从各个文件夹中搜集相关文件,而且常常会遗漏某些文件夹中的对象。

信或不信,你确实很少会在新项目中重用很多代码,但你很可能需要重用登陆系统这样的整个模块。所以,是不是按功能划分文件会更好?下面的文件结构是以功能划分后的应用结构:

  • cart/
    • CartModel.js
    • CartService.js
  • common/
    • directives.js
    • filters.js
  • product/
    • search/
      • SearchResultsController.js
      • SearchResultsModel.js
    • ProductDetailController.js
    • ProductModel.js
    • ProductService.js
  • user/
    • LoginController.js
    • RegistrationController.js
    • UserModel.js
    • UserService.js

虽然现实世界中有空间限制,难以随意整理服装,但是编程中类似的处理却是零成本的。

现在即使是新来的开发者也能通过顶级文件夹的命名理解应用的功能,相同文件夹下的文件会存在互相依赖等关系,而且仅仅通过浏览文件组织结构就能轻易理解登录、注册等功能的原理。新的项目也可以通过复制粘贴来重用其中的代码了。

使用AngularJS我们可以进一步将相关代码组织为模块:

var userModule = angular.module('userModule',[]);
 
userModule.factory('userService', ['$http', function($http) {
  return new UserService($http);
}]);
 
userModule.factory('userModel', ['userService', function(userService) {
  return new UserModel(userService);
}]);
 
userModule.controller('loginController', ['$scope', 'userModel', LoginController]);
 
userModule.controller('registrationController', ['$scope', 'userModel', RegistrationController]);

如果我们将UserModule.js文件放到user文件夹,它就成了这个模块中使用到的对象的“manifest”,这也是适合RequireJS或者Browserify中放置某些加载指令的地方

如何处理通用代码

每个应用都会有某些代码广泛使用在多个模块中,我们常常使用名为“commom”或者“shared”的文件夹来存放这些功能代码。又该如何处理这些通用代码呢?

  1. 如果模块中的对象需要直接访问几个“通用”对象,为这些对象提供几个Facade(外观模式)。这有助于减少每个对象的依赖者,而过多的关联对象通常意味着糟糕的代码结构。
  2. 如果“通用”模块变得过于庞大,你需要将它按功能领域细分为多个子模块。确保每个应用模块只使用它需要的“通用”模块,这即是SOLID中“接口隔离原则”的变种。
  3. 在根范围($rootScope)添加实体,这样子范围也可以使用,适合多个控制器都依赖同一个对象(比如“PermissionsModel”)的情况。
  4. 在解耦两个不明确互相引用的组件时,请使用事件。Angular中Scope对象的$emit、$broadcast以及$on方法使得这种方式变得现实。控制器能够触发一个事件来执行某些动作,然后再动作结束后收到相应地通知。

原文链接: CLIFF MEYERS

jQuery使用 Animate + scrollTop 实现页面滑动效果

使用jquery的Animate 方法可以实现页面上下滑动,以往常用的写法是:

$('html, body').animate({
    scrollTop: '0px','fast', function(){
       
    }
});

前几天在写页面滑动插件的时候,需要在animate后执行回调。如下:

$('html, body').animate({
    scrollTop: '0px','fast', function(){
       //这里的代码执行了两次
       $('body').trigger('scrollDone');
    }
});

于是发现,回调内执行了两次。之前一直都没注意到这个问题。

其原因主要是使用了 $('html, body') 作为animate的dom,这样做的目的是为了兼容各浏览器。

webkit 内核的浏览器使用 body 进行滑动,而其他浏览器则使用 html 进行滑动。

这里偷懒的使用了 $('html, body') ,虽然解决了兼容性问题,但是却导致 animate 回调两次的问题。因此该方案并不完美。

于是,可以做下判断,解决兼容性及回调问题:

$($.browser.webkit ? "body": "html").animate({
    scrollTop: '0px','fast', function(){
        $('body').trigger('scrollDone');
    }
});

在jquery 1.9版本后,已经不支持 $.browser.webkit 的方法进行浏览器类型检测了,需要的话,自己通过ua判断下即可