- 浏览: 662646 次
- 性别:
- 来自: 安徽
文章分类
- 全部博客 (252)
- Html/Div+CSS (12)
- Js/Jquery (34)
- Flex (2)
- Ajax (3)
- Java (35)
- C# (15)
- Spring (16)
- Hibernate (13)
- Struts2 (12)
- Struts1 (7)
- DWR (1)
- iBatis/myBatis (9)
- Tag(JSTL、EL) (1)
- Android (44)
- SQL (7)
- SEO (7)
- Exception (3)
- Tool (10)
- Other (3)
- WebService (9)
- Apache (7)
- Ext (0)
- Utils (12)
- thinking in programme (2)
- Hadoop (0)
- ActiveMQ (0)
- HTML5/CSS3 (0)
- WPF (1)
- NodeJs (1)
- 设计模式 (0)
- 程序人生 (1)
- 随笔 (1)
- Linux (1)
- Load Balance (0)
最新评论
-
drinkjava2:
太复杂了而且不通用,利用ThreadLocal可完美解决这一问 ...
JDBC的多条件动态查询 -
u013107014:
multipartRequest.getFiles(" ...
多文件上传 by MultipartFile and Multiple -
liyys:
可惜没讲你mysql数据库的表的设计
iBatis入门 -
Mapple_leave:
效果还是挺不错的,谢谢了。
中文简体与繁体的转换 -
arcpad:
JS禁用浏览器退格键
看了 http://my249645546.iteye.com/blog/1716629 上的这篇文章感觉挺好的,所以决定转过来,谢谢这位博主。
很多人觉得jquery、ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲。其实我个人感觉主要是有几个方面的原因:
1、对一些js不常用的语法、操作符不熟悉
2、某个function中又嵌套了一些内部的function,使得整个代码的层次结构不像java代码那么清晰。
3、js中允许变量先使用后定义,会造成我们看代码时候忽然冒出来一个变量、function,却找不到是在哪里定义的。
那么今天给大家分享一下我的经验,扫清你的障碍。
一、一些晦涩的操作符:
1、(function(){})();
几乎所有的开源js代码开篇都是这样(function(……){……})(……);
下面是Jquery的部分源码:
(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);
那么这个操作符(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后面,使用“,”一次定义了很多个变量。
但是,像下面的代码,可能大家就不一定看得懂了:
//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
这里的“nameInput.show(),value=nameInput.val()”中的“,”运算符的作用是返回","右侧表达式的值。所以,return 后面如果有多个表达式,且表达式之间由","隔开,整个return表达式返回的是最后一个","右侧的表达式的值。
“,”在开源代码中常常被用于return表达式中,以及跟下面我们要讲到的"()"运算符一起使用。
3、“()”广义上的代码包装
我们遇到复杂的逻辑表达式时,我们通常会把需要一起运算的表达式用“()”包起来:(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的值。
4、||、&&、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在里面。这些表达式在执行过程中,有可以进行某些附加操作。比如我们希望这个表达式为真值的时候我们做什么,假值的时候做什么,把这些操作用"()"、","串起来作为一个整体运算。
于是就有了上面的复杂代码。
我们来看个实例吧。是上面例子的升级版。我们加入一个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输入框或者输入框没有值!”字符串。
谈了这些难以理解的运算符后,大家可能会觉得,这个javascript为什么要搞这些晦涩的运算符呢?
我的理解是因为javascript通常在客户端运行,那么从服务器端将js代码传输到客户端肯定需要耗时。上面的这些运算符都是为了减少代码量。再加上使用压缩工具去掉空格,替换变量名,就可以使用压缩率达到最好。
发表评论
-
js怎么控制textarea滚动条定位在光标的位置
2014-05-27 15:10 2147如题:先blur,后focus。 ... -
js 禁止鼠标滑轮滚动的事件
2014-05-22 19:00 1813如题,代码如下: // left: 37, up: ... -
网页上“分享”的实现
2012-12-06 13:40 952看看网页上分享是如何实现的吧 http://www.j ... -
用iframe模拟ajax上传文件
2012-12-05 08:57 2395项目中同事使用AjaxFrom上传文件时后台保存成功,而前台确 ... -
jquery.validationEngine
2012-12-04 09:07 3970在项目中表单的验证的选 ... -
AjaxFrom
2012-11-30 13:24 1027项目中使用了AjaxFrom,静下心来看了看AjaxFr ... -
打开对话框时,设置焦点到 input 域失效
2012-12-25 08:22 1582当打开对话框时,想设置焦点到 input 域。使用的是 ... -
js锚点定位
2012-09-09 22:09 1738<a name="ST"> ... -
JQuery获取Radio选中的值
2012-08-31 14:57 2103JS: var type = $("input:[ ... -
使用jQuery清空file文件域的方法
2012-11-08 08:54 1081一般来说,在对一个文件域(input type=”file”) ... -
input提示
2012-08-21 16:46 1326效果图: 代码: <!DOCTYPE html ... -
JS(DOM)对象和JQuery对象的相互转换
2012-08-17 00:06 2715在项目中如果涉及js操作比较多的时候,经常需要js对象和jqu ... -
判断某个元素是否在js数组中
2012-08-16 10:43 0Array.prototype.S = String.fro ... -
SCRIPT1028: Expected identifier, string or number
2012-07-18 00:18 3391解决方案是因为js里的逗号多了一个。 "requi ... -
JS中的replaceAll方法
2012-03-16 16:25 2707今天做项目时遇到这样一个问题,就是说需要将字符串中的某个字符全 ... -
IE8下的一个另类
2012-03-15 16:55 1184今天项目中遇到一个问题,发现在IE8下的这段代码: var ... -
Js/JQuery 获取下拉框值
2012-02-17 21:19 2591今天做项目时,遇到获取下拉框选项的值,发现一个没太注意的 ... -
JS实现关键词高亮
2012-02-09 21:04 4328想起以前做博客系统时,对搜索时的关键字做高亮时没搞出来,无聊之 ... -
【转】现在浏览器的工作原理
2012-02-07 22:21 1412简介 浏览器可以被认为是使用最广泛的软件,本文将介绍浏 ... -
js设置页面没有鼠标右击
2012-02-01 23:14 1400以前在做WebQQ的时候涉及到鼠标右击没有反应的功能,虽然很久 ...
相关推荐
资源名:jQuery图片批量上传插件源码 资源类型:程序源代码 源码说明:实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复上传,且不能移除 使用方法 界面顶部引入IMGUP....
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jQuery全屏滚动插件fullPage.js示例源码,支持全屏、自动、上下、左右滚动
jQuery星级评分插件源码 简单实用.zip
jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。
基于jquery的imgbox图片预览插件Demo源码
使用cookies将我们最近选择的一个主题保存、方便我们下一次登录时看到的还是我们上次选择的主题。
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
基于jquery的评论回复插件源码,一个页面显示评论框,输入评论,直接显示到下方评论列表,点击评论列表中的单挑评论后面的回复,可以弹出回复框,输入内容,点击发送,马上可以看到回复内容,适合前端用。
jquery音乐播放器插件jplayer源码.zip
弹窗,jQuery js 提示框 确认框 消息框 HTML 前端 样式 jquery.alert.js alert jquery.alert.js 弹窗,jQuery js 提示框 确认框 消息框 HTML 前端 样式 弹窗,jQuery js 提示框 确认框 消息框 HTML 前端 样式
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
jquery-formdata-master js上传插件源码,有些浏览器不支持formdata,可以通过当前插件来实现formdata,有需要的小伙伴可以下载
JQuery资源包和源码以及插件,一共有三个版本,jquery-3.3.1.js,jquery-2.1.0.js,jquery-1.11.0.js
此Jquery插件实现了3D旋转图片立体展示幻灯片插件,功能非常酷。有兴趣的同学可以试着做一下。 包括了以下功能: 1、可支持鼠标滚轮控制图片360度旋转 2、鼠标支持左右方向控制按钮来控制图片旋转的方向 3、...
里面包含最新的jQuery UI插件jquery-1.6.2.min.js,jquery-ui-1.8.16.custom.min.js,jquery-ui-1.8.16.custom.css。
js jquery无刷新上传插件及实现源码 两种uploadFile 和Uploadify
js特效脚本含源码和说明横向jQuery内容滚动插件Sly本资源系百度网盘分享地址
您想在您的网页上显示一个...您想学习jQuery插件开发吗?剥求您把我收了吧,而且本人还会提供技术支持哦。 本压缩包内容: api文档,一看就懂 src源码,有注释,您可以自己学习,自己修改。 demo示例,超简单的演示程序
pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的,旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。演示地址:http://www.jq22.com/jquery-info573