码迷，mamicode.com
首页 > Web开发 > 详细

学会读JQuery等JS插件源码

时间：2014-07-12 12:56:16      阅读：269      评论：0      收藏：0      [点我收藏+]

标签：http   java   使用   strong   os   width   

很多人觉得jquery、ext等一些开源js源代码 十分的晦涩，读不懂，遇到问题需要调试也很费劲。其实我个人感觉主要是有几个方面的原因：

1、对一些js不常用的语法、操作符不熟悉

2、某个function中又嵌套了一些内部的function，使得整个代码的层次结构不像java代码那么清晰。

3、js中允许变量先使用后定义，会造成我们看代码时候忽然冒出来一个变量、function，却找不到是在哪里定义的。

 

那么今天给大家分享一下我的经验，扫清你的障碍。

一、一些晦涩的操作符：

1、(function(){})();

几乎所有的开源js代码开篇都是这样(function(……){……})(……);

下面是Jquery的部分源码：

Js代码
  1. (function( window, undefined ) { 
  2.     var jQuery = function( selector, context ) { 
  3.         // The jQuery object is actually just the init constructor ‘enhanced‘ 
  4.         return new jQuery.fn.init( selector, context ); 
  5.     }, 
  6.  
  7.     // Map over jQuery in case of overwrite 
  8.     _jQuery = window.jQuery, 
  9.  
  10.     // Map over the $ in case of overwrite 
  11.     _$ = window.$, 
  12.     …… 
  13.     indexOf = Array.prototype.indexOf; 
  14.  
  15.     // Expose jQuery to the global object 
  16.     window.jQuery = window.$ = jQuery; 
  17. })(window); 

那么这个操作符(function(){})();到底是什么意思呢？

(function(){})中的定义了一个function，紧接着的()表示立即执行这个function。

我们看到Jquery源码第一个()中是定义了一个匿名function( window, undefined ) {}；接着末尾有个(window)，就表示执行这个匿名function，并传入参数window 。

 

在匿名function( window, undefined ) {}中，定义了一个局部变量jQuery；然后在末尾我们看到Jquery末尾有一句window.jQuery = window.$ = jQuery; 这句代码就表示，将此前定义的jQuery导出到window对象 。这也是为什么我们可以在代码任何地方直接使用$、jQuery对象，因为在这里已经将$、jQuery对象挂载到window下去了，而window.$、window.jQuery与直接使用$、jQuery是没有区别的。

（注意，这个window对象是传入的参数window，而不是浏览器window对象！！一个形参、一个实参。我们可以在定义function的时候，将参数window取名为其他字符。所以我们看到jquery.min.js中这个匿名function变成了(function(E,B){})(window);）

 

通常(function(){})()用来封装一些私有成员或者公共成员的导出。

 

2、令人迷惑的","

我们知道“,”一般用于一次定义多个变量、定义多个参数等。像上面的jQuery源码中在var jQuery后面，使用“,”一次定义了很多个变量。

但是，像下面的代码，可能大家就不一定看得懂了：

Js代码
  1. //html：<input type="hidden" value="king" id="nameHide"/> 
  2. jQuery(document).ready(function() { 
  3.     var showName=function(){ 
  4.         var value,nameInput=$("#nameHide"); 
  5.         return nameInput.show(),value=nameInput.val(); 
  6.     }; 
  7.     alert(showName()); 
  8. }); 
  9. //结果：弹出king 

这里的“nameInput.show(),value=nameInput.val()”中的“,”运算符的作用是返回","右侧表达式的值。所以，return 后面如果有多个表达式，且表达式之间由","隔开，整个return表达式返回的是最后一个","右侧的表达式的值。

 

“,”在开源代码中常常被用于return表达式中，以及跟下面我们要讲到的"()"运算符一起使用。

 

3、“()”广义上的代码包装

我们遇到复杂的逻辑表达式时，我们通常会把需要一起运算的表达式用“()”包起来：(a||b)&&(c||d)

其实，我们可以这样理解："()"运算符将一个表达式包裹起来作为一个整体进行运算，然后返回这个整体的值。

那么上面的(function(){})()中左侧定义function的()也是这个作用，将这个function给包裹起来，然后返回这个function。我们调用方法一般是a();那么(function(){})的作用就是返回这个function对象，然后(function(){})()右侧的()表示调用这个function。

 

我们再来看其他的用法：

Js代码
  1. //html：<input value="kings" id="name"/><div id="nameErrorTip">输入错误！</div> 
  2. jQuery(document).ready(function() { 
  3.     var nameValidate=function(){ 
  4.         var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip");  
  5.         return (value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"对了，输入为king！"):(nameErrorTip.show(),"请输入king!"); 
  6.     }; 
  7.     alert(nameValidate()); 
  8. }); 
  9.  
  10. //结果 nameErrorTip显示，弹出"请输入king!" 
  11.  
  12.  
  13.  
  14. //html：<input value="king" id="name"/><div id="nameErrorTip">输入错误！</div> 
  15. //结果 nameErrorTip隐藏，弹出"对了，输入为king！" 

