read jquery.js

抽空读了读jquery代码，确实颇有收获。首先放上整体代码结构：

(function (window, undefined) {

var document = window.document;

var jQuery = (function() {

var jQuery =  function( selector, context ) {

return new jQuery.fn.init( selector, context, rootjQuery );

};

jQuery.fn = jQuery.prototype = {

constructor: jQuery,

init: function (selector, context, rootjQuery) {

// ...

if (selector.nodeType) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

// ...

},

// ...

};

jQuery.fn.init.prototype = jQuery.fn;

jQuery.extend = jQuery.fn.extend = function() {

     // ...

};

jQuery.extend({

noConflict:function(){},

Ready:function(){},

// ...

});

// ...

return jQuery;

})();

jQuery.extend({

});

// ...

window.jQuery = window.$ = jQuery

})(window);

---

首先为何会有两层(function…)()自执行函数的疑问我觉得应该解释为为了更好的模块化开发，在github中有模块化的源码

---

看过《javasctipt权威指南》应该能更好的理解new语法到底为何物，也就自然能理解为何在jquery中new $()与执行$()结果一模一样

---

重点：

jQuery.prototype

=== jQuery.fn

=== jQuery.fn.init.prototype

逻辑上此处有矛盾，fn与fn.init.prototype形成了循环包含，但这也正体现了js为值对象语言的特征，一切皆为值拷贝（jQuery.fn.init.prototype = jQuery.fn）

PS：$.extend使用深度copy突破了值拷贝障碍，下节分析，目前$.extend的可读性并不好，充斥着魔鬼数字。

---

jquery.fn的成员：

• init - 初始化
• constructor - 手动指定构造函数，因为默认是 jQuery.fn.init
• length - 让这个对象更接近一个原生的数组
• size - 返回 length
• toArray - 通过 Array.prototype slice 实现生成数组
• get - 即 this[ num ] 参数索引的处理。
• pushStack - 加入一个元素
• ready – DOM文档加载后执行
• end - 返回保存的 prevObject 对象
• each - 循环执行

---

平常的 $("#id") 就是  new jQuery.fn.init("#id");

init函数中，返回值this附加上context、length等参数后再附带上jQuery.fn.init.prototype（即jQuery.fn）返回给调用者

以下为init函数注释代码：

init: function( selector, context, rootjQuery ) {

     // 参数:  selector  选择器

     //        context  上下文

     //        rootjQuery 父节点

 

     // 处理 $("")、 $(null) 和 $(undefined)

     if ( !selector ) {

return this;

     }

 

     // 处理 $(DOMElement)

     if ( selector.nodeType ) {

         // 直接扔数组中， 就搞定了。

     this.context = this[0] = selector;

     this.length = 1;

     return this;

     }

 

     // 处理 $("body")   body 元素只存在一次，单独找它

      if ( selector === "body" && !context && document.body ) {

            // 同样扔数组中， 顺便把 selector 更新更新。

        this.context = document;

        this[0] = document.body;

        this.selector = "body";

        this.length = 1;

       return this;

     }

 

     // 处理 $(HTML 代码 或者是 css 选择器) 

     if ( typeof selector === "string" ) {

        

match = quickExpr.exec( selector );

// 检查是否正确匹配

if ( match && (match[1] || !context) ) {

// 处理: $(html) -> $(array)

if ( match[1] ) {

      

// 获取正文，默认 document

context = context instanceof jQuery ? context[0] : context;

doc = (context ? context.ownerDocument || context : document);

 

// 如果传入简单的  "<标签>"，   ( /^<(\w+)\s*\/?>(?:<\/\1>)?$/)

ret = rsingleTag.exec( selector );

 

               // 返回 createElement("tag")

               return jQuery.merge( this, selector );

 

               // 处理: $("#id")

               } else {

                    elem = document.getElementById( match[2] );

                    // 因为有的浏览器 getElementById 不只返回 id匹配的，所以做检查。

                    return this;

                }

 

            // 处理 $("标签")

            } else if ( !context && !rnonword.test( selector ) ) {

                this.selector = selector;

                this.context = document;

                selector = document.getElementsByTagName( selector );

                return jQuery.merge( this, selector );

            //处理: $(选择器, $(...))

            } else if ( !context || context.jquery ) {

                return (context || rootjQuery).find( selector );

            // 处理: $(选择器,  上下文)

            // (相当于: $(上下文).find(选择器)

            } else {

                return this.constructor( context ).find( selector );

            }

     } else if ( jQuery.isFunction( selector ) ) {

       //如果是函数，则执行$(document).ready,这样$(document).ready(func)简为$(func)

       return rootjQuery.ready( selector );

     }

  

   // 略。

 

   // 如果传入的是一个 Dom列表 ( getElementsByTagName 结果 ) 则转为 jQuery 数组。

   return jQuery.makeArray( selector, this );

}

---

$.extend({
    mm: function () { alert('mm'); }
});

$.mm();

$.fn.mm = function () {
    alert(this.text());
}

$.fn.extend({
    mm: function () { alert(this.text()); }
});

$('h2').mm();

2与3方案一模一样，1与3方案为同一个extend函数，1方案执行宿主会被extend自动判断为不带context的$对象

var opts = $.extend({
val: false
}, options);

返回俩参数合并后的对象，后者覆盖前者 // 可见extend函数有多复杂

贴一下$.extend函数代码：

jQuery.extend = jQuery.fn.extend = function() {

var target = arguments[0] || {}, // 第一个参数是目标

i = 1, length = arguments.length, deep = false, options;

if (target.constructor == Boolean) {// 第一个参数是bool型的

deep = target;// 深度copy

target = arguments[1] || {};// target指向第二个参数

i = 2;

}

// target 是string 型的或？

if (typeof target != "object" && typeof target != "function")

target = {};

if (length == i) {// 只有一个参数？或deep copy 时，两个参数

target = this;// 目标为this

--i;

}

for (;i < length; i++)

if ((options = arguments[i]) != null)

for (var name in options) {

var src = target[name], copy = options[name];

if (target === copy)// 防止死循环

continue;

// 深度copy处理，最深为元素

if (deep && copy && typeof copy == "object" && !copy.nodeType)

target[name] = jQuery.extend(deep, src

|| (copy.length != null ? [] : {}), copy);

else if (copy !== undefined)// 直接copy

target[name] = copy;

}

return target;

};

extend不但支持深度clone，还能支持多个参数的对象clone到一个指定对象，而不是jquery中。