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();

参考资料:

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”
就可以了。

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判断下即可

[转]Javascript中的自执行函数表达式

在写插件或我们日常代码中,经常都会用到自执行函数表达式,最简单,最常用的也就是匿名函数自运行了。 
如下代码结构:

(function(){
    //code
})()

网上看到一篇关于这方面的文章,讲得蛮详细,特转载到博客记录一下。

转载地址: http://suqing.iteye.com/blog/1981591

============================================ 
在Bootstrap源码(具体请看《Bootstrap源码解析》)和其他jQuery插件经常看到如下的写法:

+function ($) {   
  
}(window.jQuery);

这种写法称为: 
IIFE (Imdiately Invoked Function Expression 立即执行的函数表达式)。

一步步来分析这段代码。

先弄清 函数表达式(function expression)和 函数声明(function declaration)的区别: 
函数表达式 Function Expression – var test = function() {}; 
函数申明 Function Declaration – function test() {};

函数表达式中的函数可以为匿名函数,也可以有函数名,但是该函数实际上不能直接使用,只能通过表达式左边的变量 a 来调用。

var a = function(){  
  alert('Function expression');  
}  
var b = new a();

函数声明时必须有函数名。

function a(){  
  alert('Function declaration');  
}  
a();

这是一个匿名函数。

function () {  
  
}

你也许注意到匿名函数在console下会报错。console的执行和报错如下:

