看了这个才发现jQuery源代码不是那么晦涩
很多人觉得jquery、ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲。其实我个人感觉主要是有几个方面的原因:
- 对一些js不常用的语法、操作符不熟悉
- 某个function中又嵌套了一些内部的function,使得整个代码的层次结构不像java代码那么清晰。
- js中允许变量先使用后定义,会造成我们看代码时候忽然冒出来一个变量、function,却找不到是在哪里定义的。
那么今天给大家分享一下我的经验,扫清你的障碍。
一些晦涩的操作符:
(function(){})();
几乎所有的开源js代码开篇都是这样(function(……){……})(……);
下面是Jquery的部分源码:
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor ‘enhanced‘
return new jQuery.fn.init( selector, context );
},
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
……
indexOf = Array.prototype.indexOf;
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
})(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(){})()
用来封装一些私有成员或者公共成员的导出。
令人迷惑的","
我们知道 ,
一般用于一次定义多个变量、定义多个参数等。像上面的jQuery源码中在var jQuery
后面,使用,
一次定义了很多个变量。 但是,像下面的代码,可能大家就不一定看得懂了:
jQuery(document).ready(function() {
var showName=function(){
var value,nameInput=$("#nameHide");
return nameInput.show(),value=nameInput.val();
};
alert(showName());
});
//结果:弹出king
这里的nameInput.show(),value=nameInput.val()
中的,
运算符的作用是返回,
右侧表达式的值。所以,return
后面如果有多个表达式,且表达式之间由,
隔开,整个return
表达式返回的是最后一个,
右侧的表达式的值。
,
在开源代码中常常被用于return
表达式中,以及跟下面我们要讲到的()
运算符一起使用。
()
广义上的代码包装
我们遇到复杂的逻辑表达式时,我们通常会把需要一起运算的表达式用“()”包起来:(a||b)&&(c||d)
其实,我们可以这样理解:()
运算符将一个表达式包裹起来作为一个整体进行运算,然后返回这个整体的值。
那么上面的(function(){})()
中左侧定义function的()
也是这个作用,将这个function
给包裹起来,然后返回这个function
。我们调用方法一般是a();
那么(function(){})
的作用就是返回这个function
对象,然后(function(){})()
右侧的()
表示调用这个function
。
我们再来看其他的用法:
jQuery(document).ready(function() {
var nameValidate=function(){
var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip");
return (value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"对了,输入为king!"):(nameErrorTip.show(),"请输入king!");
};
alert(nameValidate());
});
//结果 nameErrorTip显示,弹出"请输入king!"
//html:<input value="king" id="name"/><div id="nameErrorTip">输入错误!</div>
//结果 nameErrorTip隐藏,弹出"对了,输入为king!"
这里(value=nameInput.val(),value=="king")
中()
将里面的表达式作为一个整体进行运算,而里面的表达式又是由,
构成的多个表达式组,所以执行的时候会把这多个表达式都执行一次,并且返回最后一个表达式的值!
所以 (value=nameInput.val(),value=="king")
执行时,先运算value
的值,再判断是否为"king"
。如果为king
,会执行(nameErrorTip.hide(),"对了,输入为king!")
。这个表达式又先将nameErrorTip
隐藏,再返回一个"对了,输入为king!"
字符串作为 整个return
的值。
||、&&、if()逻辑让人头晕
||
、&&
两侧参与运算的是逻辑表达式,if()
中也是。但是我们在很多开源代码中看到的||
、&&
参与运算的表达式看起来却好像不是逻辑表达式……
下面节选一段jQuery.tool中的一段源码:
setTimeout(function() {
a.isDefaultPrevented()||(
n.toggleClass(
e.disabledClass,
b <= 0
),
o.toggleClass(
e.disabledClass,
b >= f.getSize() - 1
)
)
}, 1)
}),
e.initialIndex || n.addClass(e.disabledClass)),
f.getSize() < 2 && n.add(o).addClass(e.disabledClass),
e.mousewheel && a.fn.mousewheel && b.mousewheel(function(a, b) {
if (e.mousewheel) {
f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50);
return !1
}
});
这里有多处||
、&&
。但与运算的表达式却是调用某个函数的返回值。
其实,js中的逻辑表达式是按照真值、假值来分的。true
是真值;1
是真值;一个对象也是真值;false
是假值;""
、0
是假值。
在js中&&
、||
不一定都是用来判断一个表达式的逻辑值是true
、false
,更多的是用来依据真值或者假值执行相应操作!
我们知道,||
运算的时候,会先运算左侧的表达式的值,如果为真值,那么真个表达式就为真值,而同时右侧表达式是真值、假值都不重要,因为右侧表达式都不再继续参与运算了。又如果左侧为假值,则继续运算右侧表达式。
&&
则先运算左侧表达式,两侧表达式,一个为假值,则整个表达式为假值。
这里关键是这个真值或者假值的运算过程中,我们可以使用上面介绍的,
、()
将一组表达式串起来执行。也就是说,这个表达式可能会很长很长,我甚至可以定义一个function
在里面。这些表达式在执行过程中,有可以进行某些附加操作。比如我们希望这个表达式为真值的时候我们做什么,假值的时候做什么,把这些操作用()
、,
串起来作为一个整体运算。
于是就有了上面的复杂代码。
另外:
b
}
可简写为a&&(b); b可以是一个function调用表达式,或者是多个语句用","串起来。但前提是a已定义,否则会报错。
我们来看个实例吧。是上面例子的升级版。我们加入一个nameInput是否存在的判断:
var nameValidate=function(){
var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip"),msg;
msg=(value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"对了,输入为king!"):(nameErrorTip.show(),"请输入king!");
return (nameInput.length&&nameInput.val()&&nameErrorTip.length&&msg)||"没有找到name输入框或者输入框没有值!";
};
alert(nameValidate());
});
测试:
//结果:弹出“没有找到name输入框或者输入框没有值!”
//<input value="king" id="name"/><div id="nameErrorTip">输入错误!</div>
//结果:弹出“对了,输入为king!”,nameErrorTip被隐藏
return
表示中 nameInput.length&&nameInput.val()&&nameErrorTip.length&&msg
会先运算 nameInput.length
的值,如果length
为0
则表达式为假值,如果为1
则为真值。val()
操作也是如此,如果val()
结果为""
则表达式也是假值。几个表达式之间为&&
运算,则表示依次运算几个表达式的值,如果都未真值则返回最后一个表达式的值,由于整个表达式与 "没有找到name输入框或者输入框没有值!"
表达式之间是||
运算,所以前面的表达式其中一个表达式为假值则返回||
右侧的表达式的值,也就是整个“没有找到name输入框或者输入框没有值!”
字符串。
说到这里,我之前写过一篇文章专门说到了&&
、||
的真值、假值问题。有兴趣的可以去看看。
谈了这些难以理解的运算符后,大家可能会觉得,这个javascript为什么要搞这些晦涩的运算符呢?
我的理解是因为javascript通常在客户端运行,那么从服务器端将js代码传输到客户端肯定需要耗时。上面的这些运算符都是为了减少代码量。再加上使用压缩工具去掉空格,替换变量名,就可以使用压缩率达到最好。
再这里,我也告诉大家,其实我也非常反对在实际应用中采用这种写法的,因为会对初学者造成阅读障碍。我写这篇文章的目的不是为了让大家以后就这样用,而是告诉大家可以这样用,在一些开源代码中遇到了能看懂。不可为了炫耀而故意写一些晦涩的代码。
最后,为了帮助我们更快的找到变量定义、理清代码整体结构,给大家推荐一个eclipse的js插件:Spket,支持jQuery代码提示哦!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。