版权声明:本文为博主原创文章,未经博主允许不得转载。 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();