- 浏览: 158282 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
18335864773:
推荐用户国内自主研发的组件 pageoffice 组件生成 e ...
java 导出Excel poi 实现 -
nijinglie:
这个jsp页面具体怎么写????
java 导出Excel poi 实现 -
fxwjsw:
Array.prototype.distinct = func ...
js数组去除重复项目 -
ae6623:
讲的很好!!赞一个,嗯是图片向上滚动了-100px;这就好理解 ...
css背景定位技术 -
qieyi28:
呵呵
javascript &的秒用
这两天改造一个代码,看到成千行的js代码,而且很多代码都是使if else的迭代,庸长得很是让人头痛,之前看到别人用&符号来解决这类问题,我现在把方法粘贴到这里
首先出个题:
成长速度 5 1 1 1 1 1
如图:
假设对成长速度显示规定如下:
成长速度为5 显示1 个箭头;
成长速度为10 显示2 个箭头;
成长速度为12 显示3 个箭头;
成长速度为15 显示4 个箭头;
其他都显示都显示0 各箭头。
用代码怎么实现?
差一点的if ,else :
- var add_level = 0;
- if(add_step == 5){
- add_level = 1;
- }
- else if(add_step == 10){
- add_level = 2;
- }
- else if(add_step == 12){
- add_level = 3;
- }
- else if(add_step == 15){
- add_level = 4;
- }
- else {
- add_level = 0;
- }
稍好些的switch :
- var add_level = 0;
- switch(add_step){
- case 5 : add_level = 1;
- break;
- case 10 : add_level = 2;
- break;
- case 12 : add_level = 3;
- break;
- case 15 : add_level = 4;
- break;
- default : add_level = 0;
- break;
- }
如果需求改成:
成长速度为>12 显示4 个箭头;
成长速度为>10 显示3 个箭头;
成长速度为>5 显示2 个箭头;
成长速度为>0 显示1 个箭头;
成长速度为<=0 显示0 个箭头。
那么用switch 实现起来也很麻烦了。
那么你有没有想过用一行就代码实现呢?
ok ,让我们来看看js 强大的表现力吧:
- var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
更强大的,也更优的:
- var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
第二个需求:
- var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
首先我们来梳理一下一个概念,请你一定要记住:在js
逻辑运算中,0
、""
、null
、false
、undefined
、NaN
都会判为false
,其他都为true
(好像没有遗漏了吧,请各位确认下)。这个一定要记住,不然应用||
和&&
就会出现问题。
这里顺便提下:经常有人问我,看到很多代码if(!!attr)
,为什么不直接写if(attr)
;
其实这是一种更严谨的写法:
请测试 typeof 5
和typeof !!5
的区别。!!
的作用是把一个其他类型的变量转成的bool
类型。
下面主要讨论下逻辑运算符&&
和||
。
几乎所有语言中||
和&&
都遵循“
短路”
原理,如&&
中第一个表达式为假就不会去处理第二个表达式,而||
正好相反。
js
也遵循上述原则。但是比较有意思的是它们返回的值。
代码:var attr = true && 4 && “aaa”;
那么运行的结果attr
就不是简单的true
或这false
,而是”aaa”
再来看看||
:
代 码:var attr = attr || “”;
这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值,这在给函数的参数定义一个默认值的时候比较有用。因为js
不像php
可以 直接在型参数上定义func($attr=5)
。再次提醒你记住上面的原则:如果实参需要是0
、""
、null
、false
、undefined
、NaN
的时候也会当false
来处理。
if(a >=5){
alert("
你好");
}
可以写成:
a >= 5 && alert("
你好");
这样只需一行代码就搞定。但是需要注意的一点就是:js
中||
和&&
的特性帮我们精简了代码的同时,也带来了代码可读性的降低。这就需要我们自己来权衡了。
一方面精简js
代码,能实质性的减少网络流量,尤其是大量应用的js
公用库。个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。这个和正在表达式一样,能够精简代码,但是可读性会降低,对读代码的人要求会高些,最好的办法就是写注释。
我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,尤其是像JQuery 等js 框里的代码,不理解这些你就很难看懂别人的代码。
像var Yahoo = Yahoo || {}; 这种是非常广泛应用的。
ok, 最后让我们来看一段jQuery 中的代码吧:
- var wrap =
- // option or optgroup
- !tags.indexOf("<opt") &&
- [ 1, "<select multiple='multiple'>", "</select>" ] ||
- !tags.indexOf("<leg") &&
- [ 1, "<fieldset>", "</fieldset>" ] ||
- tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
- [ 1, "<table>", "</table>" ] ||
- !tags.indexOf("<tr") &&
- [ 2, "<table><tbody>", "</tbody></table>" ] ||
- // <thead> matched above
- (!tags.indexOf("<td") || !tags.indexOf("<th")) &&
- [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] ||
- !tags.indexOf("<col") &&
- [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] ||
- // IE can't serialize <link> and <script> tags normally
- !jQuery.support.htmlSerialize &&
- [ 1, "div<div>", "</div>" ] ||
- [ 0, "", "" ];
- // Go to html and back, then peel off extra wrappers
- div.innerHTML = wrap[1] + elem + wrap[2];
- // Move to the right depth
- while ( wrap[0]-- )
- div = div.lastChild;
这段代码是作者用来处理 $(html) 时,有些标签必须要约束的,如<option> 必须在<select></select> 之内的。
可能你也发现了作者还有一个很巧的地方就是 !tags.indexOf("<opt") ,作者很巧很简单的就实现了startWith 的功能了,没有一点多余的代码。jquery 源代码中还有很多如此精妙的代码,大家可以去学习学习。
发表评论
-
jsp 页面自适应From表单
2015-05-14 15:48 946最近接了个烂项目,虽然有很多不如意的地方,但 ... -
Js apply() call() 使用详解
2015-05-02 17:52 620今天在学习Extjs5的时候,发现Extjs5用 ... -
css3 文字自适应浏览器大小
2014-02-27 23:50 8569<!DOCTYPE HTML> <h ... -
js和jquery 加载页面后再执行的区别
2014-02-11 14:57 1451一般加载页面后再执行javascript程序有下 ... -
创建焦点索引输入框
2013-05-31 15:31 732这里要用到JQUERY的一个关键函数 autoco ... -
dwz关闭当前dailog窗口
2013-03-19 14:22 1399dwz dialog链接扩展 <a href=”xxx ... -
js 连接打印机 分页打印案列
2013-03-14 17:25 1560下面是我做的一个分页 ... -
体验js中splice()的强大
2013-01-10 11:15 858处理数组的方法很多,splice()算是最强大的了,它可以用于 ... -
js数组去除重复项目
2013-01-10 11:03 2559很多校招题是没有严格的标准答案的,只有知识点,只要几个关键点能 ... -
jquery tree 官方地址
2012-11-08 18:46 731jquery tree 比较不错的一款插件,在这里推荐了,如下 ... -
js 获取站点应用名
2012-09-26 10:49 1305一直用EL表达式${pageContext.request ... -
呼叫系统的一个思路
2012-07-31 15:10 964我们经常要是使用js进行信息提示, 那么系统怎么来主动提 ... -
ajax缓存的处理
2012-07-30 16:56 756今天解决一个关于ajax 的小问题,经常没注意到,这里 ... -
swfobject 的使用
2012-07-20 09:35 3564应用地址:http://www.lichengyijing.c ... -
ajax中文乱码
2012-07-03 13:53 872今天遇到一问题,在用谷歌浏览器和360浏览器的时候,发现 ... -
jquery ajax 调用java集合 的方法
2012-06-29 11:15 3062我们在用ajax的时候,经常遇到要调取数据集合,然后拼装 ... -
highsChars的相关选择器
2012-06-12 18:33 1101选择对象 var chart = new ... -
json键值对的[] 中括号的使用
2012-05-25 10:06 2544在写代码的时候,我往往因为一个小基础知识点未能掌握好 ,而 ... -
ajax 不同的返回数据方式
2012-03-01 11:42 931这几天,做了一些 ... -
用json格式来调用函数
2012-02-29 08:41 1398对于一些初学js的平朋友来说,可能会经常看到一段函数后跟上 ...
相关推荐
自学了javascript,第一次自己写的一个十秒倒计时的调整页面。。
这里我们将详细探讨三种通过JavaScript实现x秒后自动跳转到一个页面的方法。 1. **直接使用`response.sendRedirect()`**: 这个方法通常在服务器端使用,例如在Java的Servlet中。`response.sendRedirect()`函数...
本文将深入探讨如何使用JavaScript实现一个带时分秒的日历控件。 首先,我们需要理解日历控件的基本结构。一个完整的日历通常包含月份选择、日期选择和时间选择。在JavaScript中,我们可以创建一个HTML结构来展示...
这个控件是用JavaScript语言编写的,还包含了完整的CSS样式和演示(demo),确保其在不同环境下的良好展示和交互体验。 在JavaScript中,处理时间通常涉及到Date对象。Date对象允许我们创建、操作和格式化日期和...
以上就是使用JavaScript实现5秒后自动跳转到首页或其他页面的方法,包括添加倒计时展示。这个功能可以在很多场景下派上用场,如临时通知、限时活动页面等。记得在实际应用中替换`http://www.example.com`为你实际的...
2. **定时器(setTimeout 和 clearInterval)**:为了实现游戏的计时功能,开发者可能使用了JavaScript的`setTimeout`来定期生成子弹,而`clearInterval`用于在游戏结束后停止定时器,防止不必要的资源浪费。...
- **注释**:JavaScript支持单行注释(使用 `//`)和多行注释(使用 `/* */`)。 - **语句**:JavaScript中的语句是由一系列命令组成的,通常以分号结束。 - **代码位置**:JavaScript代码可以写在HTML文档的头部(`...
JavaScript中简易代码获取当前系统时间(年月日小时分钟秒)
JavaScript将时间从秒转换到hh:mm:ss的形式
JavaScript应用实例-设置按钮三秒后才能点击.js
在JavaScript编程中,定时执行一个任务是常见的需求,比如每隔两秒执行一个特定的函数。这个功能可以通过JavaScript的内置函数`setInterval`来实现。`setInterval`允许我们指定一个函数,然后按照设定的时间间隔重复...
在IT领域,特别是前端开发中,JavaScript是一种广泛使用的编程语言,用于实现网页的动态效果、交互性和实时更新等功能。在给定的文件信息中,主要涉及的是一个60秒倒计时的小型JavaScript代码实现。下面,我们将深入...
《是男人就坚持20秒》是一款简单的网页游戏,它利用JavaScript编程语言实现,适合初学者练习和了解JavaScript在网页交互中的应用。游戏的核心概念是挑战玩家的反应速度和耐力,目标是在20秒内尽可能地避开障碍物。在...
4. **动态时钟**:JavaScript可以实时更新页面上的时间,使用`Date`对象可以获取当前日期和时间,并通过`setInterval`函数每秒更新显示。这个例子可以帮助理解如何处理时间和日期的格式化。 5. **日期时间显示**:...
### 使用JavaScript实时显示系统当前时间:深入解析与实践 在现代网页开发中,实时更新页面元素,如显示当前时间,是提升用户体验的关键技术之一。本文将深入探讨如何使用JavaScript实现这一功能,包括代码细节、...
虽然"SkyPlane"可能是使用原生JavaScript编写的,了解这些工具对于进一步提升游戏性能和可维护性非常有帮助。 总的来说,通过分析这个"javascript编写的小游戏",我们可以深入学习JavaScript在游戏开发中的应用,...
通过分析这些案例,你可以了解到如何在实际项目中结合使用jQuery和JavaScript,提高开发效率和代码质量。 学习这些案例时,应重点理解它们是如何利用jQuery的便利性来简化JavaScript代码的,同时也要了解JavaScript...
4. **动态时钟**:动态时钟示例通常会利用JavaScript的`Date`对象来获取当前时间,并且设置定时器每秒更新一次,展示实时的时间。开发者可以自定义时间的格式和显示方式。 5. **日期时间显示**:除了动态时钟,...
- 实现方法:使用JavaScript监听第一个下拉框的选择事件,并根据选择结果动态更新第二个下拉框的内容。 **9. 文本排序** - 描述:对文本内容进行排序。 - 实现方法:使用JavaScript的数组排序方法`sort()`。 ...