jQuery源码分析理解

  1:  首先我们先来看一下jquery代码的整体结构

jQuery源码分析理解_第1张图片

  代码从16行开始为真正的jquery源码,我们看到Jquery源码第一个()中是定义了一个匿名function( window, undefined ) {};接着末尾有个(window),就表示执行这个匿名function,并传入参数window。在匿名function( window, undefined ) {}中,定义了一个局部变量jQuery;然后在末尾我们看到Jquery末尾有一句window.jQuery = window.$ = jQuery;这句代码就表示,将此前定义的jQuery导出到window对象。这也是为什么我们可以在代码任何地方直接使用$、jQuery对象,因为在这里已经将$、jQuery对象挂载到window下去了,而window.$、window.jQuery与直接使用$、jQuery是没有区别的。

2:匿名函数自执行

(function ())();这种结构叫做匿名函数自执行,优点是  匿名函数自执行里面的所有东西都是一个局部的。防止和其他的代码冲突。但是这样一来,造成了外部调用不到内部局部变量的情况,所以需要对外提供使用内部局部变量和方法的接口,例子:

 (function () {
            var a = 10;
                alert(a);      
        })();
        alert(a);

jQuery源码分析理解_第2张图片

3:.如何能够访问到匿名函数自执行中的方法呢?

我们可以把函数挂载到window上面,通过调用window来进一步调用方法,在jquery中就是这样实现的。在之前定义了一些函数和变量,在9246行将jQuery挂载到了window上,这样就使得外部可以访问到jQuery内部的变量和方法。

jQuery源码分析理解_第3张图片

 

4:jquery函数扩展

代码97行
jQuery.fn = jQuery.prototype 

此处,jQuery.prototype,这表明jQuery是一个基于面向对象的程序,往后就是在给jQuery对象添加一些属性和方法。针对面向对象,举一个扩展函数的例子。

(jQuery.fn.myMethod=function () {
       alert('myMethod');
})
// 或者:
(function ($) {
        $.fn.extend({
             myMethod : function () {
                  alert('myMethod');
             }
        })
})(jQuery)

使用:

$("#div").myMethod();

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(jQuery源码分析理解)