jQuery乱谈(一)

来源:互联网 发布:ps4安装centos 编辑:程序博客网 时间:2024/05/07 01:49

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

 

原创粉丝点击