2019獨角獸企業重金招聘Python工程師標準>>>

前言

最近一直重構項目的前端代碼，也參考了各種前端代碼的最佳實踐，目的是讓前端的HTML,CSS,Javacript代碼更符合標準，有更好的性能，更好的可維護性，嘗到了重構后的甜頭，也萌生了寫這個系列博客的念頭。前端代碼有其固有的靈活性，這就導致了目前前端代碼非常混亂的局面，本系列文章希望能起到拋磚引玉的作用，讓更多的人重視前端代碼的質量，編寫更標準的前端代碼。

本系列文章共有三篇，分別討論HTML,CSS,Javascript，本篇將討論Javascript。

javascript是靈活性非常高的一種腳本語言，使得用其實現的同樣功能有多種多樣的寫法，那么在項目中如果沒有統一的規范，就會造成javascript代碼難以維護，隨著項目的深入，性能j也越來越差，文件也越來越大。所以盡早制定統一的編碼規范是非常必要的，下面是整理的一些javascript規范供大家參考。

（1）編碼格式

好的編碼格式，不同人有不同的看法，但是在同一個項目中一定要有統一的格式。下面是常用的編碼格式：

1，縮進： 不使用tab（\0x09）縮進，以4個空格作為邏輯的縮進。

2，左花括號應該在行的結束，而不應該單獨一行。應該一直使用花括號括起邏輯塊，即使邏輯只有一行，應該也用花括號括起來，這樣提高了代碼的可讀性。例如：

for?(var?i=0;?i<100;?i++)?{? ?????doSomething(i);?? }? if?(statement)?{? ????doSomeThing;? }?else?{? ????doSomeThing;? }?

3，用單引號定義字符串。javascript中可以用單引號或者雙引號定義字符串，但是因為習慣于在html中elements的屬性值的定義使用雙引號，而javascript中又經常包含html代碼，所以字符串定義使用單引號也是方便于在字符串內部包含含有雙引號的html代碼。

var?content?=?'<span?id="spanid">…';?

4，注釋：如果注釋不是占有多行，建議使用//，不推薦使用/**/，注釋應該單獨占用一行，而不是寫在和代碼相同一行的右邊。

5，空格：空格的作用是提高代碼的可讀性，在函數參數的逗號后面使用一個空格，在操作符前后使用一個空格，

doSomething(myChar,?0,?1);?while?(x?===?y)?

6，分號：語句結束一定要使用分號，使用分號是為了在壓縮js代碼時不至于出現js的編譯錯誤，因為壓縮的時候是刪除了所有的空格和回車符的。

（2）命名規則

遵循規范的命名規則，提高了代碼的可讀性，好的命名本身就是好的注釋。

1，大小寫：現在較流行javascript的面向對象編程，那么就會有公有或私有的概念，原則是公有接口的命名首字母大寫，私有接口的命名首字母小寫。

2，命名：禁止使用各種縮寫，命名應該描述其意義，而不是描述其類型，禁止使用標識類型的前綴

不推薦

getWin? function?doSomething(str,??integer)?{? ?????...?...? }? function?doSomething(strMessage,??intLength)?{?? ????...??...? }?

正確命名

getWindow?function?doSomething(message,?length)?{?...?...?}?

（3）編程規范

javascript的編程規范關乎代碼的性能，代碼的簡潔。

1，變量定義

變量定義使用關鍵字var。非必需，不要使用全局變量，這樣可以減少不必要的變量定義查詢。變量應該有個初始化的值，或者設置為null。避免使用關鍵字with，with的性能差。集中定義變量，減少代碼量。

var?counter?=?0,?empty?=?null;?

2，函數定義

函數定義應該在其使用之前。函數內部的函數應該定義在變量之后。減少定義全局函數。函數定義為立即執行，應該用括號包含函數定義體，這樣可讀性好。

var?statement.? function?outer(c,?d)?{? ????var?e?=?c?*?d;? ? ????function?inner(a,?b)?{? ????????return?(e?*?a)?+?b;? ????}? ? ????return?inner(0,?1);? }? ? var?collection?=?(function?()?{? ????var?keys?=?[],?values?=?[];? ? ????return?{? ????????get:?function?()?{? ????????????......? ????????}? ????};? }());?

3，函數多次調用，應該使用函數別名。比如在循環中多次調用某個函數，應該定義一個函數別名，減少調用范圍鏈的跳轉，提高性能。

function?doSomething()?{? ????var?get?=?getDataByIndex;? ? ?????for?(var?counter?=?0;?counter?<?10000;?counter++)?{? ????????var?current?=?get(counter);? ? ????????//?...? ????}? }?

4，值比較盡量使用嚴格比較操作符，減少類型的轉換操作。

if?(x?===?5?&&?y?!==?4)?

5，循環與遞歸：盡量把性能差的操作放在循環外部。預先計算在循環中要使用的值。在上下文中有多個循環時，定義一個統一的循環變量，避免變量無意義的多次定義。

錯誤編碼

//?example?1? for?(var?counter?=?0;?counter?<?10000;?counter++)?{? ????try?{? ???????doSomething();? ????}?catch?(e)?{? ????alert('Failure:?'?+?e);? ????????break;? ????}? }? ? //?example?2? for?(var?counter?=?0;? counter?<?document.getElementsByTagName('div').length;? counter++)?{? ????doSomething();? }? ? //?example?3? for?(var?counter?=?0;?counter?<?10;?counter++)?{? ????doSomething1();? };? ? for?(var?counter?=?0;?counter?<?10;?counter++)?{? ????doSomething2();? };?

正確編碼

//?example?1? ?try?{? ????for?(var?counter?=?0;?counter?<?10000;?counter++)?{? ?????????doSomething();? ?????}? }?catch?(e)?{? ????alert('Failure:?'?+?e);? }? ? ? //?example?2? var?target?=?document.getElementsByTagName('div').length;? for?(var?counter?=?0;counter?<?target?;counter++)?{? ????doSomething();? }? ? //?example?3? var?counter?=?0;? for?(counter?=?0;?counter?<?10;?counter++)?{? ????doSomething1();? };? for?(counter?=?0;?counter?<?10;?counter++)?{? ????doSomething2();? };?

6，Dom操作：減少Dom樹的更新次數，盡量合并Dom樹的更新操作，提高性能。減少賦值給innerHTML的次數。避免給Dom objects上的expando屬性賦值，減少可能的內存泄漏。

7，使用全局的變量和方法：避免使用eval，eval非常耗性能。如果要使用全局的變量或方法，應該加上window，減少上下文的定義查找。

轉載于:https://my.oschina.net/powertoolsteam/blog/278214

總結

以上是生活随笔為你收集整理的前端代码标准最佳实践：javascript篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。