function(){}

 
SyntaxError: Unexpected token (

通过一元操作符+变成了函数表达式。也可以使用 – ~ !等其他一元运算符或者括号,目的是为了引导解析器,指明运算符附近是一个表达式。以下是三种经典方式 :

+function () {   
  
};  
  
(function () {  
  
});  
  
void function() {  
  
};

函数表达式通过 末尾的() 来调用并运行。就是一个IIFE。

+function () {   
  
}();  
  
(funtion () {  
  
})();

代码性能 
运算符:+加-减!逻辑非~位取反,返回NaN(Not A Number)。

“()”组运算符:返回表达式的执行结果undefined。

void:按运算符结合语句执行,返回 undefined。 
这几种的性能对比结果:

可见+性能最差(在Firefox下差距更明显),其他几种都差不多。不过IIFE只执行一遍,对js执行效率的影响特别小,使用哪种还是看个人爱好。

传参,为了避免$与其他库或者模板申明冲突,window.jQuery 作为参数传递。

+function (x) {  
    console.log(x);  
}(3);  
  
+function ($) {  
  
}(window.jQuery);

使用IIFE的好处

总结有4点: 提升性能、有利于压缩、避免冲突、依赖加载

1、减少作用域查找。 使用IIFE的一个微小的性能优势是通过匿名函数的参数传递常用全局对象window、document、jQuery,在作用域内引用这些全局对象。JavaScript解释器首先在作用域内查找属性,然后一直沿着链向上查找,直到全局范围。将全局对象放在IIFE作用域内提升js解释器的查找速度和性能。

传递全局对象到IIFE的一段代码示例:

// Anonymous function that has three arguments  
function(window, document, $) {  
  
  // You can now reference the window, document, and jQuery objects in a local scope  
  
}(window, document, window.jQuery); // The global window, document, and jQuery objects are passed into the anonymous function

2、有利于压缩。 另一个微小的优势是有利于代码压缩。既然通过参数传递了这些全局对象,压缩的时候可以将这些全局对象匿名为一个字符的变量名(只要这个字符没有被其他变量使用过)。如果上面的代码压缩后会变成这样:

// Anonymous function that has three arguments  
function(w, d, $) {  
  
  // You can now reference the window, document, and jQuery objects in a local scope  
  
}(window, document, window.jQuery); // The global window, document, and jQuery objects are passed into the anonymous function

3、避免全局命名冲突 。当使用jQuery的时候,全局的window.jQuery对象 作为一个参数传递给$,在匿名函数内部你再也不需要担心$和其他库或者模板申明冲突。 正如James padolsey所说: 
An IIFE protects a module’s scope from the environment in which it is placed.

4、通过传参的方式,可以灵活的加载第三方插件。 (当然使用模块化加载更好,这里不考虑。)举个例子,如果a页面需要使用KindEditor,a.html引入kindeditor.js 和 a.js 
你可能会这么写 a.js:

$(function() {  
  
   var editor  
    KindEditor.ready(function(K) {  
  
        editor = K.create('textarea[data-name="kindeditor"]', {  
            resizeType : 1  
        })  
    })  
  
})

b页面不需要使用Kindeditor,没有引入kindeditor.js。但是在合并JS代码后,b页面也会执行a.js中的代码,页面报错Uncaught ReferenceError: KindEditor is not defined。也就是b页面执行了KindEditor,难道所有页面都要加载Kindeditor源文件? 
可以这么修改a.js,将KindEditor变量参数化,通过给立即执行的函数表示式的参数赋值,那么其他页面都不需要加载Kindeditor源文件

+function( KindEditor){  
  
    var editor  
    if(KindEditor){  
        KindEditor.ready(function(K) {  
  
	  editor = K.create('textarea[data-name="kindeditor"]', {  
	  resizeType : 1  
	  })  
        })  
    }  
  
}(KindEditor || undefined)

IIFE最佳实践 
反对使用IIFE的其中一个理由是可读性差,如果你有大量的JavaScript代码都在一段IIFE里,要是想查找IIFE传递的实际参数值,必须要滚动到代码最后。幸运的是,你可以使用一个更可读的模式:

(function (library) {  
  
    // Calls the second IIFE and locally passes in the global jQuery, window, and document objects  
    library(window, document, window.jQuery);  
  
}  
  
// Locally scoped parameters   
(function (window, document, $) {  
  
// Library code goes here  
  
}));

这种IIFE模式清晰的展示了传递了哪些全局对象到你的IIFE中,不需要滚动到长文档的最后。

jQuery优化 
一段看上去写法有点像的代码。大部分项目用这段代码做作用域,这段代码会在DOM加载完成时初始化jQuery代码。

$(function(){   
  
});

这种写法等同于

$(document).ready(function(){  
// 在DOM加载完成时初始化jQuery代码。  
});

区别于

$(window).load(function(){  
// 在图片等媒体文件加载完成时,初始化jQuery代码。  
});

结合IIFE的最佳实践,更好的写法是,立即执行document ready

+function ($) {  
  
  $(function(){  
  
  })  
  
}(window.jQuery)

最佳实践

// IIFE - Immediately Invoked Function Expression  
  +function(yourcode) {  
  
    // The global jQuery object is passed as a parameter  
    yourcode(window.jQuery, window, document);  
  
  }(function($, window, document) {  
  
    // The $ is now locally scoped   
  
   // Listen for the jQuery ready event on the document  
   $(function() {  
  
     // The DOM is ready!  
  
   }));

具体请看工程师,请优化你的代码

其他 
在Bootstrap和其他插件中经常看到如下写法:

+function ($) { "use strict";    
    
}(window.jQuery);

关于字符串”use strict”;请看严格模式

参考资料: 
《Javascript高级程序设计(第3版)》 7.3 模仿块级作用域 
Immediately-Invoked Function Expression (IIFE) – Ben Alman 
ECMA-262-3 in detail. Chapter 5. Functions. – Dmitry A. Soshnikov 
Functions and function scope – Mozilla Developer Network 
Named function expressions – Juriy “kangax” Zaytsev 
JavaScript Module Pattern: In-Depth – Ben Cherry 
Closures explained with JavaScript – Nick Morga 
what does function function window jquery do – Stackoverflow

http://gregfranko.com/blog/i-love-my-iife/

如何编写grunt 插件

也许现有的grunt plugin无法满足你的需求,那就只能自己写一个plugin。

准备工作:

一、 当然首先是查一下plugin的API文档及模板。grunt的API比较少,但是已经包含了大部分的基础功能了。如常用的文件读取,log输出等。

相关前期文档可以查看:

http://www.gruntjs.net/docs/creating-plugins/ 
http://www.gruntjs.net/api/grunt.file/

二、 创建项目环境。

看完文档之后,接下来就得开始编写项目了,还好grunt已经为我们准备了标准的plugin模板,我们通过git命令下载回来后直接修改。然后就可以进入插件开发。

项目创建流程如下:

vIfyie

1、通过 npm install -g grunt-init 命令安装 grunt-init 。 
2、通过 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin 命令安装grunt插件模版。 
3、在一个空的目录中执行 grunt-init gruntplugin 。 
执行这一步时,会出现如下问答式的内容。根据自己需要填写好就会创建出相应的项目所需文件。 
当然,如果你还不清楚这些怎么填写,也可以随便写一下,日后也可以直接修改配置文件。 

4、执行 npm install 命令以准备开发环境。

好了,现在可以开始grunt plugin的书写了。

140531151439

以下是我新建的一个插件目录结构。 

在task文件夹里编写你需要的任务,其中常用的一个函数接口是 grunt.files

以下是我刚写是timestamp 插件,看代码也许比文字更容易理解,呵呵。插件的项目地址: https://github.com/baofen14787/grunt-timestamp-file

/*
 * grunt-timestamp-file
 * https://github.com/baofen14787/grunt-timestamp-file
 *
 * Copyright (c) 2014 hugo
 * Licensed under the MIT license.
 */
var crypto = require('crypto');

'use strict';

module.exports = function (grunt) {

	// Please see the Grunt documentation for more information regarding task
	// creation: http://gruntjs.com/creating-tasks

	grunt.registerMultiTask('timestamp_file', 'grunt create timestamp file in project', function () {

		// Merge task-specific and/or target-specific options with these defaults.
		//默认参数
		var options = this.options({
			punctuation	 :   '.',
			separator	   :   '\n ',
			urlRoot		 :   '',						  //生成的页面片地址URL根目录地址
			timestampType   :   'md5',  //md5 || time
			timestampFormat :   'yymmddhMMss'
		});

		function ttType(filepath){
			var timeString,
				sourcedata;
			if(options.timestampType == 'md5'){
				sourcedata = grunt.file.read(filepath);
				timeString = md5(sourcedata, options.timestampType).substring(0,10);  //MD5太长 截短一点
			}else{
				timeString = grunt.template.today(options.timestampFormat)
			}
			return timeString;
		}

		function md5(content, encoding) {
			return crypto.createHash('md5').update(content, encoding).digest('hex');
		}

		/**
		 * 创建script标签
		 * @param filepath
		 * @param attr
		 * @returns {string}
		 */
		function createScript(filepath,attr){
			var version = ttType(filepath),
				url = options.urlRoot + filepath;

			var str = '<script src="'+ url + '?v='+ version +'" ';
			if(typeof attr === 'object'){
				for(var i in attr){
					str += i + '="' + attr[i] + '" ';
				}
			}
			str += '></script>';
			return str;
		}

		function createStyle(filepath,attr){
			var version = ttType(filepath),
				url = options.urlRoot + filepath;
			var str = '<link rel="stylesheet" type="text/css" media="screen" href='+ url + '?v='+ version +'" ';
			if(typeof attr === 'object'){
				for(var i in attr){
					str += i + '="' + attr[i] + '" ';
				}
			}
			str += '/>';
			return str;
		}

		function createTimesTamp(filepath,attr){
			//判定文件类型
			var fileTyle = filepath.split('.'),
				tag;
			attr = attr || options.attr;
			fileTyle = fileTyle[fileTyle.length -1];

			switch (fileTyle){
				case 'js':
					tag = createScript(filepath,attr);
					break
				case 'css':
					tag = createStyle(filepath,attr);
			}
			return tag;
		}

		console.info('filepath:', this.files)
		//开始读取文件
		this.files.forEach(function (f) {

			// Concat specified files.
			var src = f.src.filter(function (filepath) {
				//如果文件不存在 则 提示警告
				if (!grunt.file.exists(filepath)) {
					grunt.log.warn('Source file "' + filepath + '" not found.');
					return false;
				} else {
					return true;
				}
			}).map(function (filepath) {
					// Read file source.
					return createTimesTamp(filepath);
				}).join(grunt.util.normalizelf(options.separator));

			// Handle options.
			src += options.punctuation;

			// Write the destination file.
			grunt.file.write(f.dest, src);

			// Print a success message.
			grunt.log.writeln('File "' + f.dest + '" created.');
		});
	});



};

三、最后,插件编写完后就开始发布了。

官网的发布写的比较简单,直接就是 npm pulish .但实际上直接运行这个命令很可能报错。

正确的发布顺序是:

# 初始化 package.json
C:\GitHub\grunt-timestamp-file> npm init
 
# 验证你在 npmjs.org 上的账号
C:\GitHub\grunt-timestamp-file> npm adduser
 
# 发布
C:\GitHub\grunt-timestamp-file> npm publish .

上面三部是初次发布插件的步骤。当然,在发布前需要你先去npmjs.org上注册一个账号。

如果你以后修改了代码,然后想要同步到 npm 上的话请修改 package.json 中的 version 然后再次 publish

最后,如果你报错 
no_perms Private mode enable, only admin can publish this module

那么可能是你用了国内的镜像地址了,只需要重新把地址注册回npmjs即可。npm config set registry http://registry.npmjs.org

backbone1.1.2源码阅读

backbone是比较轻量的mvc框架,去掉注释整个源码不到1000行。框架源码还是比较好理解的,没什么太有技巧性的写法,读起来比较轻松。顺便把代码注释也写上了,目前只是粗略读了下,晚点再做深入分析,取其精华。

阅读地址传送门: https://github.com/baofen14787/backbone/blob/master/backbone.js

jquery ui widget 源码分析

jquery ui 的所有组件都是基于一个简单,可重用的widget。

这个widget是jquery ui的核心部分,实用它能实现一致的API,创建有状态的插件,而无需关心插件的内部转换。$.widget( name, base, prototype )

widget一共有2或3个参数。base为可选。

这里之所以把base放在第二个参数里,主要是因为这样写代码更直观一些。(因为后面的prototype 是个代码非常长的大对象)。

name: 第一个参数是一个包含一个命名空间和组件名称的字符串,通过”.”来分割。 
命名空间必须有,它指向widget prototype存储的全局jQuery对象。 
如果命名空间没有,widget factory将会为你生成。widget name是插件函数和原型的真实名称, 
比如: jQuery.widget( “demo.multi”, {…} ) 将会生成 jQuery.demo , jQuery.demo.multi , and jQuery.demo.multi.prototype .

base: 第二个参数(可选)是 widget prototype继承于什么对象。 
例如jQuery UI有一个“mouse”的插件,它可以作为其他的插件提供的基础。 
为了实现这个所有的基于mouse的插件比如draggable, 
droppable可以这么做: jQuery.widget( "ui.draggable", $.ui.mouse, {...} ); 
如果没有这个参数,widget默认继承自“base widget” jQuery.Widget(注意jQuery.widget 和 jQuery.Widget不同) 。

prototype: 最后一个参数是一个对象文字,它会转化为所有widget实例的prototype。widget factory会生成属性链,连接到她继承的widget的prototype。一直到最基本的 jQuery.Widget。

一旦你调用 jQuery.widget ,它会在 jQuery prototype ( jQuery.fn ) 上生成一个新的可用方法对应于widget的名字,比如我们这个例子jQuery.fn.multi。 .fn方法是包含Dom元素的jquery对象和你生成的 widget prototyp实例的接口,为每一个jQuery对象生成一个新的widget的实例。

/*!
 * jQuery UI Widget @VERSION
 * http://jqueryui.com
 *
 * Copyright 2014 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/jQuery.widget/
 */

//这里判定是否支持amd or cmd 模式
(function( factory ) {
	if ( typeof define === "function" &amp;&amp; define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "jquery" ], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
}(function( $ ) {

var widget_uuid = 0,        //插件的实例化数量
	widget_slice = Array.prototype.slice;   //数组的slice方法,这里的作用是将参赛arguments 转为真正的数组

//清除插件的数据及缓存
$.cleanData = (function( orig ) {
	return function( elems ) {
		for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
			try {
	    // 重写cleanData方法,调用后触发每个元素的remove事件
				$( elem ).triggerHandler( "remove" );
			// http://bugs.jquery.com/ticket/8235
			} catch( e ) {}
		}
		orig( elems );
	};
})( $.cleanData );

    /**
     * widget工厂方法,用于创建插件
     * @param name 包含命名空间的插件名称,格式 xx.xxx
     * @param base 需要继承的ui组件
     * @param prototype 插件的实际代码
     * @returns {Function}
     */
$.widget = function( name, base, prototype ) {
	var fullName, //插件全称
        existingConstructor, //原有的构造函数
        constructor,	//当前构造函数
        basePrototype,          //父类的Prototype
		// proxiedPrototype allows the provided prototype to remain unmodified
		// so that it can be used as a mixin for multiple widgets (#8876)
		proxiedPrototype = {},      //可调用父类方法_spuer的prototype对象,扩展于prototype
		namespace = name.split( "." )[ 0 ];

	name = name.split( "." )[ 1 ];
	fullName = namespace + "-" + name;
    //如果只有2个参数  base默认为Widget类,组件默认会继承base类的所有方法
	if ( !prototype ) {
		prototype = base;
		base = $.Widget;
	}

//    console.log(base, $.Widget)

	// create selector for plugin
    //创建一个自定义的伪类选择器
    //如 $(':ui-menu') 则表示选择定义了ui-menu插件的元素
	$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
		return !!$.data( elem, fullName );
	};

    // 判定命名空间对象是否存在,没有的话 则创建一个空对象
	$[ namespace ] = $[ namespace ] || {};
    //这里存一份旧版的插件,如果这个插件已经被使用或者定义了
	existingConstructor = $[ namespace ][ name ];
    //这个是插件实例化的主要部分
    //constructor存储了插件的实例,同时也创建了基于命名空间的对象
    //如$.ui.menu
	constructor = $[ namespace ][ name ] = function( options, element ) {
		// allow instantiation without "new" keyword
        //允许直接调用命名空间上的方法来创建组件
        //比如:$.ui.menu({},'#id') 这种方式创建的话,默认没有new 实例化。因为_createWidget是prototype上的方法,需要new关键字来实例化
        //通过 调用 $.ui.menu 来实例化插件
		if ( !this._createWidget ) {
	console.info(this)
			return new constructor( options, element );
		}

		// allow instantiation without initializing for simple inheritance
		// must use "new" keyword (the code above always passes args)
        //如果存在参数,则说明是正常调用插件
        //_createWidget是创建插件的核心方法
		if ( arguments.length ) {
			this._createWidget( options, element );
		}
	};
	// extend with the existing constructor to carry over any static properties
    //合并对象,将旧插件实例,及版本号、prototype合并到constructor
	$.extend( constructor, existingConstructor, {

		version: prototype.version,
		// copy the object used to create the prototype in case we need to
		// redefine the widget later
        //创建一个新的插件对象
        //将插件实例暴露给外部,可用户修改及覆盖
		_proto: $.extend( {}, prototype ),
		// track widgets that inherit from this widget in case this widget is
		// redefined after a widget inherits from it
		_childConstructors: []
	});

    //实例化父类 获取父类的  prototype
	basePrototype = new base();
	// we need to make the options hash a property directly on the new instance
	// otherwise we'll modify the options hash on the prototype that we're
	// inheriting from
    //这里深复制一份options
	basePrototype.options = $.widget.extend( {}, basePrototype.options );
    //在传入的ui原型中有方法调用this._super 和this.__superApply会调用到base上(最基类上)的方法
	$.each( prototype, function( prop, value ) {
        //如果val不是function 则直接给对象赋值字符串
		if ( !$.isFunction( value ) ) {
			proxiedPrototype[ prop ] = value;
			return;
		}
        //如果val是function
		proxiedPrototype[ prop ] = (function() {
	//两种调用父类函数的方法
			var _super = function() {
	        //将当期实例调用父类的方法
					return base.prototype[ prop ].apply( this, arguments );
				},
				_superApply = function( args ) {
					return base.prototype[ prop ].apply( this, args );
				};
			return function() {
				var __super = this._super,
					__superApply = this._superApply,
					returnValue;
//	    console.log(prop, value,this,this._super,'===')
//	    debugger;
	    //在这里调用父类的函数
				this._super = _super;
				this._superApply = _superApply;

				returnValue = value.apply( this, arguments );

				this._super = __super;
				this._superApply = __superApply;
//	    console.log(this,value,returnValue,prop,'===')
				return returnValue;
			};
		})();
	});
//    console.info(proxiedPrototype)
//    debugger;
    //这里是实例化获取的内容
	constructor.prototype = $.widget.extend( basePrototype, {
		// TODO: remove support for widgetEventPrefix
		// always use the name + a colon as the prefix, e.g., draggable:start
		// don't prefix for widgets that aren't DOM-based
		widgetEventPrefix: existingConstructor ? (basePrototype.widgetEventPrefix || name) : name
	}, proxiedPrototype, {
        //重新把constructor指向 constructor 变量
		constructor: constructor,
		namespace: namespace,
		widgetName: name,
		widgetFullName: fullName
	});

	// If this widget is being redefined then we need to find all widgets that
	// are inheriting from it and redefine all of them so that they inherit from
	// the new version of this widget. We're essentially trying to replace one
	// level in the prototype chain.
    //这里判定插件是否被使用了。一般来说,都不会被使用的。
    //因为插件的开发者都是我们自己,呵呵
	if ( existingConstructor ) {
		$.each( existingConstructor._childConstructors, function( i, child ) {
			var childPrototype = child.prototype;

			// redefine the child widget using the same prototype that was
			// originally used, but inherit from the new version of the base
			$.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, child._proto );
		});
		// remove the list of existing child constructors from the old constructor
		// so the old child constructors can be garbage collected
		delete existingConstructor._childConstructors;
	} else {
        //父类添加当前插件的实例 主要用于作用域链查找 不至于断层
		base._childConstructors.push( constructor );
	}

    //将此方法挂在jQuery对象上
	$.widget.bridge( name, constructor );

	return constructor;
};

//扩展jq的extend方法,实际上类似$.extend(true,..) 深复制
$.widget.extend = function( target ) {
	var input = widget_slice.call( arguments, 1 ),
		inputIndex = 0,
		inputLength = input.length,
		key,
		value;
	for ( ; inputIndex < inputLength; inputIndex++ ) {
		for ( key in input[ inputIndex ] ) {
			value = input[ inputIndex ][ key ];
			if ( input[ inputIndex ].hasOwnProperty( key ) &amp;&amp; value !== undefined ) {
				// Clone objects
				if ( $.isPlainObject( value ) ) {
					target[ key ] = $.isPlainObject( target[ key ] ) ?
						$.widget.extend( {}, target[ key ], value ) :
						// Don't extend strings, arrays, etc. with objects
						$.widget.extend( {}, value );
				// Copy everything else by reference
				} else {
					target[ key ] = value;
				}
			}
		}
	}
	return target;
};

//bridge 是设计模式的一种,这里将对象转为插件调用
$.widget.bridge = function( name, object ) {
	var fullName = object.prototype.widgetFullName || name;
    //这里就是插件了
    //这部分的实现主要做了几个工作,也是制作一个优雅的插件的主要代码
    //1、初次实例化时将插件对象缓存在dom上,后续则可直接调用,避免在相同元素下widget的多实例化。简单的说,就是一个单例方法。
    //2、合并用户提供的默认设置选项options
    //3、可以通过调用插件时传递字符串来调用插件内的方法。如:$('#id').menu('hide') 实际就是实例插件并调用hide()方法。
    //4、同时限制外部调用“_”下划线的私有方法
	$.fn[ name ] = function( options ) {
		var isMethodCall = typeof options === "string",
			args = widget_slice.call( arguments, 1 ),
			returnValue = this;

		// allow multiple hashes to be passed on init.
        //可以简单认为是$.extend(true,options,args[0],...),args可以是一个参数或是数组
		options = !isMethodCall &amp;&amp; args.length ?
			$.widget.extend.apply( null, [ options ].concat(args) ) :
			options;
        //这里对字符串和对象分别作处理
		if ( isMethodCall ) {
			this.each(function() {
				var methodValue,
					instance = $.data( this, fullName );
	    //如果传递的是instance则将this返回。
				if ( options === "instance" ) {
					returnValue = instance;
					return false;
				}
				if ( !instance ) {
					return $.error( "cannot call methods on " + name + " prior to initialization; " +
						"attempted to call method '" + options + "'" );
				}
	    //这里对私有方法的调用做了限制,直接调用会抛出异常事件
				if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
					return $.error( "no such method '" + options + "' for " + name + " widget instance" );
				}
	    //这里是如果传递的是字符串,则调用字符串方法,并传递对应的参数.
	    //比如插件有个方法hide(a,b); 有2个参数:a,b
	    //则调用时$('#id').menu('hide',1,2);//1和2 分别就是参数a和b了。
				methodValue = instance[ options ].apply( instance, args );
				if ( methodValue !== instance &amp;&amp; methodValue !== undefined ) {
					returnValue = methodValue &amp;&amp; methodValue.jquery ?
						returnValue.pushStack( methodValue.get() ) :
						methodValue;
					return false;
				}
			});
		} else {
			this.each(function() {
				var instance = $.data( this, fullName );

				if ( instance ) {
					instance.option( options || {} );
	        //这里每次都调用init方法
					if ( instance._init ) {
						instance._init();
					}
				} else {
	        //缓存插件实例
					$.data( this, fullName, new object( options, this ) );
				}
			});
		}

		return returnValue;
	};
};

    //这里是真正的widget基类
$.Widget = function( /* options, element */ ) {};
$.Widget._childConstructors = [];

$.Widget.prototype = {
	widgetName: "widget",
    //用来决定事件的名称和插件提供的callbacks的关联。
    // 比如dialog有一个close的callback,当close的callback被执行的时候,一个dialogclose的事件被触发。
    // 事件的名称和事件的prefix+callback的名称。widgetEventPrefix 默认就是控件的名称,但是如果事件需要不同的名称也可以被重写。
    // 比如一个用户开始拖拽一个元素,我们不想使用draggablestart作为事件的名称,我们想使用dragstart,所以我们可以重写事件的prefix。
    // 如果callback的名称和事件的prefix相同,事件的名称将不会是prefix。
    // 它阻止像dragdrag一样的事件名称。
	widgetEventPrefix: "",
	defaultElement: "<div>",
    //属性会在创建模块时被覆盖
	options: {
		disabled: false,

		// callbacks
		create: null
	},
	_createWidget: function( options, element ) {
		element = $( element || this.defaultElement || this )[ 0 ];
		this.element = $( element );
		this.uuid = widget_uuid++;
		this.eventNamespace = "." + this.widgetName + this.uuid;
		this.options = $.widget.extend( {},
			this.options,
			this._getCreateOptions(),
			options );

		this.bindings = $();
		this.hoverable = $();
		this.focusable = $();

		if ( element !== this ) {
//	debugger
			$.data( element, this.widgetFullName, this );
			this._on( true, this.element, {
				remove: function( event ) {
					if ( event.target === element ) {
						this.destroy();
					}
				}
			});
			this.document = $( element.style ?
				// element within the document
				element.ownerDocument :
				// element is window or document
				element.document || element );
			this.window = $( this.document[0].defaultView || this.document[0].parentWindow );
		}

		this._create();
        //创建插件时,有个create的回调
		this._trigger( "create", null, this._getCreateEventData() );
		this._init();
	},
	_getCreateOptions: $.noop,
	_getCreateEventData: $.noop,
	_create: $.noop,
	_init: $.noop,
    //销毁模块:去除绑定事件、去除数据、去除样式、属性
	destroy: function() {
		this._destroy();
		// we can probably remove the unbind calls in 2.0
		// all event bindings should go through this._on()
		this.element
			.unbind( this.eventNamespace )
			.removeData( this.widgetFullName )
			// support: jquery <1.6.3
			// http://bugs.jquery.com/ticket/9413
			.removeData( $.camelCase( this.widgetFullName ) );
		this.widget()
			.unbind( this.eventNamespace )
			.removeAttr( "aria-disabled" )
			.removeClass(
				this.widgetFullName + "-disabled " +
				"ui-state-disabled" );

		// clean up events and states
		this.bindings.unbind( this.eventNamespace );
		this.hoverable.removeClass( "ui-state-hover" );
		this.focusable.removeClass( "ui-state-focus" );
	},
	_destroy: $.noop,

	widget: function() {
		return this.element;
	},
    //设置选项函数
	option: function( key, value ) {
		var options = key,
			parts,
			curOption,
			i;

		if ( arguments.length === 0 ) {
			// don't return a reference to the internal hash
	//返回一个新的对象,不是内部数据的引用
			return $.widget.extend( {}, this.options );
		}

		if ( typeof key === "string" ) {
			// handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
			options = {};
			parts = key.split( "." );
			key = parts.shift();
			if ( parts.length ) {
				curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
				for ( i = 0; i < parts.length - 1; i++ ) {
					curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
					curOption = curOption[ parts[ i ] ];
				}
				key = parts.pop();
				if ( arguments.length === 1 ) {
					return curOption[ key ] === undefined ? null : curOption[ key ];
				}
				curOption[ key ] = value;
			} else {
				if ( arguments.length === 1 ) {
					return this.options[ key ] === undefined ? null : this.options[ key ];
				}
				options[ key ] = value;
			}
		}

		this._setOptions( options );

		return this;
	},
	_setOptions: function( options ) {
		var key;

		for ( key in options ) {
			this._setOption( key, options[ key ] );
		}

		return this;
	},
	_setOption: function( key, value ) {
		this.options[ key ] = value;

		if ( key === "disabled" ) {
			this.widget()
				.toggleClass( this.widgetFullName + "-disabled", !!value );

			// If the widget is becoming disabled, then nothing is interactive
			if ( value ) {
				this.hoverable.removeClass( "ui-state-hover" );
				this.focusable.removeClass( "ui-state-focus" );
			}
		}

		return this;
	},

	enable: function() {
		return this._setOptions({ disabled: false });
	},
	disable: function() {
		return this._setOptions({ disabled: true });
	},

	_on: function( suppressDisabledCheck, element, handlers ) {
		var delegateElement,
			instance = this;

		// no suppressDisabledCheck flag, shuffle arguments
		if ( typeof suppressDisabledCheck !== "boolean" ) {
			handlers = element;
			element = suppressDisabledCheck;
			suppressDisabledCheck = false;
		}

		// no element argument, shuffle and use this.element
		if ( !handlers ) {
			handlers = element;
			element = this.element;
			delegateElement = this.widget();
		} else {
			// accept selectors, DOM elements
			element = delegateElement = $( element );
			this.bindings = this.bindings.add( element );
		}

		$.each( handlers, function( event, handler ) {
			function handlerProxy() {
				// allow widgets to customize the disabled handling
				// - disabled as an array instead of boolean
				// - disabled class as method for disabling individual parts
				if ( !suppressDisabledCheck &amp;&amp;
						( instance.options.disabled === true ||
							$( this ).hasClass( "ui-state-disabled" ) ) ) {
					return;
				}
				return ( typeof handler === "string" ? instance[ handler ] : handler )
					.apply( instance, arguments );
			}

			// copy the guid so direct unbinding works
			if ( typeof handler !== "string" ) {
				handlerProxy.guid = handler.guid =
					handler.guid || handlerProxy.guid || $.guid++;
			}

			var match = event.match( /^([\w:-]*)\s*(.*)$/ ),
				eventName = match[1] + instance.eventNamespace,
				selector = match[2];
			if ( selector ) {
				delegateElement.delegate( selector, eventName, handlerProxy );
			} else {
				element.bind( eventName, handlerProxy );
			}
		});
	},

	_off: function( element, eventName ) {
		eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) + this.eventNamespace;
		element.unbind( eventName ).undelegate( eventName );
	},

	_delay: function( handler, delay ) {
		function handlerProxy() {
			return ( typeof handler === "string" ? instance[ handler ] : handler )
				.apply( instance, arguments );
		}
		var instance = this;
		return setTimeout( handlerProxy, delay || 0 );
	},

	_hoverable: function( element ) {
		this.hoverable = this.hoverable.add( element );
		this._on( element, {
			mouseenter: function( event ) {
				$( event.currentTarget ).addClass( "ui-state-hover" );
			},
			mouseleave: function( event ) {
				$( event.currentTarget ).removeClass( "ui-state-hover" );
			}
		});
	},

	_focusable: function( element ) {
		this.focusable = this.focusable.add( element );
		this._on( element, {
			focusin: function( event ) {
				$( event.currentTarget ).addClass( "ui-state-focus" );
			},
			focusout: function( event ) {
				$( event.currentTarget ).removeClass( "ui-state-focus" );
			}
		});
	},

	_trigger: function( type, event, data ) {
		var prop, orig,
			callback = this.options[ type ];

		data = data || {};
		event = $.Event( event );
		event.type = ( type === this.widgetEventPrefix ?
			type :
			this.widgetEventPrefix + type ).toLowerCase();
		// the original event may come from any element
		// so we need to reset the target on the new event
		event.target = this.element[ 0 ];

		// copy original event properties over to the new event
		orig = event.originalEvent;
		if ( orig ) {
			for ( prop in orig ) {
				if ( !( prop in event ) ) {
					event[ prop ] = orig[ prop ];
				}
			}
		}

		this.element.trigger( event, data );
		return !( $.isFunction( callback ) &amp;&amp;
			callback.apply( this.element[0], [ event ].concat( data ) ) === false ||
			event.isDefaultPrevented() );
	}
};

$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
	$.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
		if ( typeof options === "string" ) {
			options = { effect: options };
		}
		var hasOptions,
			effectName = !options ?
				method :
				options === true || typeof options === "number" ?
					defaultEffect :
					options.effect || defaultEffect;
		options = options || {};
		if ( typeof options === "number" ) {
			options = { duration: options };
		}
		hasOptions = !$.isEmptyObject( options );
		options.complete = callback;
		if ( options.delay ) {
			element.delay( options.delay );
		}
		if ( hasOptions &amp;&amp; $.effects &amp;&amp; $.effects.effect[ effectName ] ) {
			element[ method ]( options );
		} else if ( effectName !== method &amp;&amp; element[ effectName ] ) {
			element[ effectName ]( options.duration, options.easing, callback );
		} else {
			element.queue(function( next ) {
				$( this )[ method ]();
				if ( callback ) {
					callback.call( element[ 0 ] );
				}
				next();
			});
		}
	};
});

return $.widget;

}));