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
},