jquery中被誉为工厂函数的是什么？-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

jquery中被誉为工厂函数的是“$()”，它本质上就是一个DOM对象，但是它所使用的方法都封装在了jQuery上，所以我们不能通过“$()”来使用JavaScript的方法，同样DOM对象也不能使用jQuery上的方法。

相关推荐：《jQuery教程》

jquery中被誉为工厂函数的是“$()”。在jQuery中，无论我们使用哪种类型的选择符都需要从一个“$”符号和一对“()”开始。

“$”是jQuery“类”的一个别称，$()构造了一个jQuery对象；所以，“$()”可以叫做jQuery的构造函数。

工厂函数“$()”本质上就是一个DOM对象，但是它所使用的方法都封装在了jQuery上，所以我们不能通过“$()”来使用JavaScript的方法，同样DOM对象也不能使用jQuery上的方法。

我们以$为开始，引出整个jQuery的架构

以jQuery的1.11.3版本举例，$作为一个函数名出现的地方是在源码的最后：

1	`window.jQuery = window.$ = jQuery;`

其中的jQuery是前面定义的一个函数，在源码第70行中出现

jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

这个函数相当于一个工厂函数，它内部返回了一个对象，这样就可以不用new的方式创建jQuery对象了
所以new $().xxx 和 $().xxx 就没有区别了，这也符合jQuery的设计理念“write less, do more”

在源码第2882行中：

1 2	`// Give the init function the jQuery prototype for later instantiation` `init.prototype = jQuery.fn;`

init的原型对象替换为jQuery.fn，其实就是替换成了jQuery这个函数自己的原型对象jQuery.prototype
在源码89行中：

1	`jQuery.fn = jQuery.prototype`

这样做我们可以很方便的写jQuery的扩展方法
举个例子：

jQuery.fn.alertMsg = function(msg){
    alert('msg');
}

使用：

1	`$().alertMsg('Hello World!');`

jQuery的整体架构到这里就差不多了

下面是一个简化版的jQuery架构，便于理解

(function () {
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }
    // jQuery对象的构造函数
    jQuery.prototype.init = function (selector) {
        
    }
    // jQuery原型上的css方法
    jQuery.prototype.css = function (config) {
         
    }
    // 将jQuery原型上的方法都放到init的原型链上
    jQuery.prototype.init.prototype = jQuery.prototype;
    window.$ = window.jQuery = jQuery;
})();