jQuery简化结构
一 简化结构解析
1.结构代码
(function(w){
function jQuery(){
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
};
var init = jQuery.fn.init = function(){
};
init.prototype = jQuery.fn;
w.jQuery = w.$ = jQuery;
}(window));
2.代码解析
- 在时候用jQuery时,主要分为调用jquery对象的方法和jquery的静态方法。
- 调用对象方法,$(‘span’).func();
- 调用静态方法 $.func();
从jQuery源码中可以发现如上代码块的逻辑,jquery的生成对象实际上是jQuery.fn.init方法创建。如代码所示:
function jQuery(){ return new jQuery.fn.init(); } var init = jQuery.fn.init = function(){ //实际的构造函数 };
将init的原型指向jQuery.fn,而jQuery.fn = jQuery.prototype,这样在外部想要对jQuery扩展方法时,方法添加在jQuery的prototype上,而init.prototype也是指向jQuery的原型,那么使用 new init() 创建的实例就可以使用在外面扩展的方法。
init.prototype = jQuery.fn;
将jQuery赋值给window.jQuery和window. ,这样在外部就能使用jQuery和 , 这 样 在 外 部 就 能 使 用 j Q u e r y 和 调动jquery的相关方法。
二 对象初始化解析
jquery方法创建的实例对象是一个伪数组,伪数组理解为一个对象,其中包含有length属性,对应的0-length属性可存放对应的值。
伪数组 var obj = { length:3, '0':'Tome', '1':'janes', '2':'another' };
而对html中标签jquery实例化的对象中,包含了DOM对象和length属性。那么具体的实例化过程是怎么样呢?
在入口函数传入的参数中,$(‘selector’),针对不同的selector需要进行判断,进行不同的处理:
- 如果selector为null,undefine,0,NaN之类的,那么直接返回this(创建的实例变量)。
- 如果selector为字符串,再进一步进行判断
- 如果是HTML片段,那么根据片段创建DOM,然后添加到this实例对象上,返回this。
- 如果是选择器,那么根据选择器获得DOM,然后添加到this上。
- 如果是伪数组或者数组对象,那么将他们的每一项分别添加实例身上。
- 如果参数时jQuery对象,是怎么解析的? jQuery对象也是一个伪数组,按照伪数组的形式进行解析即可。
- 剩余的其他参数,直接添加在this上,同时设定length的值。
代码解析
1.字符串的处理.
判断是html片段之后,新建div,然后设置innerHTML,再讲div的子节点全部添加到this。if (typeof selector === 'string') { //字符串 if(jQuery.isHTML(selector)){ var div = document.createElement(('div')); div.innerHTML = selector; //利用apply将div的子节点全部添加到this中。 [].push.apply(this,div.childNodes); }else { var dom = docuemnt.querySelectorAll(selector); [].push.apply(this,dom); } }
2.数组和伪数组的处理
else if (jQuery.isLinkArr(selector)){ // 将selector 直接分割成一个数组. //为了兼容ie8下apply不能直接从自定义的伪数组中平铺属性值。 [].push.apply(this,[].slice.call(selector)); }
3.对函数的处理在后面的笔记中讲述。