jquery 插件 分析-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jquery 插件 分析

简介: 引用:http://xdwangiflytek.iteye.com/blog/1716740 很多人觉得jquery、ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲。其实我个人感觉主要是有几个方面的原因: 1、对一些js不常用的语法、操作符不熟悉 2、某个function中又嵌套了一些内部的function,使得整个代码的层次结构不像java代码那么清晰。

引用:http://xdwangiflytek.iteye.com/blog/1716740

很多人觉得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代码传输到客户端肯定需要耗时。上面的这些运算符都是为了减少代码量。再加上使用压缩工具去掉空格,替换变量名,就可以使用压缩率达到最好。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章