怎么读js插件代码?
来源:互联网 发布:超声波老鼠软件下载 编辑:程序博客网 时间:2024/04/25 04:47
看js代码总有很多迷惑,看了 原文链接 这篇文章学到了很多,在此分享给大家,也十分感谢博主!
很多人觉得jquery、ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲。其实我个人感觉主要是有几个方面的原因:
- 对一些js不常用的语法、操作符不熟悉
- 某个function中又嵌套了一些内部的function,使得整个代码的层次结构不像java代码那么清晰。
- js中允许变量先使用后定义,会造成我们看代码时候忽然冒出来一个变量、function,却找不到是在哪里定义的。
(function( window, undefined ) { 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);
令人迷惑的",
//html:<input type="hidden" value="king" id="nameHide"/>jQuery(document).ready(function() { var showName=function(){ var value,nameInput=$("#nameHide"); return nameInput.show(),value=nameInput.val(); }; alert(showName());});//结果:弹出king
()
广义上的代码包装(a||b)&&(c||d)
()
运算符将一个表达式包裹起来作为一个整体进行运算,然后返回这个整体的值。(function(){})()
中左侧定义function的()
也是这个作用,将这个function
给包裹起来,然后返回这个function
。我们调用方法一般是a();
那么(function(){})
的作用就是返回这个function
对象,然后(function(){})()
右侧的()
表示调用这个function
。我们再来看其他的用法://html:<input value="kings" id="name"/><div id="nameErrorTip">输入错误!</div>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中的一段源码:
e.circular || (f.onBeforeSeek(function(a, b) { 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
在里面。这些表达式在执行过程中,有可以进行某些附加操作。比如我们希望这个表达式为真值的时候我们做什么,假值的时候做什么,把这些操作用()
、,
串起来作为一个整体运算。于是就有了上面的复杂代码。另外:
if(a){ b}
可简写为a&&(b); b可以是一个function调用表达式,或者是多个语句用","串起来。但前提是a已定义,否则会报错。我们来看个实例吧。是上面例子的升级版。我们加入一个nameInput是否存在的判断:
jQuery(document).ready(function() { 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());});
测试:
//html:<input value="king" id="myName"/>//结果:弹出“没有找到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输入框或者输入框没有值!”
字符串。
以后个人学到了更多的知识会分享给大家
- 怎么读js插件代码?
- js插件怎么写?
- 怎么优化js代码
- 怎么扒JS代码?
- js万能图表代码插件
- 一款js代码编辑插件
- Notepad++插件:JS代码格式化
- 代码干货 | JS模块标准怎么这么多?
- 12-JS代码提示插件Aptana安装
- MyEclips中JS代码提示插件(spket)
- 网站代码高亮插件 prettify.js
- Eclipse/MyEclipse Js代码自动提示插件
- myeclipse安装js代码提示插件Spket
- 代码语法高亮插件highlight.js
- MyEclipse集成JS代码提示插件
- 比较好用的js统计插件,js统计代码
- Bounce.js-可视化CSS3动画代码生成js插件
- jQuery DIV圆角插件之jquery.corner.js jQuery插件怎么用?
- angularJS
- 程序崩溃时windbg自动加载程序的设置方法
- Java读取pdf中文
- 分享一个学习 Git 的网站
- hdoj 1406
- 怎么读js插件代码?
- swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css。
- Jmeter之逻辑控制器(Logic Controller)
- Android app安装过程分析(基于Nougat)
- 在数据库中,查询出xxx中字符串长度大于多少的记录
- SO_SNDLOWAT socket option & all socket option
- linux日常小命令
- POJ
- 如何导出java的api文档