jQuery源码分析理解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aliujiujiang/article/details/88317754

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

猜你喜欢

转载自blog.csdn.net/aliujiujiang/article/details/88317754