给JavaScript初学者的24条最佳实践

2019年11月19日 阅读数:148
这篇文章主要向大家介绍给JavaScript初学者的24条最佳实践,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
­
给JavaScript初学者的24条最佳实践

本文由 伯乐在线 - yanhaijing 翻译。未经许可,禁止转载!
做为“ 30 HTML和CSS最佳实践” 的后续,这篇文章将回顾JavaScript的知识 !若是你看完了下面的内容,请务必让咱们知道你掌握的小技巧!

 

1.使用 === 代替 ==

JavaScript 使用2种不一样的等值运算符:===|!== 和 ==|!=,在比较操做中使用前者是最佳实践。javascript

“若是两边的操做数具备相同的类型和值,===返回true,!==返回false。”——《JavaScript:语言精粹》php

然而,当使用==和!=时,你可能会遇到类型不一样的状况,这种状况下,操做数的类型会被强制转换成同样的再作比较,这可能不是你想要的结果。css

 

2.Eval=邪恶

起初不太熟悉时,“eval”让咱们可以访问JavaScript的编译器(译注:这看起来很强大)。从本质上讲,咱们能够将字符串传递给eval做为参数,而执行它。html

这不只大幅下降脚本的性能(译注:JIT编译器没法预知字符串内容,而没法预编译和优化),并且这也会带来巨大的安全风险,由于这样付给要执行的文本过高的权限,避而远之。前端

 

3.省略未必省事

从技术上讲,你能够省略大多数花括号和分号。大多数浏览器都能正确理解下面的代码:html5

JavaScript
1
2
if ( someVariableExists )   
   x = false

而后,若是像下面这样:java

Shell
1
2
3
if ( someVariableExists )   
   x = false   
   anotherFunctionCall ( ) ;

有人可能会认为上面的代码等价于下面这样:jquery

Shell
1
2
3
4
if ( someVariableExists ) {   
   x = false ;   
   anotherFunctionCall ( ) ;   
}

不幸的是,这种理解是错误的。实际上的意思以下:git

Shell
1
2
3
4
if ( someVariableExists ) {   
   x = false ;   
}   
anotherFunctionCall ( ) ;

你可能注意到了,上面的缩进容易给人花括号的假象。无可非议,这是一种可怕的实践,应不惜一切代价避免。仅有一种状况下,即只有一行的时候,花括号是能够省略的,但这点是饱受争议的。github

Shell
1
if ( 2 + 2 === 4 ) return 'nicely done' ;

未雨绸缪

极可能,有一天你须要在if语句块中添加更多的语句。这样的话,你必须重写这段代码。底线——省略是雷区。

 

4.使用JSLint

JSLint是由大名鼎鼎的道格拉斯(Douglas Crockford)编写的调试器。简单的将你的代码粘贴进JSLint中,它会迅速找出代码中明显的问题和错误。

“JSLint扫面输入的源代码。若是发现一个问题,它返回一条描述问题和一个代码中的所在位置的消息。问题并不必定是语法错误,尽管一般是这样。JSLint还会查看一些编码风格和程序结构问题。这并不能保证你的程序是正确的。它只是提供了另外一双帮助发现问题的眼睛。”——JSLing 文档

部署脚本以前,运行JSLint,只是为了确保你没有作出任何愚蠢的错误。

 

5.将脚本放在页面的底部

在本系列前面的文章里已经提到过这个技巧,我粘贴信息在这里。

 

记住——首要目标是让页面尽量快的呈献给用户,脚本的夹在是阻塞的,脚本加载并执行完以前,浏览器不能继续渲染下面的内容。所以,用户将被迫等待更长时间。

若是你的js只是用来加强效果——例如,按钮的单击事件——立刻将脚本放在body结束以前。这绝对是最佳实践。

建议

Shell
1
2
3
4
5
< p > And now you know my favorite kinds of corn . < / p >   
<script type = "text/javascript" src = "path/to/file.js" > </script>   
<script type = "text/javascript" src = "path/to/anotherFile.js" > </script>   
< / body >   
< / html >

6.避免在For语句内声明变量

当执行冗长的for语句时,要保持语句块的尽可能简洁,例如:

糟糕

