链式调用和回溯
链式调用：$('#div').eq(0).show().end().eq(1).hide();
$('#div').eq(0).show()之后使用end()回溯到上一步选中的jQuery对象$('#div')
内部实现：使用了prevObject属性
jQuery.fn = jQuery.prototype = {
pushStack: function(elems){
var ret = jQuery.merge(this.constructor(), elems);
//jQuery.merge将第二个参数加到第一个参数上，ret返回的是一个jQuery对象
ret.prevObject = this;
ret.context = this.context;
return ret;
},
end: function(){
return this.prevObject || this.constructor(null);
},
eq: function(i){
var len = this.length,
j = +i + (i<0?len:0);
return this.pushStack(j>=0 && j<len ? [this[j]] : []);
}
};
总结：
1.end()返回prevObject属性，记录了上一步操作的jQuery对象集合；
2.prevObject属性由pushStack()方法生成，将DOM元素集合加入到jQuery内部管理中的一个栈中
通过改变jQuery对象的prevObejct属性来跟踪链式调用中前一个方法返回的DOM结果集合。
3.当调用end()方法后，内部返回当前jQuery对象的prevObject属性，完成回溯。
jQuery变量冲突处理
var _jQuery = window.jQuery,
_$ = window.$;
//设置别名，通过两个私有变量映射window环境下的jQuery和$两个对象，以防止变量被强制覆盖
//noConfilict让出$的控制权，这样其他脚本就可以使用它了
jQuery.noConfilict = function(deep) {
//deep：boolean，指是否允许彻底将jQuery变量还原(移交$引用的同时是否移交jQuery对象本身)
//判断全局变量$是否等于jQuery
if(window.$ === jQuery) {
//如果等于则重新还原全局变量$为jQuery运行之前的变量(存储在内部变量_$中)
window.$ = _$; //此时jQuery别名$失效
}
//开启深度冲突处理并且全局变量jQuery等于内部jQuery，则把全局jQuery还原成之前的状况
if(deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
}
return jQuery; //返回jQuery库内部构造函数:new jQuery.fn.init();
};
jQuery.noConflict流程
jQuery开始加载；
存储全局变量，_jQuery = Window.jQuery; _$ = window.$;
调用静态方法noConflict();判断$和jQuery是否被jQuery库修改；
未被修改：返回jQuery库内部的jQuery变量(jQuery构造函数)
被修改：1.还原全局变量$为jQuery库加载之前的状态
2.如果deep为真,再还原jQuery为jQuery库加载前的状态
3.返回jQuery库内部的jQuery变量(jQuery构造函数)
var query = jQuery.noConflict(true);
(function($){
//do something
})(jQuery);
console.log($); //让出jQuery|$的控制权不代表不能使用jQuery和$
网友评论