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


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;

}));

bootstrap中 $.fn.Aa.Constructor = Aa

在bootstrap js源码中,在插件最后经常看到

$.fn.Aa.Constructor = Aa

这样一句。

这里注意,Constructor 是大写的C,而不是我们常写的那个constructor。

这句的作用,是将插件类暴露给外界,这样可以修改和添加类里面的方法了。

如下面语句,初始化tooltip后,给Tooltip新增test方法。

$.fn.tooltip.Constructor.prototype.test = function(){
        console.log('test')
    }
    $('#example').tooltip('test')

在调用插件后,在控制台会输出test字符串。

再举一个栗子:

var tmp = $.fn.tooltip.Constructor.prototype.show;
$.fn.tooltip.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}

$('#selector').tooltip({ 
  placement: 'top', 
  callback: function() { 
    alert('hello') 
  } 
});

给show方法新增一个callback回调。

Backbone 介绍及学习资料索引

Backbone 是一款构建Javascript应用程序的优秀类库(lib)。网上大部分文章介绍时,都说是一款重量级MVC应用框架,但个人感觉,算是比较轻量的lib了。它比较简洁,A但同时提供了很大的灵活性,依赖underscore.js 提供了非常丰富的基础功能操作。

本文目的不在介绍backbone,而是根据这1周的学习,整理一部分国内外资料给初学者、入门者学习。

1、API文档及源码

Backbone托管在https://github.com/documentcloud/backbone/,可在这里下载最新的源码级example

英文API文档:http://backbonejs.org/

中文API文档:http://www.csser.com/tools/backbone/backbone.js.html   翻译时间比较久,部分API可能有变化,但总体还是和最新版差别不大,如果英文不好的童鞋可先看看这个中文版API,然后再对照英文最新版看看。

中文Underscore.js文档:http://www.css88.com/doc/underscore/

2、业内关于backbone的一些介绍及实例说明:

backbone.js 初探  介绍性不多,主要是以一个例子来说明backbone的整个处理流程。

Backbone.js入门学习笔记目录   作者很好的整理了一系列的入门学习资料,可以说是相当详细的,看完这系列后,应该说对backbone有一定的认识和理解了。

Backbone Tutorials E文的backbone学习资料,让你认识backbone是什么以及如何使用。也有几个实例,蛮不错的

Developing Backbone.js Applications   这篇文章长得都可以出书了,可以说是,从简入深,从入门到精通。

3、backbone实例、Demo

官方介绍的实例:http://backbonejs.org/#examples  非常有代表性

Todo是实例:https://github.com/documentcloud/backbone/  官方例子,肯定非常经典,虽然简单,但已包含了backbone的基本功能。

关于todos的源码解析:
http://www.the5fire.net/7-backbone-todos-1.html
http://www.xiaoqiang.org/javascript/backbone-js-todo.html
这2篇文章较好的对源码进行分析,通过从网站下载的todos源码,发现作者对源码进行了一些小修改,但 也不影响,总体还是没多大修改的。

 Build a Contacts Manager Using Backbone.js: Part 1 中文翻译了part1 ,part2没有翻译,但看起来也不难,代码多,看代码就基本能理解意思了。(本人E文太si)

类似聊天室的Demo
http://thomasdavis.github.com/2011/02/01/backbone-introduction.html

who is your friends  作者很粗糙的翻译了下,还没翻译完整,建议看E文原版。

Wine Cellar Tutorial    这个酒窖例子相当不错,非常完整,包含了服务器端。一共分了3篇文章来介绍,part2part3

非常难得的是,作者在后来又写了一篇文章,是对之前这个examle的改进:http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/

顺便说一下这个例子的php版用的是Slim做rest api,slim是个微型的rest api框架,也是非常好用的。

4、高级实例

高级实例是相当于一个在线可运行的app了,代码已经不局限于backbone。(在做一个web javascript应用时,可能会用到其他的一些lib)

http://bbclonemail.heroku.com/#inbox/sdf908f67hjf9sf
http://backbonetraining.net/resources
http://kroltech.com/2013/12/boilerplate-web-app-using-backbone-js-expressjs-node-js-mongodb/
http://kroltech.com/2013/03/building-a-web-app-using-backbone-js-and-require-js-part-1/

6、backbone文件组织及管理

这部分建议和淘宝前端玉伯写的模块加载器seajs一起使用,

seajs介绍:http://seajs.org/

在国外则比较流行requireJs

Backbone 利用Modules 来组织你的程序(require.js )

Web application with backbone.js and requirejs packages, requirejs optimizer  看打勾的那个评论。

7、源码分析

最后肯定少不了源码分析。[原创]Backbone源码分析-Backbone架构+流程图

最后不得不说,看是没用的,看只是让你了解和熟悉,一定要自己动手去写,才能切实感受到其中的内涵。