Shell
1
2
3
4
5
for ( var i = 0 ; i < someArray .length ; i ++ ) {   
   var container = document .getElementById ( 'container' ) ;   
   container .innerHtml += 'my number: ' + i ;   
   console .log ( i ) ;   
}

注意每次循环都要计算数组的长度,而且每次都要遍历dom查询“container”元素——效率严重地下!

建议

Shell
1
2
3
4
5
var container = document .getElementById ( 'container' ) ;   
for ( var i = 0 , len = someArray .length ; i < len ;    i ++ ) {   
   container .innerHtml += 'my number: ' + i ;   
   console .log ( i ) ;   
}

感兴趣能够思考如何继续优化上面的代码,欢迎留下评论你们分享。

 

7.构建字符串的最优方法

当你须要遍历数组或对象的时候,不要总想着“for”语句,要有创造性,总能找到更好的办法,例如,像下面这样。

Shell
1
2
var arr = [ 'item 1' , 'item 2' , 'item 3' , . . . ] ;   
var list = '<ul><li>' + arr .join ( '</li><li>' ) + '</li></ul>' ;

 我不是你心中的神,但请你相信我(不信你本身测试)——这是迄今为止最快的方法!使用原生代码(如 join()),无论系统内部作了什么,一般比非原生快不少。——James Padolsey, james.padolsey.com

 

8.减小全局变量

 只要把多个全局变量都整理在一个名称空间下,拟将显著下降与其余应用程序、组件或类库之间产生糟糕的相互影响的可能性。——Douglas Crockford

Shell
1
2
3
4
5
6
var name = 'Jeffrey' ;   
var lastName = 'Way' ;   
 
function doSomething ( ) { . . . }   
 
console .log ( name ) ; / / Jeffrey -- window .name

更好的作法

Shell
1
2
3
4
5
6
var DudeNameSpace = {   
   name : 'Jeffrey' ,   
   lastName : 'Way' ,   
   doSomething : function ( ) { . . . }   
}   
console .log ( DudeNameSpace .name ) ; / / Jeffrey

注:这里只是简单命名为 “DudeNameSpace”,实际当中要取更合理的名字。

 

 9.给代码添加注释

彷佛没有必要,当请相信我,尽可能给你的代码添加更合理的注释。当几个月后,重看你的项目,你可能记不清当初你的思路。或者,假如你的一位同事须要修改你的代码呢?总而言之,给代码添加注释是重要的部分。

JavaScript
1
2
3
4
// 循环数组,输出每项名字(译者注:这样的注释彷佛有点多余吧).  
for ( var i = 0 , len = array . length ; i < len ; i ++ ) {   
   console . log ( array [ i ] ) ;   
}

 10.拥抱渐进加强

确保javascript被禁用的状况下能平稳退化。咱们老是被这样的想法吸引,“大多数个人访客已经启用JavaScript,因此我没必要担忧。”然而,这是个很大的误区。

你可曾花费片刻查看下你漂亮的页面在javascript被关闭时是什么样的吗?(下载 Web Developer 工具就能很容易作到(译者注:chrome用户在应用商店里自行下载,ie用户在Internet选项中设置)),这有可能让你的网站支离破碎。做为一个经验法则,设计你的网站时假设JavaScript是被禁用的,而后,在此基础上,逐步加强你的网站。

 

11.不要给”setInterval”或”setTimeout”传递字符串参数

考虑下面的代码:

Shell
1
2
3
setInterval (   
"document.getElementById('container').innerHTML += 'My new number: ' + i" , 3000   
) ;

不只效率低下,并且这种作法和”eval”一模一样。从不给setInterval和setTimeout传递字符串做为参数,而是像下面这样传递函数名。

Shell
1
setInterval ( someFunction , 3000 ) ;

12.不要使用”with”语句

乍一看,”with”语句看起来像一个聪明的主意。基本理念是,它能够为访问深度嵌套对象提供缩写,例如……

Shell
1
2
3
4
with ( being .person .man .bodyparts ) {   
   arms = true ;   
   legs = true ;   
}

而不是像下面这样:

Shell
1
2
being .person .man .bodyparts .arms = true ;   
being .person .man .bodyparts .legs = true ;

不幸的是,通过测试后,发现这时“设置新成员时表现得很是糟糕。做为代替,您应该使用变量,像下面这样。

