js实用黑科技45条助你成为JS大牛(二)
接上半部分:
JavaScript-实用黑科技45条助你成为JS大牛(一)
昨天更新完以后看到评论里说都是些基础,其实本来也都是基础,只是开发中多多少少会忽略,JS大神可以飘过。小编本来也是半路开始自学的前端,先学的jQuery,后来才开始学的JavaScript,所以对于原声JavaScript的一些东西不是特别熟悉和理解。希望分享出来给大家,不知道的可以学习一下,知道的温习一下。还有就是知道了,但是在实际项目中往往用的不太好,希望大家都养成良好的编码规范,高效的开发,高效的工作,谢谢大家,不胜感激!
正文开始:
使用 for...in
来遍历对象的属性
下面的代码片段使用 for...in
来遍历对象属性,可以防止遍历到对象原型链上的属性。
逗号运算符
缓存临时变量用于避免再次计算或者查询
在使用jQuery时,我们可以临时缓存整个jq对象,比如
提前检查传入 isFinite()
的参数
避免对数组进行负值索引
注意传给 splice
的索引参数不要是负数,当是负数时,会从数组结尾处删除元素。
使用 JSON
来进行序列化和反序列化
避免使用 eval()
和函数构造器
eval()
和函数构造器( Function
consturctor)的开销都比较大,每次调用JavaScript引擎都要将源代码转换为可执行的代码。
避免使用 with()
使用 with()
语法会将变量注入到全局变量中。因此,如果有重名的变量,就会发生覆盖或者重写的问题。
避免使用 for...in
遍历数组
错误的用法:
更好的做法:
除此之外, i
和 len
是在 for
循环的第一个声明中,二者只会初始化一次,这要比下面这种写法快:
为什么呢?因为数组 arrayNumbers
的长度在每次遍历的时候都会计算一次,这就造成了不必要的消耗。
注意,这个问题其实在最新的Javascript引擎中已经被修复了。
给 setTimeout()
及 setInterval()
传递函数而不是字符串更好
如果你给 setTimeout()
或者 setInterval()
传递字符串的话,那么它内部的执行机制其实是和 eval()
是一样的,这样会比较慢。
错误的用法
正确的用法
使用 switch/case
来代替一坨 if/else
当判断有超过两个分支的时候使用 switch/case
要更快一些,而且也更优雅,更利于代码的组织,当然,如果有超过10个分支,就不要使用 switch/case
了。
在 switch/case
中使用数字范围进行分界
其实 switch/case
中的 case
条件,还可以这样写:
为创建的对象指定原型
下面的示例演示了可以给定对象作为参数,来创建以此为原型的新对象:
html转义函数
不要在循环中使用 try...catch...finally
try...catch...finally
在捕获一个异常时,会创建一个运行时环境的子作用域。而异常变量的生命周期仅限在这个运行时的子作用域。
译者注
这里我们可以使用闭包来保存这个运行时的异常变量。
错误的用法
正确的用法
使用 XMLHttpRequests
时注意设置超时参数
如果一个ajax请求长时间没有响应,我们应该中止请求。否则浏览器将会一直等待。我们可以使用 setTimeout()
来做一个定时器,
除此之外,我们应该避免同时发送多个 同步的 ajax请求。
处理websocket超时
一般地,WebSocket连接创建后,如果30秒内没有任何活动服务器端会对连接进行超时处理,防火墙也可以对单位周期内没有活动的连接进行超时处理。
为了防止超时中断,你需要每隔一段时间发送一个心跳数据(空字符串)以保持websocket连接。下面的两个方法一个用于周期的发送心跳数据保持连接,一个是取消心跳数据包。
keepAlive()
方法应该被添加在 webSOcket
连接的 onOpen()
方法的最后,而 cancelKeepAlive()
添加在 onClose()
方法的最后。
记住:原生操作肯定比函数调用要效率高
比如,
错误的用法,
正确的用法,
编码时注意保持代码的优雅格式,上生产环境前做一些压缩工作。
Javascript是一门很吊的语言,以后本头条号还会更新很多关于Javascript的语言。
本头条号将对以后更新的文章进行归类,以方便大家阅读。比如文章的标题以Bootstrap开头,这篇文章就是关于Bootstrap的。还有一些连载的文章将有单独的标题开头,请各位客官留意。
《前端观察》专注于网站前端设计与前端开发、纯粹的前端技术分享。更多前端文章请订阅本头条号,也可以关注微信订阅号qianduanguancha(长按可复制)