jQuery源码解读1:$()从何而来

1. jQuery源码架构总结就是一个自调用然后创建window.$属性并指向一个jQuery对象同时还返回一个jQuery函数的匿名函数。

(function (global) {
            var jQuery = function () {};
            window.$ = window.jQuery = jQuery;
            return jQuery;
        })(window);

1)既然window在哪里都可以拿到,为什么还把window当参数传进去呢?因为这样window处于作用域的最顶端。如果运行这个插件的时候再去找window,那么久需要一层层的在作用域去找,找到最顶层才找到它,而如果提前准备好它,并把它当参数传给函数,这时候window就被传给内部的一个局部变量(函数形参),局部变量在函数作用域最近的一层!这样就加快了插件的速度了!

2. 而jQuery把定义jQuery的函数体变成一个工厂函数从自调用参数里传入如下

( function( global, factory ) {
		factory( global );
} )( window, function( window, noGlobal ) {
                 /*传入这个工厂函数,在这个工厂函数定义jQuery并返回jQuery*/
                 var jQuery = function () {};
                 window.$ = window.jQuery = jQuery;
                 return jQuery;
             });

3. 然后把这个jQuery变量同时赋予(同时创建)全局windows和$两个属性。所以这两个函数指向同一个对象jQuery

// Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( !noGlobal ) { //注意这个判断,如果没有通过工厂函数的Window传不进来的话,就直接调用全局变量了。
    window.jQuery = window.$ = jQuery;
}

4. 区分jQuery工具函数和jQuery()对象的方法

 <script>
       (function () {
            var jQuery = function () {
                return new jQuery.prototype.init();
            };
            jQuery.prototype.init = function () {
            };
            jQuery.prototype.init.prototype = jQuery.prototype; //这句话是关键!!
           //我们来解释一下  jQuery在上面  拿到函数返回值 return new jQuery.prototype.init(); 是一个函数对象
           //那这里我们要添加的对象方法自然而然的跑到了jQuery.prototype.init(); 是一个函数对象的原型上去添加
           //而巧在上面那句话,把jQuery.prototype.init()的原型 与 当前jQuery的原型绑定到一块了
           //jQuery.prototype.init()的原型指向jQuery的原型
           //所以在jQuery的原型上添加方法等同于在jQuery.prototype.init的原型上添加方法。
            jQuery.prototype.insideFuntion = function () {
                console.log("\n 我是对象方法");
            };
            //定义全局jQuery工具函数
            jQuery.outFunction = function () {
                console.log("\n 我是工具函数");//也可以叫静态方法
            };
            window.$ = window.jQuery = jQuery;  //把jQuery对象赋给全局变量window的$属性和jQuery属性!
            return jQuery;  //return只是为了让外面调用的时候可以把jQuery对象指给一个变量

        })();  //自调用函数
        $.outFunction();  //我是工具函数//也可以叫静态方法
        $().insideFuntion();  //我是对象方法
    </script>

5.实际源码中有几个特殊的 = ;

jQuery.prototype.init()的原型指向jQuery的原型是关键!!!

return new jQuery.fn.init( selector, context );
init = jQuery.fn.init = function( selector, context, root ) {};
init.prototype = jQuery.fn; 
jQuery.fn = jQuery.prototype; 
//由此得出
jQuery.fn = jQuery.prototype = jQuery.fn.init.prototype;
//这也是我们能使用jQuery.fn添加自定义插件方法的原因,因为它就代表着jQuery原型!

这也是我们能使用jQuery.fn添加自定义插件方法的原因,因为它就代表着jQuery原型!

6. 总结

 1)$等效于jQuery标识符,是window全局变量的一个属性,是在引入jQuery.js源码(一个很大块的匿名函数)自调用完之后创建window.$属性并指向一个jQuery对象!window.$ = window.jQuery = jQuery;

2)jQuery对象的原型是jQuery.fn;

插件开发注意命名空间

jQuery插件开发方式主要有三种:

http://www.cnblogs.com/ajianbeyourself/p/5815689.html

  1. 通过$.extend()来扩展jQuery
  2. 通过$.fn 向jQuery添加新的方法
  3. 通过$.widget()应用jQuery UI的部件工厂方式创建

猜你喜欢

转载自my.oschina.net/u/3697586/blog/1548463