个人前端编码习惯 —— js篇

时间 2019-12-06

原文原文链接

代码格式规范

1.html中外部脚本引入尽可能放在尾部。html

2.一个html文件中只写一个<script>代码块。数组

3.JS文件中的代码块可用如下代码块包裹，以减小全局污染。浏览器

(function(){
    // 代码
})();

4 JS代码若是只针对特定HTML能够写在页面里，多页面共同调用的代码块能够考虑写入公共JS文件中调用。编辑器

5.程序块采用缩进风格编写，缩进采用4个空格，避免使用tab缩进以避免各编辑器显示不一致。函数

6.在该换行的地方考虑换行。以下面的状况：性能

- 在每一句代码结束后的";"以后换行。
- 当一条语句代码很长(超过120字符)，请考虑折行。在运算符号(最好是逗号)后换行。
- 在{以后和}先后换行，{前面无需换行。
- 在JSON类型的变量中每个","以后换行。
- 在注释先后换行。

7.一元操做符(如delete，typeof，void)或在某些关键词(如return，throw，case，new)以后，不要使用括号。优化

8.优先使用单引号(')包裹字符串，单引号里再使用双引号(")或转义。this

9.多行字符串使用(+)拼接形式，也能够转换成数组拼接，不要使用(+)换行拼接，若是须要换行，(+)请加在行尾。code

10.避免在数组对象直接量末尾多出额外的逗号(,)，如：htm

var testArr = [1,2,3,];
var testObj = {
    a:1,
    b:2,
    c:3,
}
最后的逗号多余应删除，分别应改成：
var testArr = [1,2,3];
var testObj = {
    a:1,
    b:2,
    c:3
}

这些错误必定要仔细，避免IE低版本中报缺乏字符串，标识符或数字的BUG。

11.作for-in循环时应避免来自原型链上的污染。可用hasOwnProperty方法检查是不是自身成员。

12.不要吝啬你的注释。当代码块更新时，注释也要对应更新。

13.合理使用空格。空格应在如下状况下使用：

- 跟在"("左括号前面的关键字应被一个空格隔开，如：

while (true) {
    //代码
    }

- 函数参数与左括号"("之间不该该有空格。这能帮助缺少你关键字和函数调用。
- 全部的二元操做符，除了(.)点号和"("左括号和"["左方括号外应用空格将其与操做数隔开。
- 三元操做符(?:)两边要留空格。
- 一元操做符与其操做数之间不该有空格，除非操做符是个单词，好比typeof。
- 每一个在控制部分，好比for语句中的";"分号后需跟一个空格。
- 每一个","逗号后应跟一个空格。
- 行尾不要有空格。

命名规则

原则：尽可能避免潜在命名冲突，避免过于精简，应见名知意。

1.变量名应由26个大小写字母(A...Z,a...z)，10个数字(0...9)，和下划线(_)组成。避免使用国际化字符（如中文）。注意：JS是区分大小写的。

2.变量名应以字母、下划线(_)或美圆符号($)开头，容许名称中包含字母、数字、下划线。

3.变量采用首字母小写、其它单词⾸字母⼤写的驼峰式命名，如 userName,arrayIndex。

4.变量名尽可能采用有意义的英文单词或约定的缩写命名，不要用拼音。

5.变量、参数、成员变量、函数等名称均以小写字母开头，构造器的名称以大写字母开头。

6.全局变量或变量名为特定属性名时必须所有大写(js没有宏或者常量，因此不会所以形成误会)。

7.下划线(_)开头的变量通常习惯于标识私有/局部成员。避免用下划线或美圆符号来命名标识符。

8.函数命名必须可以体现函数的功能和动做。

9.必须与new共同使用的构造函数名应以大写字母开头。当new被省略时Javascript不会有任何编译错误或运行错误抛出。忘记加new时会有很差的事情发生(好比被当成通常函数），因此大写构造函数名是咱们用来尽可能避免产生这种状况发生的惟一办法。

10.前面加"is"的变量名应该为布尔值，同理"has"，"can"或"should"亦如此。

变量

1.全部的变量必须在使用前进行声明。将var语句放在函数的首部。最好把每一个变量的声明语句单独放到一行并加上注释说明。

2.变量命名不能产生歧义。

3.少用全局变量，不要让局部变量覆盖全局变量。

4.浮点变量必须指明实部，即便它们为0（使用0.开头）。

函数和语句注意事项

1.如遇到换⾏时应注意与上⼀⾏保持⼀致的缩进。

2.语句末尾使⽤(;)结束，即便后⾯没有其它语句。注意⼀个函数赋值或对象赋值语句也是赋值语句，应该以(; )结尾。

3.不要把多个短语句写在⼀⾏中，即⼀⾏只写⼀条语句。

4.相对独⽴的程序块之间、变量说明以后加空⾏。

5.if、for、do、while、case、switch 等语句⾃占⼀⾏，且 if、for、do、while 等语句的执⾏体要加括号 {} ，除⾮执⾏体为⼀个中断操做 (continue, break, return)。

6.函数或过程的开始，结构的定义及循环、判断等语句中的代码都要采⽤缩进风格，case 语句下的状况处理语句也要听从语句缩进要求。

7.⼀条有返回值的 return 语句不要使⽤“()”来括住返回值。若是返回表达式，则表达式应与return关键字在同⼀⾏，以免误加分号错误。

8.函数可先调⽤再声明，内部函数应在var声明内部变量的语句以后声明，能够清晰地代表内部变量和内部函数的做⽤域。

9.禁⽌重复脚本：包括JS⽂件和功能相近的函数。

10.禁⽌在函数体内命名与外部变量相同的变量名，以免产⽣歧义或冲突。

11.禁⽌在函数体内屡次命名变量，最好将函数体内全部的变量命名集中放在函数体第⼀⾏，以免产⽣不可预知的问题。

代码优化注意事项

1.尽可能避免全局变量的使⽤。全局变量在引⽤时不得不⼀级⼀级查找做⽤域直到搜索到全局做⽤域，尤为在嵌套的调⽤不少的时候。而且全局变量将始终存在于脚本⽣命周期中，调⽤结束后⽆法被回收。

2.eval函数效率低，因为事先⽆法知晓传给eval的字符串中的内容，eval在其上下⽂中解释要处理的代码，也就是说编译器⽆法优化上下⽂，所以只能由浏览器在运⾏时解释代码，这对性能影响很⼤，因此应避免使⽤它。

3.不要使⽤Function构造器。Function 构造函数⽐eval略好，由于使⽤此代码不会影响周围代码，但其速度仍然很慢。可经过建立匿名函数来代替。

4.不要给setTimeout或者setInterval第⼀个参数传递字符串。setTimeout()和 setInterval()⽅法近似于 eval，固然其低效率也和 eval ⼀样。可⽤ function(){xxx} 代替。另外须要注意的是timeout或时间延迟可能并不许确。浏览器⽆法提供1ms如下的延迟，可能会设置最⼩可能延迟，一般在16ms和100ms之间。

5.禁⽌使⽤ with。尽管看起来挺⽅便，但 with 效率很低。with 结构又建立了⼀个做⽤域，以便使⽤变量时脚本引擎搜索。这本⾝只轻微的影响性能。但严重的是编译时不知道此做⽤域内容，所以编译器⽆法像对其余做⽤域（如函数产⽣的做⽤域）那样对之优化。可代替的⽅法是使⽤变量引⽤对象，而后使⽤变量访问对象属性。

6.减小使⽤ continue 和 break。

7.仅在函数和构造器内使⽤ this，以明确this的上下⽂指向。

8.不要在影响性能的关键函数中使⽤try-catch-finally。因为此函数⽐较特殊，且是在运⾏时动态建立动态销毁，有些浏览器对其的处理并不⾼效。把catch语句放在关键循环中将极⼤影响性能。若是可能，应在脚本中不频繁被调⽤的地⽅进⾏异常处理，或经过检查某种动做是否被⽀持来避免使⽤。

9.注意隐式对象转换。若是代码中常调⽤literal值的⽅法，你应考虑⾸先建立对象。由于每次调⽤literal 值的⽅法时，都会隐式的⽤相同的值建立新的对象。一样的状况适⽤于字符串拼接。最好不要把两个 string 合并后赋于变量，⽽应该依次与变量合并。这在⼤部分浏览器中都更快，⽽且消耗更少的内存。如：

var x = '<html>' + '<head>' + '<title>document</title>' + '</head>' + '<body>'…;
慢于
var x = ''; 
x = '<html>'; 
x += '<head>'; 
x += '<title>document</title>'; 
x += '</head>'; x += '<body>'; 
x += '…'
也慢于
var x = [ '<html>', '<head>', '<title>document</title>', '</head>', '<body>', '…' ].join('');

10.在关键函数中避免 for-in。for-in 常被误⽤，特别是简单的 for 循环更合适时。for-in 循环须要脚本引擎建立全部可枚举的属性列表，而后检查是否存在重复。所以 for 循环⽆疑会更⾼效。

11.基本运算符⽐函数调⽤更快。典型的应⽤包括 push ⽅法，及 Math 对象的⽅法，其效率低于直接赋值和运算，虽然这个影响并非很明显。

12.DOM。一般主要有三种状况引发 DOM 运⾏速度变慢。第⼀就是执⾏⼤量 DOM 操做的脚本，如从获取的数据中建造新的 DOM 树。第⼆种状况是脚本引发太多的 reflow 或重绘，如直接为 DOM 添加各类样式。第三种状况是使⽤较慢的 DOM 节点定位⽅法。

13.不要使⽤ JS 中难以理解或容易形成歧义的语句代码。这种状况⾮常多，具体能够找找相关 JS 糟粕部分。

另外

1.{} 和 [] 使⽤ {} 代替 new Object()。使⽤ [] 代替 new Array()。当成员名是⼀组有序的数字时使⽤数组来保存数据。当成员名是⽆规律的字符串或其余时使⽤对象来保存数据。

2.(,)逗号操做符避免使⽤逗号操做符，除⾮在特定的for语句的控制部分（这不包括那些被⽤在对象定义，数组定义，var 语句，和参数列表中的逗号分隔符）。

3.做⽤域在JS中没有块做⽤域。只有函数有做⽤域。不要使⽤块，除⾮在复合语句中。

赋值表达式避免在 if 和 while 语句的条件部分进⾏赋值。if (a = b) {}会与if (a == b) {}产⽣混淆，避免这种不容易判断对错的结构。
=== 和!== 操做符。使⽤ === 和!== 操做符会相对好点。== 和!= 操做符会进⾏类型强制转换。特别是不要将 == ⽤于与错值⽐较（false，null，undefined，”，0，NaN）。

6.令⼈迷惑的加号和减号。⼩⼼在 + 后紧跟 + 或 ++。这种形式很容易让⼈迷惑。应插⼊括号以便于理解。

total = subtotal + +myInput.value;
最好能写成
total = subtotal + (+myInput.value);
这样(+ +)不会被误认为是(++)。

7.⼩⼼使⽤parseInt和parseFloat。parseInt(string, radix) 默认的第⼆个参数表⽰进制，若是省略有时会产⽣不可预知的问题，若是不肯定参数的进制，应强制加⼊第⼆个参数标明。