Shell
1
2
3
var o = being .person .man .bodyparts ;   
o .arms = true ;   
o .legs = true ;

13.使用{}代替 new Ojbect()

在JavaScript中建立对象的方法有多种。多是传统的方法是使用”new”加构造函数,像下面这样:

Shell
1
2
3
4
5
6
var o = new Object ( ) ;   
o .name = 'Jeffrey' ;   
o .lastName = 'Way' ;   
o .someFunction = function ( ) {   
   console .log ( this .name ) ;   
}

然而,这种方法的受到的诟病不及实际上多。做为代替,我建议你使用更健壮的对象字面量方法。

更好的作法

Shell
1
2
3
4
5
6
7
var o = {   
   name : 'Jeffrey' ,   
   lastName = 'Way' ,   
   someFunction : function ( ) {   
       console .log ( this .name ) ;   
   }   
} ;

注意,果你只是想建立一个空对象,{}更好。

Shell
1
var o = { } ;

“对象字面量使咱们可以编写更具特点的代码,并且相对简单的多。不须要直接调用构造函数或维持传递给函数的参数的正确顺序,等”——dyn-web.com

 

14.使用[]代替 new Array()

这一样适用于建立一个新的数组。

例如:

Shell
1
2
3
var a = new Array ( ) ;   
a [ 0 ] = "Joe" ;   
a [ 1 ] = 'Plumber' ;

更好的作法:

Shell
1
var a = [ 'Joe' , 'Plumber' ] ;

“javascript程序中常见的错误是在须要对象的时候使用数组,而须要数组的时候却使用对象。规则很简单:当属性名是连续的整数时,你应该使用数组。不然,请使用对象”——Douglas Crockford

 

15.定义多个变量时,省略var关键字,用逗号代替

Shell
1
2
3
var someItem = 'some string' ;   
var anotherItem = 'another string' ;   
var oneMoreItem = 'one more string' ;

更好的作法

Shell
1
2
3
var someItem = 'some string' ,   
     anotherItem = 'another string' ,   
     oneMoreItem = 'one more string' ;

…应而不言自明。我怀疑这里真的有所提速,但它能是你的代码更清晰。

 

(很差意思,第16 条被做者吃掉了)

 

17.谨记,不要省略分号

从技术上讲,大多数浏览器容许你省略分号。

Shell
1
2
3
4
var someItem = 'some string'   
function doSomething ( ) {   
   return 'something'   
}

已经说过,这是一个很是糟糕的作法可能会致使更大的,难以发现的问题。

更好的作法

Shell
1
2
3
4
var someItem = 'some string' ;   
function doSomething ( ) {   
   return 'something' ;   
}

18.”For in”语句

当遍历对象的属性时,你可能会发现还会检索方法函数。为了解决这个问题,总在你的代码里包裹在一个if语句来过滤信息。

Shell
1
2
3
4
5
for ( key in object ) {   
   if ( object .hasOwnProperty ( key ) {   
       . . .then do something . . .   
   }   
}

参考 JavaScript:语言精粹,道格拉斯(Douglas Crockford)。

 

19.使用Firebug的”timer”功能优化你的代码

在寻找一个快速、简单的方法来肯定操做须要多长时间吗?使用Firebug的“timer”功能来记录结果。
Shell
1
2
3
4
5
function TimeTracker ( ) {   
console .time ( "MyTimer" ) ;   
for ( x = 5000 ; x > 0 ; x -- ) { }   
console .timeEnd ( "MyTimer" ) ;   
}

20.阅读,阅读,反复阅读

虽然我是一个巨大的web开发博客的粉丝(像这样!),午饭之余或上床睡觉以前,实在没有什么比一本书更合适了,坚持放一本web开发方面书在你的床头柜。下面是一些我最喜好的JavaScript书籍。

读了他们……屡次。我仍将继续!

 

21.自执行函数

和调用一个函数相似,它很简单的使一个函数在页面加载或父函数被调用时自动运行。简单的将你的函数用圆括号包裹起来,而后添加一个额外的设置,这本质上就是调用函数。

Shell
1
2
3
4
5
6
( function doSomething ( ) {   
   return {   
       name : 'jeff' ,   
       lastName : 'way'