这里“ (value=nameInput.val(),value=="king")”中"()"将里面的表达式作为一个整体进行运算，而里面的表达式又是由","构成的多个表达式组，所以执行的时候会把这多个表达式都执行一次 ，并且返回最后一个表达式的值！

所以 (value=nameInput.val(),value=="king")执行时，先运算value的值，再判断是否为"king"。如果为king，会执行(nameErrorTip.hide(),"对了，输入为king！")。这个表达式又先将nameErrorTip隐藏，再返回一个"对了，输入为king！"字符串作为 整个return的值。

 

4、||、&&、if()逻辑让人头晕

 

||、&&两侧参与运算的是逻辑表达式，if()中也是。但是我们在很多开源代码中看到的||、&&参与运算的表达式看起来却好像不是逻辑表达式……

 

下面节选一段jQuery.tool中的一段源码：

Js代码
  1. e.circular || (f.onBeforeSeek(function(a, b) { 
  2.                     setTimeout(function() { 
  3.                                 a.isDefaultPrevented() 
  4.                                         || (n.toggleClass(e.disabledClass, 
  5.                                                 b <= 0), o.toggleClass( 
  6.                                                 e.disabledClass, b >= f 
  7.                                                         .getSize() 
  8.                                                         - 1)) 
  9.                             }, 1) 
  10.                 }), e.initialIndex || n.addClass(e.disabledClass)), f.getSize() < 2 
  11.                 && n.add(o).addClass(e.disabledClass), e.mousewheel 
  12.                 && a.fn.mousewheel && b.mousewheel(function(a, b) { 
  13.                             if (e.mousewheel) { 
  14.                                 f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50); 
  15.                                 return !1 
  16.                             } 
  17.                         }); 

这里有多处||、&&。但与运算的表达式却是调用某个函数的返回值。

 

其实，js中的逻辑表达式是按照真值、假值来分的。true是真值；1是真值；一个对象也是真值；false是假值；""、0是假值。

 

在js中&&、||不一定都是用来判断一个表达式的逻辑值是true、false，更多的是用来依据真值或者假值执行相应操作！

 

我们知道，||运算的时候，会先运算左侧的表达式的值，如果为真值，那么真个表达式就为真值，而同时右侧表达式是真值、假值都不重要，因为右侧表达式都不再继续参与运算了。又如果左侧为假值，则继续运算右侧表达式。

&&则先运算左侧表达式，两侧表达式，一个为假值，则整个表达式为假值。

 

这里关键是这个真值或者假值的运算过程中，我们可以使用上面介绍的","、"()"将一组表达式串起来执行。也就是说，这个表达式可能会很长很长，我甚至可以定义一个function在里面。这些表达式在执行过程中，有可以进行某些附加操作。比如我们希望这个表达式为真值的时候我们做什么，假值的时候做什么，把这些操作用"()"、","串起来作为一个整体运算。

于是就有了上面的复杂代码。

 

我们来看个实例吧。是上面例子的升级版。我们加入一个nameInput是否存在的判断:

Js代码
  1. jQuery(document).ready(function() { 
  2.     var nameValidate=function(){ 
  3.         var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip"),msg; 
  4.         msg=(value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"对了，输入为king！"):(nameErrorTip.show(),"请输入king!"); 
  5.         return (nameInput.length&&nameInput.val()&&nameErrorTip.length&&msg)||"没有找到name输入框或者输入框没有值！"; 
  6.     }; 
  7.     alert(nameValidate()); 
  8. }); 

测试：

Js代码
  1. //html:<input value="king" id="myName"/> 
  2. //结果：弹出“没有找到name输入框或者输入框没有值！” 
  3.  
  4. //<input value="king" id="name"/><div id="nameErrorTip">输入错误！</div> 
  5. //结果：弹出“对了，输入为king！”，nameErrorTip被隐藏 

return表示中 nameInput.length&&nameInput.val()&&nameErrorTip.length&&msg会先运算 nameInput.length的值，如果length为0则表达式为假值，如果为1则为真值。val()操作也是如此，如果val()结果为""则表达式也是假值。几个表达式之间为&&运算，则表示依次运算几个表达式的值，如果都未真值则返回最后一个表达式的值 ，由于整个表达式与

"没有找到name输入框或者输入框没有值！"

表达式之间是||运算，所以前面的表达式其中一个表达式为假值则返回||右侧的表达式的值，也就是整个“没有找到name输入框或者输入框没有值！”字符串。

 

这个javascript为什么要搞这些晦涩的运算符呢？

因为javascript通常在客户端运行，那么从服务器端将js代码传输到客户端肯定需要耗时。上面的这些运算符都是为了减少代码量。再加上使用压缩工具去掉空格，替换变量名，就可以使用压缩率达到最好。

学会读JQuery等JS插件源码,布布扣,bubuko.com

学会读JQuery等JS插件源码

标签：http   java   使用   strong   os   width   

原文地址：http://www.cnblogs.com/Tracy-zdy/p/3832673.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！