玩过JavaScript的人应该很少有不知道jQuery的吧,一个很强大的JavaScript库,代码简洁明了,屏蔽各种浏览器兼容问题,还有各式各样强大的plugin,用起来就一个字“爽”(jQuery: The Write Less, Do More, JavaScript Library)。
不知道有多少人会去思考它的实现方式呢?我曾经好奇的去看了看它的源码(jquery-1.4.2.js),第一行就震撼了我:
(function( window, undefined ) {
//jQuery源代码(此处省略6千多行)
})(window);
(function(){})();
所有的代码都由这段代码包含起来,格式非常诡异,一个匿名函数被括号包含,紧接着又是一个括号,这算神马意思呢?
这东西叫“自运行的匿名函数”,要说明这个,我先说说“函数”。
function myfun(){
alert(‘这是一个函数’)
};
alert(myfun);//把函数名作为参数输出一下,会咋样捏?
上面输出的是myfun这个函数的源代码,如下:
无论你怎么定义函数,js解释器是将这个函数当做一个Function对象,而函数名即是指向该对象的引用的一个变量,在这个变量后面加上(一对小括号),就表示运行这个函数。
而“匿名函数”则是没有函数名的函数,即function(){}。
可以将一个匿名函数赋值给一个变量,例如:
var myfun = function(){
alert('这是一个函数');
}
这种方式是和前面一种等价的,当然我还可以同时把一个函数赋值给多个变量,例如:
var myfun = function(){
alert('这是一个函数');
}
var myfun2 = myfun;
myfun();
myfun2();
此时myfun()和myfun2()输出的是一样的。
* * * * * * * * * * * * * * * 我是聪明的分割线 * * * * * * * * * * * * * * * *
说回“自运行的匿名函数”,其实(第一对小括号,包括其中匿名函数)是用于获取括号中表达式的值,也就是那个匿名函数对象的引用,后面紧接着的(第二对小括号,也就是‘;’前面的那对)是用于运行前面(第一对小括号)返回的Function对象。
也就是说,这个匿名函数被定义之后就自动运行了。一种替代的写法如下:
function myFun(){
//函数体
}
myFun(); //运行函数
第一种写法就简洁多了。
这样的自运行匿名函数有什么好处呢?
这样主要是为了将jQuery的代码都通过匿名函数形成的闭包保护起来,是其中定义的变量都是局部变量,便不会和其他的代码产生的全局变量发生命名冲突(如果定义了和jQuery内部同名的变量),并且代码可以得到立刻的初始化。
匿名函数内的最后一句为:
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
此处将匿名函数内定义的jQuery变量赋值给了全局变量window.jQuery和window.$(此处的window是匿名函数运行时传入的参数,指向全局的window对象),所以我们就可以在自己的代码中通过‘$’ or ‘jQuery’开始美妙的jQuery之旅了。
* * * * * * * * * * * * * * 我是聪明的分割线 * * * * * * * * * * * * * *
细心的童鞋可能又会提出问题了,上面的匿名函数不是运行完了吗,为啥里面的局部变量还能继续使用(也就是匿名函数内的所有jQuery方法依旧能够调用)?
这个又是JavaScript的一个语言特性了——闭包。
好吧,为了说明白这个问题,下面我举个恶心的例子:
var abc=function(y){ //function1
var x=y;// 这个是局部变量
return function(){ //function2
alert(x++);// 就是这里调用了闭包特性中的
//一级函数局部变量的x,并对它进行操作
alert(y--);// 引用的参数变量也是自由变量
}}(5);// 后面这个(5),让前面的函数运行了,abc被初始化为function2
abc();// "5" "5" function1之外(function2),能够继续调用x、y
abc();// "6" "4"
abc();// "7" "3"
什么是闭包?闭包是指程序中的代码块允许一级函数存在(function1)并且在一级函数中所定义的自由变量(x、y)能不被释放,直到一级函数被释放前,一级函数外也能应用这些未释放的自由变量。
(这个东西还是很纠结的[晕],看晕了就过段时间再来看吧)
所以呢,尽情的dollar吧(是不是敲js代码的都是财迷呀,到处是美元符号~~ [偷笑] )
* * * * * * * * * * * * * * * * * * 我是聪明的分割线 * * * * * * * * * * * * * * * * * * *
最后顺便说一下,那个jQuery匿名函数里面那个undefined,jQuery的匿名函数有两个参数,一个是window,一个是undefined,但是运行时只传入了一个window,这是为了保证undefined关键字的值为undefined(避免关键字undefined被不小心赋值了的情况),例如:
function myfun(){
alert('这是一个函数');
}
undefined = myfun;
undefined();
上面会很恶心的输出“这是一个函数”,囧~~~~
(有时还真觉得js的语法很恶心 [委屈] )
我说:总而言之,就是“$”用着很爽啦~
我的WordPress博客:关于互联网,关于JavaScript学习
分享到:
相关推荐
jquery 学习笔记源码 1-3章
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
jQuery-, jQuery源码解读 -- jQuery v1.10.2
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jquery插件jquery-ui-timepicker-addon.j
NULL 博文链接:https://lhgyy00.iteye.com/blog/442374
jquery-1.11.0 + jquery-UI-1.10.4
jQuery学习示例源码 ,jQuery基本知识
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
jquery插件jquery-ui-1.8.2.custom.min.js
jquery-ui日历控件还是很人性化的,但官网没找到很好的中文版,这里上传一下
JavaScript和jQuery实战手册源码--the missing manual示例代码合集
jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记
JQueryEasyUI学习笔记(十一)源码 右键菜单 冻结列
jQuery源码分析-插件
jquery-django-form-源码.rar
lab-jquery-pizza-builder-源码.rar
jQuery源码分析-事件(1).