JQuery对象操作支持链式法则源码分析

浏览数：24 / 时间：2015年06月09日

JQuery链式法则

　　何为链式法则？先给出非链式写法的例子

//非链式写法
$("div").css("width", 45px);
$("div").css("height", 45px);

　　再给出链式写法的例子

//链式写法
$("div").css("width", 45px).css("height", 45px);

　　JQuery实现元素的定位与操作，如果每一次操作，必须先获取一次对象，则会出现页面多次定位相同的DOM，页面脚本定位DOM可能会非常频繁，导致操作耗费时间，页面响应比较慢。

JQuery如何实现链式法则？

　　下面以css接口为例分析如何实现。

css接口实现

    css: function( name, value ) {
        return access( this, function( elem, name, value ) {
                。。。
        }, name, value, arguments.length > 1 );
    },

　　首先，css接口有两个入参，name 和 value，分别对应需要改变的css属性名和属性值。

　　其次，css接口实现，实际上是调用 access 函数， name和value会作为参数传递到 access函数中， access的返回值就是css接口的返回值。

　　这个返回值就是我们今天分析的目标，现在我们期望此返回值为调用css接口的JQuery对象。

　　再次， access接口的第一个参数，this，就是调用css接口的 JQuery对象。

　　最后， access接口的第二个参数，fn，为在css接口中定义的回调函数，此函数在access函数中被调动，并应用到调用css接口的JQuery对象上。

access接口实现

　　对于我们例子中设置单个css属性的情况，在access中执行到的关键代码如下：

　　首先，对于css设置单个属性值情况，对应//set one value

　　这个时候， chainable为真，即链式法则生效，

　　然后，将入参 fn 针对入参 elems 每个元素依次调用，

　　最后，判断chainable为真，则直接返回入参elems，对应css接口调用者JQuery对象。

// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it‘s a function
var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
     ....// Sets many values
    if ( jQuery.type( key ) === "object" ) {
        ......
    // Sets one value
    } else if ( value !== undefined ) {
        chainable = true;
        ......
        if ( fn ) {
            for ( ; i < length; i++ ) {
                fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
            }
        }
    }

    return chainable ?
        elems :

        // Gets
        bulk ?
            fn.call( elems ) :
            length ? fn( elems[0], key ) : emptyGet;
};

链式法则终止

　　如果对对象设置某个属性后，需要再获取设置后的值是否正确，则涉及到终止链式规则，因为此链式终止的接口，将会返回一个字符串，即属性值。

//链式终止，获取宽度
$("div").css("width", 45px).css("width");

　　对应access函数涉及代码：

　　对于css（“width”）

　　css调用传入参数 chainable为false

　　css调用传入参数 key 为 width字符串，不为null，即bulk为false

　　推导出， access 返回语句为 return length ? fn( elems[0], key ) : emptyGet;

　　同时， length为 css调用的JQuery对象的个数，大于0的，

　　则 access返回语句，进一步推到为 return fn( elems[0], key )

　　fn即为 css函数中，传入access函数的fn参数，此函数只作用于调用JQuery对象集合中的第一个元素， key为width，value未定义，即fn返回值为 jQuery.css( elem, name )

// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it‘s a function
var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
    var i = 0,
        length = elems.length,
        bulk = key == null; // 获取width，bulk为false
    
        ......
    return chainable ?
        elems :

        // Gets
        bulk ?
            fn.call( elems ) :
            length ? fn( elems[0], key ) : emptyGet;
};

　　css 接口分析（css（“width”））

　　value未定义，

　　access的入参fn，返回值为JQuery.css(elem, name)，为属性值

　　access的入参chainable 为false

    css: function( name, value ) {
        return access( this, function( elem, name, value ) { // value 为undefined
            。。。。return value !== undefined ?
                jQuery.style( elem, name, value ) :
                jQuery.css( elem, name ); // value 为undefined，获取属性的值，并返回
        }, name, value, arguments.length > 1 ); // arguments.length > 1 为假， 即chainable == false
    },