jQuery-01简化结构

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.代码解析

1. 在时候用jQuery时，主要分为调用jquery对象的方法和jquery的静态方法。
   
   • 调用对象方法，$(‘span’).func();
   • 调用静态方法 $.func();

2. 从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;

3. 将jQuery赋值给window.jQuery和window. ,这样在外部就能使用jQuery和 , 这 样 在 外 部 就 能 使 用 j Q u e r y 和 调动jquery的相关方法。

二 对象初始化解析

1. jquery方法创建的实例对象是一个伪数组，伪数组理解为一个对象，其中包含有length属性，对应的0-length属性可存放对应的值。

   伪数组
   var obj = {
       length:3,
       '0':'Tome',
       '1':'janes',
       '2':'another'
   };

   而对html中标签jquery实例化的对象中，包含了DOM对象和length属性。那么具体的实例化过程是怎么样呢？

2. 在入口函数传入的参数中，$(‘selector’)，针对不同的selector需要进行判断，进行不同的处理：

   • 如果selector为null,undefine,0,NaN之类的，那么直接返回this(创建的实例变量)。
   • 如果selector为字符串，再进一步进行判断
     
     • 如果是HTML片段，那么根据片段创建DOM，然后添加到this实例对象上，返回this。
     • 如果是选择器，那么根据选择器获得DOM，然后添加到this上。
   • 如果是伪数组或者数组对象，那么将他们的每一项分别添加实例身上。
     
     • 如果参数时jQuery对象，是怎么解析的？ jQuery对象也是一个伪数组，按照伪数组的形式进行解析即可。
   • 剩余的其他参数，直接添加在this上，同时设定length的值。

3. 代码解析
   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.对函数的处理在后面的笔记中讲述。