15条JavaScript最佳实践很经典噢

感受比较经典，特转载腾讯大讲堂。本文档整理大部分公认的、或者少有争议的JavaScript良好书写规范（Best Practice）。一些显而易见的常识就再也不论述（好比要用对象支持识别判断，而不是浏览器识别判断；好比不要嵌套太深）。条目顺序按重要级粗略的从高到低排列。

 

把外部JavaScript文件放在HTML底部

 

咱们的目标是相同的：为用户尽量快地显示内容。当载入一个脚本文件的时候，HTML会中止解析，直到脚本载入完毕。所以，用户可能会长时间对着一个空白的屏幕，看上去什么都没有发生。若是你的JavaScript代码只是增长一些功能（好比按钮的点击动做），那么尽管大胆地把文件引用放在HTML底部吧（就在</body>以前），你会看到明显的速度提高。若是是用于其余目的的脚本文件，则须要慎重地考虑。但不管如何，这毫无疑问是一个很是值得考虑的地方。

 

优化循环

 

循环遍历一个数组

 

 

用尽可能简短的代码

 

若是能够增长可读性的话，那么使用代码的简短格式是有意义的，下面是一份不彻底的列表：

 

 

单引号和双引号

 

为了不混乱，咱们建议在HTML中使用双引号，在JavaScript中使用单引号。

 

 

避免混入其余技术

 

CSS:假设咱们的页面上有必须填入的输入框（拥有class“mandatory”），若是它没有被输入数据，周围就会加上红色边框。

 

 

HTML:假设咱们有内多HTML内容须要用JavaScript来载入，那么使用Ajax载入单独的文件，而不是经过JavaScript处理DOM，后者会让代码难以处理，而且出现难以维护的兼容性问题。

 

验证JavaScript代码

 

浏览器处理JavaScript代码可能会很是宽容，但我建议你不要依赖浏览器的解析能力，所以养成了懒散的编码习惯。

 

最简单的检测你的代码质量的方法是经过一个在线JavaScript验证工具JSLint。

 

“JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.”
– JSLint Documentation

 

使用更简单的格式来写innerscript

 

 

老是检查数据

 

要检查你的方法输入的全部数据，一方面是为了安全性，另外一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是由于他们蠢，而是由于他们很忙，而且思考的方式跟你不一样。用typeof方法来检测你的function接受的输入是否合法。

 

 

另外一个安全隐患是直接从DOM中取出数据使用。好比说你的function从用户名输入框中取得用户名作某项操做，但用户名中的单引号或者双引号可能会致使你的代码崩溃。

 

避免全局变量

 

全局变量和全局函数是很是糟糕的。由于在一个页面中包含的全部JavaScript都在同一个域中运行。因此若是你的代码中声明了全局变量或者全局函数的话，后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉（overwrite）你的。

 

 

声明变量的话，老是用var

 

JavaScript中的变量多是全局域或者局部域，用var声明的话会更加直观。

 

 

使用前置+号来把字符串转化为数字

 

JavaScript中，“+”操做符即被用来做为数字加，也被用来链接字符串。若是须要求表单中几个值的和，那么用+可能会出现问题。

 

 

 

避免使用eval()方法

 

JavaScript中的eval()方法是在运行时把任何代码看成对象来计算/运行的方法。实际上因为安全性的缘故，大部分状况下都不该该用eval()，老是有一种更“正确”的方法来完成一样的工做的。基本原则是，eval is evil，在任什么时候候都不要用它，除非你是一个老手，而且知道你不得不这样作。

 

for in语句

 

遍历一个对象中的全部条目的时候，用for in语句是很是方便的。但有时候咱们不须要遍历对象中的方法，若是不须要的话，能够加上一条filter。

 

 

不要偷懒省略”和{}

 

从技术上说，你能够忽略不少花括号和分号。

 

 

因此，要记住的原则是：1.永远不要省略分号；2.不要省略花括号，除非在同一行中。

 

 

获取对象属性的时候用方括号而不是点号

 

在JavaScript中取得某对象的属性有两种方法：

 

 

若是是用点号标记取得对象的属性，属性名称是硬编码，没法在运行时更改；而用方括号的话，JavaScript会求得方括号内值而后经过计算结果来求得属性名。也就是说用方括号标记的方式，属性名称能够是硬编码的，也能够是变量或者函数返回值。

 

 

假设JavaScript会被禁用

 

我知道这样的假设会伤害JavaScript开发者的感情，但是在目前数据不明朗的状况下咱们为了安全起见应该作这样的假设。这是渐进加强中很重要的一部分。

 

使用JavaScript库

 

如今有不少很是流行的JavaScript库，好比YUI和jQuery、Dojo。它们的缺点是须要下载一个额外的文件，优势却更多：兼容性更强；代码更简单易懂。好的库有不少，但你不该该在一个项目中把它们都用上，由于可能存在兼容性问题。选择一个本身习惯的就好。

 

不要忘记的一点是，原生的JavaScript毫无疑问更快，若是是小规模的使用，最好仍是用原生的。