45个实用的JavaScript技巧、窍门和最佳实践
2014-01-04 19:48
387 查看
在这篇文章中,我将分享一组JavaScript的技巧、窍门和最佳实践,这些都是JavaScript程序员应该知晓的,不管他们是使用在浏览器/引擎上,还是服务器端(SSJS——Service Side JavaScript)JavaScript解释器上。
【译者注:原文作者总共写了44条(漏写了第3条),译者自己补了一条觉得比较重要的技巧。】需要注意的是,这篇文章中的代码片段都在最新的Google Chrome(版本号30)上测试过,它使用V8 JavaScript引擎(V8 3.20.17.15)
1 – 在第一次给一个变量赋值的时候不要忘记使用
var关键字
给一个未定义的变量赋值会导致创建一个全局变量。要避免全局变量。
2 – 使用===,而不是==
==(或!=)操作符在需要的时候会自动执行类型转换。===(或!==)操作不会执行任何转换。它将比较值和类型,而且在速度上也被认为优于==。
在语句结尾处使用分号是一个很好的实践。如果你忘记写了你也不会被警告,因为多数情况下JavaScript解释器会帮你加上分号。
5 – 创建对象的构造函数
这个经常被称为自调用匿名函数(Self-Invoked Anonymous Function)或者即时调用函数表达式(IIFE-Immediately Invoked Function Expression)。这是一个在创建后立即自动执行的函数,通常如下:
这个代码片段在你想要生成测试数据的时候非常有用,比如一个在最小最大值之间的一个随机薪水值。
12 – 打乱一个数字数组
在Java、C#、PHP和很多其他语言中都有一个经典的 trim 函数,用来去除字符串中的空格符,而在JavaScript中并没有,所以我们需要在String对象上加上这个函数。
14 – 附加(append)一个数组到另一个数组上
15 – 将arguments对象转换成一个数组
16 – 验证参数是否是数字(number)
18 – 获取一个数字数组中的最大值或最小值
19 – 清空一个数组
使用 splice 而不要使用 delete 来删除数组中的某个项。使用 delete 只是用 undefined 来替换掉原有的项,并不是真正的从数组中删除。
不要使用这种方式:
21 – 使用 length 来截短一个数组
跟上面的清空数组的方式类似,我们使用 length 属性来截短一个数组。
toFixed() 和 toPrecision() 方法解决这个问题。
26 – 使用for-in遍历一个对象内部属性的时候注意检查属性
下面的代码片段能够避免在遍历一个对象属性的时候访问原型的属性
对于jQuery选择器,我们最好缓存这些DOM元素。
31 – 基于JSON的序列化和反序列化(serialization and deserialization)
使用 eval 和 Function 构造函数是非常昂贵的操作,因为每次他们都会调用脚本引擎将源代码转换成可执行代码。
使用 with() 会插入一个全局变量。因此,同名的变量会被覆盖值而引起不必要的麻烦。
34 – 避免使用 for-in 来遍历一个数组
避免使用这样的方式:
35 – 在调用 setTimeout() 和 setInterval() 的时候传入函数,而不是字符串。
如果你将字符串传递给 setTimeout() 或者 setInterval(),这个字符串将被如使用 eval 一样被解析,这个是非常耗时的。
不要使用:
在判断情况大于2种的时候,使用 switch/case 更高效,而且更优雅(更易于组织代码)。但在判断的情况超过10种的时候不要使用 switch/case。
【译者注:查了一下文献,大家可以看一下这篇介绍】
37 – 在判断数值范围时使用 switch/case
在下面的这种情况,使用 switch/case 判断数值范围的时候是合理的:
38 – 为创建的对象指定prototype对象
写一个函数来创建一个以指定参数作为prototype的对象是有可能:
在运行时,每次当 catch 从句被执行的时候,被捕获的异常对象会赋值给一个变量,而在 try-catch-finally 结构中,每次都会新建这个变量。
避免这样的写法:
在一个XHR请求占用很长时间后(比如由于网络问题),你可能需要中止这次请求,那么你可以对XHR调用配套使用 setTimeout()。
42 – 处理WebSocket超时
通常,在一个WebSocket连接创建之后,如果你没有活动的话,服务器会在30秒之后断开(time out)你的连接。防火墙也会在一段时间不活动之后断开连接。
为了防止超时的问题,你可能需要间歇性地向服务器端发送空消息。要这样做的话,你可以在你的代码里添加下面的两个函数:一个用来保持连接,另一个用来取消连接的保持。通过这个技巧,你可以控制超时的问题。
使用一个 timerID:
43 – 牢记,原始运算符始终比函数调用要高效。使用VanillaJS。
举例来说,不使用:
45 – JavaScript是不可思议的。最好的JavaScript学习资源。
总结
我知道还有很多其他的技巧,窍门和最佳实践,所以如果你有其他想要添加或者对我分享的这些有反馈或者纠正,请在评论中指出。
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- 从jsp发送动态图像
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- 仿51JOB的地区选择效果(可选择多个地区)
- js身份证验证超强脚本
- 28个JS验证函数收集
- js继承 Base类的源码解析
- js禁用和激活input表单的方法
- JS小框架 fly javascript framework
- js可拖动的后台界面
- javascript 获取网页参数系统