• jquery源码分析(二)——架构设计


    要学习一个库首先的理清它整体架构:

    1、jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)
    (21,94)                定义了一些变量和函数jQuery=function(){}
    (96,280)        给jQuery添加一些方法和属性,jQuery.fn=jQuery.prototype
    (285,347)        extend:        jQuery的一些继承方法        更容易进行后续的扩展                                                
    (349,817)        jQuery.extend(): 扩展一些工具方法
    (877,2856)        Sizzle:复杂选择器的实现
    (2880,3042) Callbacks:回调对象——》对函数的统一管理
    (3043,3183)        Deferred:延迟对象——》对异步的统一管理
    (3184,3295)        support:功能检测
    (3308,3652)        data():数据缓存
    (3653,3797)        queue():队列管理
    (3083,4299)        attr(),prop() val() addClass():属性操作
    (4300,5128)        on() trigger():事件的相关方法
    (5140,6057)        DOM操作:添加 删除 获取 包装 筛选
    (6058,6620)        css():针对样式的操作
    (6621,7854) 提交的数据和Ajax()的操作:ajax() load() getJSON()
    (7855,8584)        animate():运动的方法
    (8585,8792)        offset:位置与尺寸的方法 
    (8826)                对外提供jQuery对象接口:window.jQuery=window.$=jQuery;

    贴出一位大牛司徒正美对jquery的剖析:(最近也在读他框架设计一书,深深折服,这里推荐下)

    jQuery强在它专注于DOM操作的思路一开始就是对的,以后就是不断在兼容性,性能上进行改进。

    • ajax 数据交互
    • attributes 属性操作,共分className, 表单元素的value值,属性与特征四大块。
    • callbacks 函数列队
    • core 种子模块,命名空间,链式结构,domReady,多库共存。
    • css 样式操作,引入DE大神的两个伟大的hacks,基本上解决精确获取样式的问题。
    • data 数据存取。
    • deferred 异步列队(三合一版的函数列队)
    • dimensions 元素尺寸的设置读取(来自社区)。
    • effects 动画引擎
    • event 事件系统(基于DE大神的事件系统与社区的两个插件)
    • exports AMD系统(被RequireJS作者说服加几行代码支持其东东)
    • manipulation 节点的操作
    • offset 元素offsetTop(Left)的设置读取
    • queue 列队模块(deferred与data的合体)。
    • sizzle 从右到左进行解析的选择器引擎。
    • support 特征侦测
    • traversing 元素遍历。

    2、使用jQuery时,我们经常会在原生DOM对象和jQuery对象之间产生困扰,为什么DOM对象没有这个方法,jQuery实例对象可以轻松实现某些功能。接下来看看jQuery实例对象是怎么创建。

    (function( window, undefined ) {
        var jQuery = (function() {
           // 构建jQuery对象
           var jQuery = function( selector, context ) {
               return new jQuery.fn.init( selector, context, rootjQuery );
           }
       
           // jQuery对象原型
           jQuery.fn = jQuery.prototype = {
               constructor: jQuery,
        } init = jQuery.fn.init =
    function( selector, context, rootjQuery ) { // selector有以下7种分支情况: // DOM元素 // body(优化) // 字符串:HTML标签、HTML字符串、#id、选择器表达式 // 函数(作为ready回调函数) // 最后返回伪数组 } init.prototype = jQuery.fn;// 合并内容到第一个参数中,后续大部分功能都通过该函数扩展 // 通过jQuery.fn.extend扩展的函数,大部分都会调用通过jQuery.extend扩展的同名函数 jQuery.extend = jQuery.fn.extend = function() {}; // 在jQuery上扩展静态方法 jQuery.extend({ // ready bindReady // isPlainObject isEmptyObject // parseJSON parseXML // globalEval // each makeArray inArray merge grep map // proxy // access // uaMatch // sub // browser }); // 到这里,jQuery对象构造完成,后边的代码都是对jQuery或jQuery对象的扩展 return jQuery; })(); window.jQuery = window.$ = jQuery; })(window);

    从这段代码可以看出:

    (1)、 jQuery对象不是通过 new jQuery 创建的,而是通过 new jQuery.fn.init 创建的。

    (2)、jQuery对象就是jQuery.fn.init对象( new jQuery.fn.init( selector, context, rootjQuery );)

    (3)、 jQuery.fn指向了jquery的原型(实际上是用属性名fn代替prototype,为后面编程使用方便,要不然多次使用prototype会很绕):

    jquery 原型定义了jquery对象初始化init的一系列方法。

    (4)、接下来,定义在jQuery.fn.init,后面又加上这句init.prototype = jQuery.fn :即jQuery.fn.init的原型也指向了jQuery的原型,有点绕哈,合并下:

           jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype,实例说明一下,

    这说明了我们使用new jQuery.fn.init()创建的实例对象的原型就是jQuery的原型,这样你就可以在jquery实例对象就可以直接调用jQuery这个类原型上挂载的方法了。

    (5)、检验一个库的好坏是看这个库的扩展性和兼容性。jQuery.extend = jQuery.fn.extend = function() {}是jQuery对外提供扩展的方法

    jQuery之所以如此强大,就是它能很容易实现类方法(虽然javascript没有类的概念,但这里还是用类来理解下,希望不要误解到读者)和实例方法扩展。

     

    下面分析下jQuery实例对象这么创建的。

    init = jQuery.fn.init = function( selector, context ) {
            var match, elem;
    
            // HANDLE: $(""), $(null), $(undefined), $(false)
            if ( !selector ) {
                return this;
            }
    
            // Handle HTML strings
            if ( typeof selector === "string" ) {
                if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
                    // Assume that strings that start and end with <> are HTML and skip the regex check
                    match = [ null, selector, null ];
    
                } else {
                    match = rquickExpr.exec( selector );
                }
    
                // Match html or make sure no context is specified for #id
                if ( match && (match[1] || !context) ) {
    
                    // HANDLE: $(html) -> $(array)
                    if ( match[1] ) {
                        context = context instanceof jQuery ? context[0] : context;
    
                        // scripts is true for back-compat
                        // Intentionally let the error be thrown if parseHTML is not present
                        jQuery.merge( this, jQuery.parseHTML(
                            match[1],
                            context && context.nodeType ? context.ownerDocument || context : document,
                            true
                        ) );
    
                        // HANDLE: $(html, props)
                        if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                            for ( match in context ) {
                                // Properties of context are called as methods if possible
                                if ( jQuery.isFunction( this[ match ] ) ) {
                                    this[ match ]( context[ match ] );
    
                                // ...and otherwise set as attributes
                                } else {
                                    this.attr( match, context[ match ] );
                                }
                            }
                        }
    
                        return this;
    
                    // HANDLE: $(#id)
                    } else {
                        elem = document.getElementById( match[2] );
    
                        // Check parentNode to catch when Blackberry 4.6 returns
                        // nodes that are no longer in the document #6963
                        if ( elem && elem.parentNode ) {
                            // Handle the case where IE and Opera return items
                            // by name instead of ID
                            if ( elem.id !== match[2] ) {
                                return rootjQuery.find( selector );
                            }
    
                            // Otherwise, we inject the element directly into the jQuery object
                            this.length = 1;
                            this[0] = elem;
                        }
    
                        this.context = document;
                        this.selector = selector;
                        return this;
                    }
    
                // HANDLE: $(expr, $(...))
                } else if ( !context || context.jquery ) {
                    return ( context || rootjQuery ).find( selector );
    
                // HANDLE: $(expr, context)
                // (which is just equivalent to: $(context).find(expr)
                } else {
                    return this.constructor( context ).find( selector );
                }
    
            // HANDLE: $(DOMElement)
            } else if ( selector.nodeType ) {
                this.context = this[0] = selector;
                this.length = 1;
                return this;
    
            // HANDLE: $(function)
            // Shortcut for document ready
            } else if ( jQuery.isFunction( selector ) ) {
                return typeof rootjQuery.ready !== "undefined" ?
                    rootjQuery.ready( selector ) :
                    // Execute immediately if ready is not present
                    selector( jQuery );
            }
    
            if ( selector.selector !== undefined ) {
                this.selector = selector.selector;
                this.context = selector.context;
            }
    
            return jQuery.makeArray( selector, this );
        };

     分析上面代码:

    1、jQuery.fn.init的功能是对传进来的selector参数进行分析,进行各种不同的处理,然后创建jQuery实例对象。

    2、arguments:选择器和使用的上下文环境(比较生涩:举个例子,比如在地图上找深圳这个地方,选择器好比深圳这个地名,熟悉的人可能一下子用经纬度定位了,东经­113°46'~114°37',北纬22°27'~22°52'(参数context都不用传了^^),对歪国仁来说,可能第一眼的先定位到我们的公鸡版图:也就是context:china,这样搜索速度就加快了。对国人(闭眼也能找着祖国哈^^)来说直接找广东—靠海—靠香港:也就是context:广东)。

    3、接下来看看怎么分析selector参数类型以及相应的做了什么处理。

    问题来了,看到这个正则这么长有没有要晕,要吐的感觉,

    rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,这里写的什么。呃这个暂时不解释,后面专门奉上一个正则表达专题供大家解读…………。

    (1)  $(""), $(null), $(undefined), $(false);这几种情况直接返回 this,这里this是什么呢? 注意不是JQuery本身,而是jQuery.fn.init

    (2)、字符串类型

    a:HTML标签形式的——$(<>):通过document.createElement 创建节点。类似 $("<div></div>")、$("<div>aaa</div><div>aaa</div>") 两种情况;

    而其他情况如:$(“</div>111”)、$("#id")、$(".class")、$("div")、$("#id .class div"),其中requickExpr匹配的是$(“</div>111”)、$("#id")。如果传入的是$(“</div>111”),则match=["</div>111","</div>",null];如果传入的是$("#id"),则match=["#id",null,“id”]。

    b:HTML字符串——$(html) -> $(array):创建DOM并扩充到jQuery对象

    c:#id——$(#id):直接通过document.getElementById获取dom节点。

    d:选择器表达式——$(expr, $(...)):

    (3)、DOMElement:直接返回将该对象,只是修改了context属性和length属性。

    (4)、function:用过jquery基本上都会初始化代码写到 $(function(){……})里,就是DOMLoaded 加载完毕之后回调执行改匿名函数。

    (5)、slector.slector = undefined 这个眼戳暂时没看懂,有谁看懂提下谢谢 。

    上面涉及到的函数这里先提前脑补一下:$.parseHTML 、$.merge、$.isPlainObject(

    $.parseHTML :将字符串转换为存储DOM节点的数组 。第一个参数为传入的字符串,第二个为指定的根节点,第三个是boolean值 (“<script></script>”是否可以转化为<script>标签),默认为false,不转换。

    $.merge:合并两个数组,在jQuery内部不仅可以合并数组,也可以合并类数组。

    $.isPlainObject():判断传入的参数是否是由 {}或new Object 创建的对象。

     3、下面看看jQuery原型挂载了什么?

    jQuery.fn = jQuery.prototype = {
        // The current version of jQuery being used
        jquery: version,
    
        constructor: jQuery,
    
        selector: "",
    
        length: 0,
    
        toArray: function() {
            return slice.call( this );
        },
    
        get: function( num ) {
            return num != null ?
                ( num < 0 ? this[ num + this.length ] : this[ num ] ) :
    
                slice.call( this );
        },
    
        pushStack: function( elems ) {
    
            var ret = jQuery.merge( this.constructor(), elems );
    
            ret.prevObject = this;
            ret.context = this.context;
    
            return ret;
        },
    
        each: function( callback, args ) {
            return jQuery.each( this, callback, args );
        },
    
        map: function( callback ) {
            return this.pushStack( jQuery.map(this, function( elem, i ) {
                return callback.call( elem, i, elem );
            }));
        },
    
        slice: function() {
            return this.pushStack( slice.apply( this, arguments ) );
        },
    
        first: function() {
            return this.eq( 0 );
        },
    
        last: function() {
            return this.eq( -1 );
        },
    
        eq: function( i ) {
            var len = this.length,
                j = +i + ( i < 0 ? len : 0 );
            return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
        },
    
        end: function() {
            return this.prevObject || this.constructor(null);
        },
    
        push: push,
        sort: deletedIds.sort,
        splice: deletedIds.splice
    };

    1、先来看这三个属性:push、sort、splice 都是数组 Array()原型上挂载的方法。仅供jQuery内部使用(私有方法),与jQuery外部工具方法(对外可使用)不同

    2、first、last、eq这几个方法都是都是又来获取数组某个元素的。

    3、重点来了:pushStack在jQuery中使用频率特别高,它是干嘛的?只看这段代码。只能知道 它调用了 jQuery.merge,合并了类数组。

    jQuery.extend = jQuery.fn.extend = function() {
        var src, copyIsArray, copy, name, options, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false;
    
        if ( typeof target === "boolean" ) {
            deep = target;
    
            target = arguments[ i ] || {};
            i++;
        }
    
        if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
            target = {};
        }
    
        if ( i === length ) {
            target = this;
            i--;
        }
    
        for ( ; i < length; i++ ) {
            if ( (options = arguments[ i ]) != null ) {
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];
    
                    if ( target === copy ) {
                        continue;
                    }
    
                    if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                        if ( copyIsArray ) {
                            copyIsArray = false;
                            clone = src && jQuery.isArray(src) ? src : [];
    
                        } else {
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }
    
                        target[ name ] = jQuery.extend( deep, clone, copy );
    
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }
        return target;
    };

    1、功能:jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。jQuery.fn.extend(object);给jQuery实例对象添加方法。

    2、结合$.extend使用方法来分析:

    (1)、var newSrc=$.extend({},src1,src2,src3...)
    (2)、var newSrc=$.extend(false,{},src1,src2,src3...)//嵌套子对象不拷贝
    (3)、var newSrc=$.extend(true,{},src1,src2,src3...)

    从arguments可以看出,extend是为了合并两个或更多对象的属性到第一个对象中。

    3、再来分析代码:

          看第一个逻辑意思是:如果第一个参数是布尔型的话,要实现扩展的对象target就是第二个参数,接下来再判断此时target是否对象或函数,都不是则默认扩展到{}。

    接下来两个for循环,第一个循环遍历后续所有对象,第二个循环 实现将每个对象属性的copy到第一个对象。看似很简单,问题来了,target的属性与需要copy对象属性一样时,怎么处理?是直接覆盖/重写,还是合并?这就涉及到了浅拷贝与深拷贝,那浅拷贝与深拷贝又是什么。

    (1)、js对象浅拷贝简单的赋值就是浅拷贝。因为对象和数组在赋值的时候都是引用传递。赋值的时候只是传递一个指针。也就是说遇到同名属性时直接覆盖/重写。

    (2)、因为对象相对较为复杂,所以我们先来看对数组的深拷贝的问题

    来看个例子,说明一下

    extend(boolean,dest,src1,src2,src3...)

     第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

    var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },
    { last: "Resig", location: {state: "MA",county:"China"} } );

    我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:

    result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}} ////浅拷贝,对copy对象同名属性值类型为数组或对象的属性进行合并

    也就是说它会将src中的嵌套子对象也进行合并,

    而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

    var result=$.extend( false, {},  
    { name: "John", location:{city: "Boston",county:"USA"} },
    { last: "Resig", location: {state: "MA",county:"China"} } );

         那么合并后的结果就是:

      result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}//浅拷贝,对copy对象同名属性值类型为数组或对象的属性直接覆盖/重写。

    来看下深拷贝和前拷贝怎么实现的:

    if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                        if ( copyIsArray ) {
                            copyIsArray = false;
                            clone = src && jQuery.isArray(src) ? src : [];
    
                        } else {
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }
    
                        target[ name ] = jQuery.extend( deep, clone, copy );
    
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }

    (1)、浅拷贝:target[ name ] = copy;直接覆盖和容易理解。

    (2)、深拷贝稍显复杂,首先判断是数组还是对象,在对嵌套子对象递归调用$.extend方法。

    4、jQuery多库共存处理

     $符号已经被很多库作为作为命名空间,因此不免会与别的库框架或者插件相冲突。

      jQuery引入noConflict函数可以将变量$的控制权让给第一个实现它的那个库,确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。下面来看看代码如何处理的?

    var
    	// Map over jQuery in case of overwrite
    	_jQuery = window.jQuery,//外部库重写了jQuery,先缓存
    
    	// Map over the $ in case of overwrite
    	_$ = window.$;//外部库重写了$,先缓存起来
    
    jQuery.noConflict = function( deep ) {
    	if ( window.$ === jQuery ) {//把全局$的控制权交出去,此处,jQuery为局部变量
    		window.$ = _$;
    	}
    
    	if ( deep && window.jQuery === jQuery ) {//把全局jQuery的控制权也交出去,此处局部jQuery与全局jQuery做对比
    		window.jQuery = _jQuery;
    	}
    
    	return jQuery;
    };
    

      如果我们需要同时使用jQuery和其他JavaScript库,我们可以使用 $.noConflict()把$的控制权交给其他库。旧引用的$ 被保存在jQuery的初始化; noConflict() 简单的恢复它们。
        通过类似swap交换的概念,先把之前的存在的命名空间给缓存起来_$,_jQuery,通过对比当前的命名空间达到交换的目的,首先,我们先判断下当前的的$空间是不是被jQuery接管了,如果是则让出控制权给之前的_$引用的库,如果传入deep为true的话等于是把jQuery的控制权也让出去了

    那么具体何时调用才不会引起库命名空间冲突问题呢:这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库之前使用。

       

  • 相关阅读:
    【XSY2990】树 组合数学 容斥
    【LOJ2542】【PKUWC 2018】随机游走 min-max容斥 树上高斯消元
    【51NOD1847】奇怪的数学题 min_25筛
    【51NOD1965】奇怪的式子 min_25筛
    蒟蒻的学习计划
    【XSY2962】作业 数学
    蒟蒻的做题记录
    【LOJ2586】【APIO2018】选圆圈 CDQ分治 扫描线 平衡树
    【APIO2016】【UOJ205】【LOJ2568】烟花表演 可合并堆
    【BZOJ2876】【Noi2012】骑行川藏 拉格朗日乘法
  • 原文地址:https://www.cnblogs.com/hoboStage/p/4946668.html
Copyright © 2020-2023  润新知