您的位置:首页 > Web前端 > JavaScript

【转】超实用的JavaScript技巧及最佳实践

2016-08-19 12:43 239 查看
  众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS、Wakanda以及其它实现。此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西。



  在这篇文章中,作者将会向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会让你受益的。

  文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

  1.第一次给变量赋值时,别忘记var关键字

  给一个未声明的变量赋值,该变量会被自动创建为全局变量,在JS开发中,应该避免使用全局变量。

  2.使用===替换==

  并且永远不要使用=或!=。

  3.使用分号来作为行终止字符

  在行终止的地方使用分号是一个很好的习惯,即使开发人员忘记加分号,编译器也不会有任何提示,因为在大多数情况下,JavaScript解析器会自动加上。

  4.创建构造函数

  5.应当小心使用typeof、instanceof和constructor

  6.创建一个Self-calling函数

  这通常会被称为自我调用的匿名函数或立即调用函数表达式(LLFE)。当函数被创建的时候就会自动执行,好比下面这个:

  7.给数组创建一个随机项

  8.在特定范围里获得一个随机数

  下面这段代码非常通用,当你需要生成一个假的数据用来测试时,比如在最低工资和最高之前获取一个随机值。

  9.在数字0和最大数之间生成一组随机数

  10.生成一组随机的字母数字字符

  11.打乱数字数组

  12.字符串tim函数

  trim函数可以删除字符串的空白字符,可以用在Java、C#、PHP等多门语言里。

  13.数组追加

  14.将参数对象转换为数组

  15.验证一个给定参数是否为数字

  16.验证一个给定的参数为数组

  注意,如果toString()方法被重写了,你将不会得到预期结果。

  或者你可以这样写

  同样,如果你使用多个frames,你可以使用instancesof,如果内容太多,结果同样会出错。

  17.从数字数组中获得最大值和最小值

  18.清空数组

  19.不要用delete从数组中删除项目

  开发者可以使用split来代替使用delete来删除数组项。与其删除数组中未定义项目,还不如使用delete来替代。

  也可以……

  delete方法应该删除一个对象属性

  20.使用length属性缩短数组

  如上文提到的清空数组,开发者还可以使用length属性缩短数组。

  如果你所定义的数组长度值过高,那么数组的长度将会改变,并且会填充一些未定义的值到数组里,数组的length属性不是只读的。

  文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

  1.使用逻辑符号&&或者||进行条件判断

  AND也可以用来设置函数参数的默认值

  2.使用map()方法来遍历数组

  3.舍入小数位数

  4.浮点数问题

  0.1+0.2等于0.30000000000000004,为什么会发生这种情况?根据IEEE754标准,你需要知道的是所有JavaScript数字在64位二进制内的都表示浮点数。开发者可以使用toFixed()和toPrecision()方法来解决这个问题。

  5.使用for-in loop检查遍历对象属性

  下面这段代码主要是为了避免遍历对象属性。

  6.逗号操作符

  7.计算或查询缓存变量

  在使用jQuery选择器的情况下,开发者可以缓存DOM元素

  8.在将参数传递到isFinite()之前进行验证

  9.在数组中避免负向索引

  确保参数传递到indexOf()方法里是非负向的。

  10.(使用JSON)序列化和反序列化

  11.避免使用eval()或Function构造函数

  eval()和Function构造函数被称为脚本引擎,每次执行它们的时候都必须把源码转换成可执行的代码,这是非常昂过的操作。

  12.避免使用with()方法

  如果在全局区域里使用with()插入变量,那么,万一有一个变量名字和它名字一样,就很容易混淆和重写。

  13.避免在数组里使用for-in loop

  而不是这样用:

  这样会更好:

  这样会更快:

  为什么?数组长度arraynNumbers在每次loop迭代时都会被重新计算。

  14.不要向setTimeout()和setInterval()方法里传递字符串

  如果在这两个方法里传递字符串,那么字符串会像eval那样重新计算,这样速度就会变慢,而不是这样使用:

  相反,应该这样用:

  15.使用switch/case语句代替较长的if/else语句

  如果有超过2个以上的case,那么使用switch/case速度会快很多,而且代码看起来更加优雅。

  16.遇到数值范围时,可以选用switch/casne

  17.创建一个对象,该对象的属性是一个给定的对象

  可以编写一个这样的函数,创建一个对象,该对象属性是一个给定的对象,好比这样:

  18.一个HTML escaper函数

  19.在一个loop里避免使用try-catch-finally

  try-catch-finally在当前范围里运行时会创建一个新的变量,在执行catch时,捕获异常对象会赋值给变量。

  不要这样使用:

  应该这样使用:

  20.给XMLHttpRequests设置timeouts

  如果一个XHR需要花费太长时间,你可以终止链接(例如网络问题),通过给XHR使用setTimeout()解决。

  此外,通常你应该完全避免同步Ajax调用。

  21.处理WebSocket超时

  一般来说,当创建一个WebSocket链接时,服务器可能在闲置30秒后链接超时,在闲置一段时间后,防火墙也可能会链接超时。

  为了解决这种超时问题,你可以定期地向服务器发送空信息,在代码里添加两个函数:一个函数用来保持链接一直是活的,另一个用来取消链接是活的,使用这种方法,你将控制超时问题。

  添加一个timeID……

  keepAlive()方法应该添加在WebSocket链接方法onOpen()的末端,cancelKeepAlive()方法放在onClose()方法下面。

  22.记住,最原始的操作要比函数调用快

  对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。

  例如

  基本操作方式:

  23.编码时注意代码的美观、可读

  JavaScript是一门非常好的语言,尤其对于前端工程师来说,JavaScript也非常重要,点击 这里可以访问更多优秀的JavaScript资源。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: