一直想对jQuery框架做一个深入而全面的分析,可惜总是没做到,正好这段时间闲着,我就赶紧把这事给办了,省的惦记着。
jQuery,相信大家都不陌生,对它的介绍我就不说了,我只说一下我对jQuery自己的一些理解。在我看来,jQuery虽然应用面非常广,但它更多的用于中小型网站的开发,或者偏向于设计的人员使用。相对于YUI、Ext-JS这些大的库来说,jquery更像是个人的巅峰之作。而像YUI、Ext-JS这些库,它们的应用面更偏重于企业级开发。这也是库与框架的区别。
虽然如此,jQuery还是有很多的闪光点值得我们学习,这也是我决定对jQuery做深入而细致的分析的原因。当然,网上已经有很多人对jQuery做了很深入的研究,本人的分析肯定会和别人有很多重复的地方,请不要见怪,我只想把我想到的东西写下来而已。闲话不说了,下面正式开始分析。
注:文章中针对的是jQuery-1.8.3.js,也就是最新的版本,若需要下载,请点击:http://code.jquery.com/jquery-1.8.3.js
整个jQuery就是一个自执行匿名函数。所谓的自执行匿名函数,就是没有函数名的定义后直接执行的函数。通常有两种格式:
(function () { /* code */ } ()); (function () { /* code */ })();
jQuery使用的就是第二种格式:
(function( window, undefined ) { /*code*/ })( window );
也许你会发现,这个匿名函数有两个形参:window、undefined,但是只有一个实参:window。为什么要把window这个在JavaScript中属于“超级全局变量”的已存在的值传给函数呢?这里面涉及到了作用域链的知识,有兴趣的同学可以参考这篇文章:深入理解JavaScript系列(14):作用域链(Scope Chain)
这里把window作为实参可以减少作用域链的长度,有利于性能的优化。至于把undefined作为形参而又不传实参,是因为undefined在ECMAScript第三版中不属于关键字未来关键字(Javascript关键字是不能作为变量名和函数名使用的,使用Javascript关键字作为变量名或函数名,会使Javascript在载入过程中出现编译错误),所以是可以允许用户对undefined进行赋值的:
/*未对undefined赋值*/ var a = undefined; console.log(a); //undefined /*对undefined赋值*/ var undefined = 'Hello!'; var a = undefined; console.log(a); //"Hello!"
幸好现代浏览器(FireFox、IE9+、Opera、Safari、Chrome)已经纠正了这一错误。在这些浏览器中即使对undefined进行赋值,浏览器依旧会把undefined赋值给变量:
而jQuery采用这种写法,可以避免jQuery里面的undefined遭到污染。在执行匿名函数的时候,只传递一个参数 window, 而不传递 undefined,那么函数体中的 undefined 局部变量的值,刚好就是 undefined。
接下来,在jQuery里面定义了一大堆的变量和方法:
(function( window, undefined ) { var /*一堆局部变量*/ jQuery = function( selector, context ) { /*该方法是jQuery的基础*/ // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }, jQuery.fn = jQuery.prototype = { /*code*/ }; })(window);
jQuery在内部把大部分的变量放到了最上面,这样虽然有利于变量在作用域链的查找(作用域链问题请参考:深入理解JavaScript系列(14):作用域链(Scope Chain)),但我认为这种写法在这里虽然无可厚非,但在我们平常写JavaScript代码时不是一种很好的编程习惯。我更推荐当我们用到变量时在定义,这样写出来的代码更加清晰。至于性能方面的损耗,真的可以忽略不计。当然,在大型的开发中,由于我们已经对各种变量的生存情况有了很清晰地了解,这时候把变量全部放在头部,再加上适当的注释,代码的结构会更加明确。
jQuery.fn.init( selector, context, rootjQuery )这个方法是整个jQuery的核心,大家应该对类似$('div .hd')的选择器不陌生吧,该方法提供了jQuery选择器的全部功能。至于该方法的具体实现,明天我再好好写一下吧。
另外我发现,在jQuery里面,注释很丰富,很全面,这对于我们了解jquery源码是个不小的帮助。工作中我们也需要养成这样的好习惯。
这篇文章只是对jQuery做一个简单的分析,后面的会更加全面,同时还会加上我的一些见解和评价,以及相关的资料参考。我写这些文章的目的就是对jQuery进行全面和仔细的分析,里面的一些观点也许有不对的地方,忘大家原谅,毕竟本人学习jQuery时间也不长。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。