[置顶]   jQuery乱谈(一)-古蔺大橙子建站
RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
[置顶]   jQuery乱谈(一)

一直想对jQuery框架做一个深入而全面的分析,可惜总是没做到,正好这段时间闲着,我就赶紧把这事给办了,省的惦记着。

创新互联建站成立十余年来,这条路我们正越走越好,积累了技术与客户资源,形成了良好的口碑。为客户提供成都网站制作、成都网站建设、网站策划、网页设计、域名与空间、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等,这些对于网站建设都非常重要,创新互联建站通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案,携手广大客户,共同发展进步。

 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采用这种写法,可以避免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时间也不长。

 


文章名称:[置顶]   jQuery乱谈(一)
URL分享:http://scgulin.cn/article/psjeos.html