個人前端編碼習慣 —— 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) 默認的第⼆個參數表⽰進制，若是省略有時會產⽣不可預知的問題，若是不肯定參數的進制，應強制加⼊第⼆個參數標明。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。