现在的位置: 首页 > 综合 > 正文

jQuery乱谈(一)

2013年05月12日 ⁄ 综合 ⁄ 共 2206字 ⁄ 字号 评论关闭

一直想对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时间也不长。

抱歉!评论已关闭.