我的前端编码习惯 —— js篇

dodomonster

代码格式规范

1.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.优先使用单引号(')包裹字符串,单引号里再使用双引号(")或转义。

9.多行字符串使用(+)拼接形式,也可以转换成数组拼接,不要使用(+)换行拼接,如果需要换行,(+)请加在行尾。

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

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中没有块作⽤域。只有函数有作⽤域。不要使⽤块,除⾮在复合语句中。

  1. 赋值表达式避免在 if 和 while 语句的条件部分进⾏赋值。if (a = b) {}会与if (a == b) {}产⽣混淆,避免这种不容易判断对错的结构。

  2. === 和!== 操作符。 使⽤ === 和!== 操作符会相对好点。== 和!= 操作符会进⾏类型强制转换。特别是不要将 == ⽤于与错值⽐较(false,null,undefined,”,0,NaN)。

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

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

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

阅读 2.2k

前端菜鸟-DodoMonster
大家猴,我是一只好菜好菜的前端菜鸟-DodoMonster

DodoMonster want to be an excellent Web Font-End Developer.Fighting!!!

2.1k 声望
629 粉丝
0 条评论

DodoMonster want to be an excellent Web Font-End Developer.Fighting!!!

2.1k 声望
629 粉丝
文章目录
宣传栏