JQuery的结构-Dive into jQuery

原文参考：http://www.splashnology.com/article/the-structure-of-jquery-dive-into-source-code/2517/

Jquery很流行了，那么它到底是怎么构造的，记得一位老师说过“结构是宝，一懂百了；结构不懂，一窍不通”。这句话深深地在我脑海里。。。。。

总体结构

(function( window, undefined ) {
var document = window.document,
    navigator = window.navigator,
    location = window.location;
 
    [...] // 主要的代码部分
 
window.jQuery = window.$ = jQuery;
})(window);

核心

var jQuery = (function () {
    var jQuery = function ( selector, context ) {
         return new jQuery.fn.init( selector, context, rootjQuery );
    };
    // jQuery的映射，防止被重写
    _jQuery = window.jQuery,
 
    // $的映射，防止被重写
    _$ = window.$,
 
    rootjQuery,
 
    [...]
 
    rootjQuery = jQuery(document);
 
    [...]
 
    return jQuery;
})();

这里，可以看出jQuery的构造函数，要了解如何防止重写，需要进一步的查看jQuery.noConflict ()，rootjQuery一个参考document的jQuery对象，对于rootjQuery没有很明白。

接下来是一系列的正则表达式，在浏览器检测，解析Json,和jQuery.trim中需要用到。现代的浏览器支持字符串的.trim方法，还有数组的indexof方法，jQuery进行了本地的实现。

trim = String.prototype.trim,
indexOf = Array.prototype.indexOf,

对象的构建

进入到jQuery最“神圣”的地方，这一块是对那些没有使用过的人来说最难的地方。所以我们需要保持清醒的头脑，jQuery原型的神奇之处也就藏在这里。你已经在核心中见过它了：

var jQuery = function( selector, context ) {
   //jQuery对象实际上是init构造器的‘加强’
    return new jQuery.fn.init( selector, context, rootjQuery );
},

这其实意味着，当你调用jQuery函数的时候，“jQuery.fn.init”被创建并且返回。这就是JavaScript函数式编程的体现。在下面的代码中，我们可以看到：

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        [...]
    }
    [...]
}
 
//在以后的实例中把 jQuery的原型给给init函数
jQuery.fn.init.prototype = jQuery.fn;

到这里，我们知道了jQuery.fn就是jQuery.prototype。这会帮助我们理清下面的东西。

同时，jQuery.fn.init.prototype也指向了jQuery.prototype（第10行代码的作用）, jQuery.fn.init.prototype 构造器指向了jQuery（第10行代码使得使得jQuery.fn.init.prototype指向jQuery.fn, 而第2行中jQuery.fn的构造器是jQuery）.

这就会得到一个有趣的结果：

$(document) instanceof jQuery; // true
$(document) instanceof jQuery.fn.init; // true

为了更好的理解这种行为，下面给了一个简单的例子：

var Init = function () {
    console.log('[Init]');
};
 
var jQuery = function () {
    console.log('[jQuery]');
    return new Init();
};
 
Init.prototype = jQuery.prototype = {
    constructor: jQuery
};
 
var $elem = jQuery(); // [jQuery] , [Init]
 
console.log( $elem instanceof jQuery ); // true
console.log( $elem instanceof Init   ); // true

因此，所有的构造都在jQuery.fn.init这个对象的函数中，jQuery是jQuery.fn.init对象的一个工厂。

解析参数

有很多方式使用jQuery函数

$(function () { alert('READY!') }); // 当加载一个dom元素时，函数将被执行
$(document.getElementById('test')); // link on the element
$('<div />'); // 创建新元素
$('<div />', { title: 'test' }); //创建带属性的新元素
 
// 支持所有想得到的和想不到的css选择器
$('#element'); // id为element的元素
$('.element', $previous ); // 在前面的$中找到所有class为element的元素
$("div[name=city]:visible:has(p)");

让我们看一看构造器中的代码，我们已经知道构造器就是jQuery.fn.init.下面给出的是伪代码：

init: function( selector, context, rootjQuery ) {
    if ( !selector ) return this;
 
    // 处理 $(DOM元素)
    if ( selector.nodeType ) return this = selector;
 
    // body元素只存在一个，找到它的优化方法
    if ( selector === "body" && !context ) return this = document.body;
 
    if ( jQuery.isFunction( selector ) ) {
        return rootjQuery.ready( selector );
    }
 
    // 处理 HTML 字符串
    if ( typeof selector === "string" ) {
        // 验证一个匹配，并且在上下文中没有元素#id
        if ( selector.match(quickExpr) ) {
            if ( match[1] ) {
                return createNewDomElement( match[1] );
            } else {
                return getById( match[2] )
            }
        } else {
            return jQuery( context ).find( selector );
        }
    }
},

前4中处理条件很有清楚的--对于空的选择器，DOM元素选择器以及body字符串的处理和为DomReady做的函数处理。

一个有趣的点是，当扫描一行时，最先解析的是“快速正则表达式”，而这个式子的左边是匹配tag标记的，其后才是匹配id元素。

quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;

只有request很复杂的情况下，才调用find方法，利用搜索引擎来寻找元素。Sizzle (Copyright The Dojo Foundation).

组件开发

专业写JavaScript的人都知道，利用JS的原型创建class，很容易继承。

var MyClass = function () {
    // 构造器
};
 
MyClass.prototype = {
    // 原型
};
 
var instance = new MyClass();
 
// 我们可以继承class的原型，并且在新的特性也可以添加到它的所有实例中，及时是已经创建的实例
 
MyClass.prototype.plugin = function () {
    console.log("He's alive!");
};
 
instance.plugin(); // He's alive!

同样的方法，我可以也可以继承标准的jQuery原型：

jQuery.prototype.plugin = function () {
    // 这里是我的组件
};

正如我们上面提到了，fn就是一个到jQuery.prototype的链接，我们还可以这样简洁的写：

jQuery.fn.plugin = function () {
    // 这里是我的组件
    // 这里指向的是jQuery对象，方法调用也是来自jQuery对象
};

这个组件将会出现在那些已经实现或者以后将要实现的实例中。用下面的方法直接向对象添加静态属性：

jQuery.plugin = function () {
    // 这里是我的组件
};

所以写组件的最好结构是：

new function (document, $, undefined) {
 
    var privateMethod = function () {
        // 私有方法, 只对组件用
    };
 
    $.fn.myPlugin = function () {
 
    };
 
    // 如果需要，一个没有绑定dom元素的方法
    $.myPlugin = function () {
 
    };
 
}(document, jQuery);

这种方法可以再jQuery的大多数组件中看到。例如， DatePicker.

结论

在作者看来，jQuery的流行在于它的简单性和易用性，还有简短的名称，比如用css代替setStyle,attr代替setAttribute等。这种想法很简单，也迷住了很多人。

人们往往能看到很多jQuery的“克隆”们，或者是一些想法在其他语言中运用。简单也是有欺骗性的，它也不总是好的。所以在你把方法名称缩短之前一定要三思，因为有可能就是它们会造成不必要的错误。

ps:对jQuery的用法不熟悉，为了学习它的结构才写的这东西，有不正确的地方一定要指正。谢谢！