jQuery核心结构简单分析

  • 以下分析均采取沙箱模式
(function (window) {
    //为了提高性能把需要的变量统一提前声明
    var arr = [],
        push = arr.push;

    //为区别jQuery,此文章以iQuery来定义封装的函数
    function iQuery( selector ) {
        return new iQuery.fn.init( selector );
    }

    //为了方便把iQuery的原型定义为fn,并为原型添加两个方法
    iQuery.fn = iQuery.prototype = function () {
        constructor: iQuery,
        each: function ( callback ) {
            return iQuery.each( this, callback );
        },
        map: function ( callback ) {
            return iQuery.map( this, callback );
        },
            
    }

    //把所有的方法都挂载到iQuery上
    iQuery.select = function (selector) {
        return slice.apply( document.querySelectorAll( selector ) );
    };
    iQuery.each = function ( arr, callBack ) {
        for ( var i = 0; i < arr.length; i++ ) {
            if ( arr.length >= 0 ) {
                if ( callBack.call( arr[i], i, arr[i] ) == false ) break;
            } else {
                    for ( var k in arr ) {
                         if ( callBack.call( arr[k], k, arr[k] ) == false ) break;
                    }
                }
        }
    };
    iQuery.map = function ( arr, callback ) {
        var rest = [], tmp,
                i;
        if ( arr.length >= 0 ) {
            for ( i = 0; i < arr.length; i++ ) {
                tmp = callback( arr[ i ], i );
                if ( tmp != null )  {
                    rest.push( tmp );
                }
            }
        } else {
            for ( i in arr ) {
                tmp = callback( arr[ i ], i );
                if ( tmp != null )  {
                rest.push( tmp );
                }
            }
        }
        return rest;
    };
    
    //init为构造函数,而且jQuery的巧妙之处就是iQuery和init公用一个原型,并且init是iQuery的一个成员
    var init = iQuery.fn,init = function ( selector  ) {
        push.apply( this, iQuery.select( selector ) );
    }
    init.prototype = iQuery.fn;
})(window)
posted @ 2017-01-11 11:31  回向  阅读(155)  评论(0)    收藏  举报