軟件生命周期中80%的成本都消耗在了維護上；而且?guī)缀跛械木S護者都不是代碼的直接開發(fā)人。愛掏網 - it200.com如何讓自己寫的代碼讓別人閱讀起來更高效？當然是寫代碼的時候注入一些規(guī)范。愛掏網 - it200.com那么在Javascript中有哪些編程風格值得我們去注重呢？這篇文章將總結《編寫可維護的JavaScript》里面的觀點。愛掏網 - it200.com
縮進風格
語句結尾
建議不要省略分號。愛掏網 - it200.com很多人喜歡寫js代碼很依賴于自動分號插入，也就是語句后面不加分號。愛掏網 - it200.com但是這是大多數(shù)的情況，像return這樣的語句是會出錯的。愛掏網 - it200.com類似的還有其他一些語法，這里就不細說自動分號插入機制了，感興趣的童鞋可以前往JavaScript ASI 機制詳解。愛掏網 - it200.com
行的長度
這個之前在另外一篇博客中有介紹過，為了保證在小屏筆記本和大屏幕上看到的代碼是一致的，通常建議每一行代碼不要超過80列。愛掏網 - it200.com
換行
代碼長度超過80列，換行也是有講究的。愛掏網 - it200.com建議換行的代碼增加兩個縮進長度。愛掏網 - it200.com例如：
callFunction(element1, element2, element3, element4,
element5);空行
整個函數(shù)代碼沒有空行地緊湊在一起會給閱讀代碼的人一定的視覺疲勞。愛掏網 - it200.com也讓人厭倦，起碼我看到這樣的代碼就不想再看下去了。愛掏網 - it200.com對于空行地建議：
- 在方法之間
- 在方法中的局部變量和第一條語句之間
- 在注釋之前
- 在方法內的邏輯片段之間插入空行，提高可讀性
命名
命名是我覺得規(guī)范中最難的點，怎么讓變量或者函數(shù)名稱還有意境。愛掏網 - it200.com結合不同的場景，設置不一樣的名稱。愛掏網 - it200.com讓維護代碼的人像看小說一般地閱讀代碼，就說明命名是成功的！除了變量含義之外，其他的一些規(guī)范比如：
- 駝峰寫法
- 變量用名詞
- 函數(shù)用動詞+名詞
- 對象私有屬性或方法前面加_
- 常量用全部大寫字母且分割單詞用下劃線
- 構造函數(shù)首字母大寫，且以非動詞開頭
注釋
單行注釋
- 獨占一行，用來解釋下一行代碼
if (condition) {
// 如果代碼執(zhí)行到這里，代表通過了condition的校驗
next();
}注意注釋之前要加空行、注釋也要縮進。愛掏網 - it200.com
- 與代碼同一行，用來解釋之前的代碼
var result = something + somethingElse; // somethingElse will never be null注意注釋與代碼直接至少添加一個縮進。愛掏網 - it200.com
- 多行，用來注釋掉一個代碼塊
// if (condition) {
// doSomething();
// doSomethingElse();
// }注釋一個代碼塊時是在連續(xù)多行使用單行注釋唯一可以接受的情況。愛掏網 - it200.com但是最好別這樣使用。愛掏網 - it200.com
多行注釋
if (condition) {
/*
* 如果代碼執(zhí)行到這里
* 說明balabala
*/
doSomething();
}要注意縮進、換行、空格、空行。愛掏網 - it200.com
使用注釋聲明
注釋說明，主要用來做記號。愛掏網 - it200.com主要有以下幾種：
- TODO 說明代碼還未完成，說明接下來要做的事情。愛掏網 - it200.com
- HACK 表明代碼實現(xiàn)走了一個捷徑。愛掏網 - it200.com應當包含為何使用hack的原因。愛掏網 - it200.com同時也表明也許會有更好的解決辦法。愛掏網 - it200.com
- FIXME 說明代碼存在bug，應當盡快修復。愛掏網 - it200.com
- REVIEW 說明代碼任何可能的改動都需要評審。愛掏網 - it200.com
變量、函數(shù)和運算符
-
變量聲明 變量聲明習慣一般有兩種：一種是“就近”原則，放在離使用最近的地方；第二種就是放在最上面，作為函數(shù)內的第一條語句。愛掏網 - it200.com個人推薦后者，這跟JavaScript引擎解析代碼的習慣是一致的。愛掏網 - it200.com
-
函數(shù)聲明 函數(shù)聲明也會被JS引擎提前，建議在函數(shù)調用之前聲明函數(shù)。愛掏網 - it200.com另外，推薦函數(shù)內部的局部函數(shù)應當緊接著變量聲明之后聲明。愛掏網 - it200.com
-
立即調用的函數(shù) 立即執(zhí)行函數(shù)，在開發(fā)中肯定會經常使用。愛掏網 - it200.com好的寫法是：
var value = (function() {
// 函數(shù)體
return {
message: 'Hi'
};
}());清晰明了地的讓人知道這是一個立即執(zhí)行函數(shù)。愛掏網 - it200.com
- 嚴格模式
ES5引入了嚴格模式，通過這種方式解析執(zhí)行js代碼，來達到減少錯誤的目的。愛掏網 - it200.com代碼要以strict mode去解析也很簡單，只要將
use strict放到js代碼中即可。愛掏網 - it200.com當js解析器看到這樣一條沒有賦給變量的字符串之后，就會以嚴格模式去解析代碼。愛掏網 - it200.com一個原則：盡量少地影響到更多代碼！什么意思呢？use strict可以放到任何位置，全局或者函數(shù)局部都可以。愛掏網 - it200.com
// bad
"use strict";
function doSomething() {
// 代碼
}
// good
function doSomething() {
"use strict";
// 代碼
}如果有多個函數(shù)要使用嚴格模式，就用立即函數(shù)限制起來，避免影響到全局。愛掏網 - it200.com
(function() {
"use strict";
function doSomething() {
// 代碼
}
function doSomethingElse() {
// 代碼
}
})();
- 相等 使用===、!==代替==、!=，避免類型轉換。愛掏網 - it200.com類型轉換的相關內容這里就不說了，自行了解。愛掏網 - it200.com
UI層的松耦合
松耦合的原則：修改一個組件時盡可能不需要修改其他組件代碼。愛掏網 - it200.com
-
將JavaScript從CSS中抽離 避免使用CSS表達式
-
將CSS從JavaScript中抽離 避免直接修改dom的樣式，通過類名去實現(xiàn)想要的效果。愛掏網 - it200.com
// bad
element.style.cssText = "color: red; left: 10px";
// good
.reveal {
color: red;
left: 10px;
}
element.className += " reveal";
- 將JavaScript從HTML中抽離 避免直接在HTML寫事件處理程序和邏輯代碼
事件處理
兩個規(guī)則：
- 隔離程序邏輯 將應用邏輯從所有事件處理程序中抽離出來是最佳實踐，舉個例子：
// bad
function handleClick(event) {
var popup = document.getElementById("popup");
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";
}
// good
function handleClick(event) {
showPopup(event);
}
function showPopup(event) {
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";
}
- 不要濫用事件對象 將事件對象event一直傳遞下去是個很爛的實踐。愛掏網 - it200.com別人并不知道你具體使用到事件對象的什么屬性或者方法。愛掏網 - it200.com繼續(xù)用上面的例子：
// bad
function handleClick(event) {
showPopup(event);
}
function showPopup(event) {
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";
}
// good
function handleClick(event) {
showPopup(event.clientX, event.clientY);
}
function showPopup(x, y) {
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.className = "reveal";
}
vue的規(guī)范建議可以前往vue最佳實踐，一起討論學習吧！
原文發(fā)布時間為：2024年06月12日
原文作者：Jouryjc
本文來源：?掘金?如需轉載請聯(lián)系原作者