jQuery源码分析理解

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

  代码从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);

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

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

<script>
        (function () {
            var a = 10;
            function find(){
                alert(a);  
            }         
              window.find = find;   
        })();
         find()
    </script>

 

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();