jquery的总体架构分析及实现示例详解

jQuery整体框架甚是复杂，也不易读懂，这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以jquery-1.7.1为例进行分析。

jquery的总体架构

代码如下:
16 (function( window, undefined ) {
         // 构造 jQuery 对象
  22     var jQuery = (function() {
  25         var jQuery = function( selector, context ) {
  27                 return new jQuery.fn.init( selector, context, rootjQuery );
  28             },
                 // 一堆局部变量声明
  97         jQuery.fn = jQuery.prototype = {
  98             constructor: jQuery,
  99             init: function( selector, context, rootjQuery ) { ... },
                 // 一堆原型属性和方法
 319         };
 322         jQuery.fn.init.prototype = jQuery.fn;
 324         jQuery.extend = jQuery.fn.extend = function() { ... };
 388         jQuery.extend({
                 // 一堆静态属性和方法
 892         });
 955         return jQuery;
 957     })();
          // 省略其他模块的代码 ...
9246     window.jQuery = window.$ = jQuery;
9266 })( window );

分析一下以上代码，我们发现jquery采取了匿名函数自执行的写法，这样做的好处就是可以有效的防止命名空间与变量污染的问题。缩写一下以上代码就是：

代码如下:
(function(window, undefined) {
    var jQuery = function() {}
    // ...
    window.jQuery = window.$ = jQuery;
})(window);

参数window

匿名函数传了两个参数进来，一个是window，一个是undefined。我们知道，在js中变量是有作用域链的，这两个变量的传入就会变成匿名函数的局部变量，访问起来的时候速度会更快。通过传入window对象可以使window对象作为局部变量使用，那么，函数的参数也都变成了局部变量，当在jquery中访问window对象时，就不需要将作用域链退回到顶层作用域，从而可以更快的访问window对象。