摘要：關(guān)于微信公眾號前端呼啦圈我的博客勞卜的博客知乎專欄前端呼啦圈前言在實際工作中，我們應(yīng)該經(jīng)常會看到一些功能上沒有問題，但編碼風(fēng)格和規(guī)范卻十分糟糕的代碼，這往往會讓人不敢再往下閱讀，甚至?xí)绊戦喿x者一天的心情。本文內(nèi)容參考自編寫可維護的一書。

微信公眾號：前端呼啦圈（Love-FED）

我的博客：勞卜的博客

知乎專欄：前端呼啦圈

在實際工作中，我們應(yīng)該經(jīng)常會看到一些功能上沒有問題，但編碼風(fēng)格和規(guī)范卻十分糟糕的代碼，這往往會讓人不敢再往下閱讀，甚至?xí)绊戦喿x者一天的心情。這些代碼不僅不易閱讀，而且難以維護，它們一般會出自剛?cè)腴T的編程新手，也會出自工作了好幾年的老程序員手下。因此本文的目的在于幫助那些沒有養(yǎng)成良好的編碼風(fēng)格，缺乏相應(yīng)編碼規(guī)范意識的JavaScript學(xué)習(xí)者們改善他們的編碼形象。

以上我提出了編碼形象的概念，我個人認為：

編碼形象 = 編碼風(fēng)格 +　編碼規(guī)范

一個良好的編碼形象就等于一個穿著得體的青年，對于程序員來說這是同行了解你優(yōu)秀能力的最直接最簡單的方式。

我們來看一下一段糟糕的編碼形象：

//打個招呼
function func(){
    var age=18,sex="man";
    var greeting="hello";
    if(age<=18&&sex=="man"){
        console.log(greeting+"little boy")
    }
    
    ...
}
func()

上方代碼整體縮在了一起，缺乏規(guī)范意識，閱讀體驗很差，不忍直視。

再來看一段良好的代碼形象：

// 打個招呼
function greetFn() {
    var age = 18,
        sex = "man",
        greeting = "hello";
        
    if (age <= 18 && sex === "man") {
        console.log(greeting + "little boy");
    }
    
    ...
};

greetFn();

上方的代碼是不是感覺舒服多了？

由此可見養(yǎng)成一個良好的編碼形象是至關(guān)重要的，而本文主要講解的是基于JavaScript的編碼形象，即基于JavaScript的編碼風(fēng)格和編碼規(guī)范。

那么什么是編碼風(fēng)格，什么是編碼規(guī)范，兩者的區(qū)別又是什么？

首先編碼風(fēng)格既然是風(fēng)格，就沒有對錯之分。就好比每個人的穿著打扮不同，有的人穿的比較得體，有的人穿的比較隨意而已。

而在JavaScript編碼風(fēng)格中，也有一套比較得體的風(fēng)格，尤其在團隊開發(fā)中，我們不能隨意的書寫屬于自己的風(fēng)格。

下面就列舉幾種隨意的編碼風(fēng)格，并將其與良好的編碼風(fēng)格進行對比。

// 不推薦的寫法
var name = "勞卜";//代碼和注釋之間沒有間隔

if (name) {
    /*
     *注釋之前無空行
     *星號后面無空格
     */
}

// 推薦的寫法
var name = "勞卜"; // 代碼和注釋之間有間隔

if (name) {

    /*
     * 注釋之前有空行
     * 星號后面有空格
     */
}

// 不推薦的寫法
var name="勞卜"; // 等號和兩側(cè)之間沒有間隔

// if塊級語句間沒有間隔
if(name){
    console.log("hello");
}

// 推薦的寫法
var name = "勞卜"; // 等號和兩側(cè)之間有間隔

// if塊級語句間有間隔
if (name) {
    console.log("hello");
}

// 不推薦的寫法：沒有合理縮進
function getName() {
console.log("勞卜"); 
}

// 推薦的寫法：合理縮進
function getName() {
    console.log("勞卜");
}

// 不推薦的寫法: 代碼功能塊之間沒有空行
function getName() {
    var name = "勞卜";
    if (name) {
        console.log("hello");
    }
}

// 推薦的寫法：代碼功能塊之間有空行
function getName() {
    var name = "勞卜";
    
    if (name) {
        console.log("hello");
    }
}

// 不推薦的寫法
var getName = "勞卜"; // 變量命名前綴為動詞

// 函數(shù)命名前綴為名詞
function name() {
   console.log("hello");
}

// 推薦的寫法
var name = "勞卜"; // 變量命名前綴為名詞

// 函數(shù)命名前綴為動詞
function getName() {
   console.log("hello");
}

// 不推薦的寫法：函數(shù)在聲明之前使用
getName(); 

function getName() {
    console.log("hello");
}

// 推薦的寫法：函數(shù)在聲明之后使用
function getName() {
    console.log("hello");
}

getName();

// 不推薦的寫法：沒有使用分號結(jié)尾
var name = "勞卜" 

var getName = function() {
    console.log("hello")
}

// 推薦的寫法：使用分號結(jié)尾
var name = "勞卜"; 

var getName = function() {
    console.log("hello");
};

以上主要列舉了7個比較常見的編碼風(fēng)格的例子進行了比較，在推薦的寫法和不推薦的寫法中兩者并沒有對錯之分，只是推薦的寫法相比較而言更容易閱讀和維護，更適用于團隊開發(fā)，也是良好編碼形象的體現(xiàn)。

對于編碼規(guī)范，既然是規(guī)范，那我們就應(yīng)該按照一定的規(guī)則來編寫。隨意編寫違反編碼規(guī)范的代碼，可能會導(dǎo)致程序的出錯和潛在的bug，因此其相對于編碼風(fēng)格來說應(yīng)該更加嚴(yán)謹，也有人會把編碼風(fēng)格包含在編碼規(guī)范之中。

下面就列舉幾個常見的實例代碼：

// 不推薦的寫法：==和!=比較時會進行類型轉(zhuǎn)換，應(yīng)盡量避免使用
var num = 123;

if (num == "123") {
    console.log(num);
} else if (num != "321") {
    console.log("321");
}

// 推薦的寫法：使用===和!==來進行比較
var num = 123;

if (num === "123") {
    console.log(num);
} else if (num !== "321") {
    console.log("321");
}

// 不推薦的寫法：if語句不用大話號包裹會出現(xiàn)潛在bug
var num = 123;

if (num === "123")
    console.log(num);

// 推薦的寫法：if語句用大話號包裹
var num = 123;

if (num === "123") {
    console.log(num);
}

// 不推薦的寫法：應(yīng)避免使用eval，不安全，非常耗性能（一次解析成js語句，一次執(zhí)行）
var json = "{"name": "勞卜", "func": alert("hello")}";

eval("(" + json + ")"); // 彈出“hello”

// 推薦的寫法
var json = "{"name": "勞卜", "func": alert("hello")}";

JSON.parse(json); // 校驗報錯

// 不推薦的寫法：用typeof來判斷構(gòu)造函數(shù)創(chuàng)建的對象
var str = new String("勞卜"); 

console.log(typeof str); // "object"

// 推薦的寫法：用instanceof來判斷構(gòu)造函數(shù)創(chuàng)建的對象
var str = new String("勞卜"); 

console.log(str instanceof String); // true

// 不推薦的寫法：使用undefined和null來檢測一個屬性是否存在
if (obj["name"] !== undefined) {
    console.log("name屬性存在"); // 若obj.name為undefined時則會導(dǎo)致判斷出錯
}

if (obj["name"] !== null) {
    console.log("name屬性存在"); // 若obj.name為null時則會導(dǎo)致判斷出錯
}

// 推薦的寫法：使用in運算符來檢測對象屬性是否存在，使用hasOwnProperty方法來檢測不包含原型鏈上的對象屬性是否存在
if ("name" in obj) {
    console.log("name屬性存在");
}

if (obj.hasOwnProperty("name")) {
    console.log("name屬性存在");
}

以上主要列舉了5個常見的編碼規(guī)范的例子，合理地規(guī)范自己的代碼能夠很大程度上減少不必要的維護成本和潛在的bug風(fēng)險，對于JavaScript學(xué)習(xí)者來說應(yīng)該銘記于心。

“程序是寫給人讀的，只是偶爾讓計算機執(zhí)行一下。”我們不能為了貪圖一時的方便而親手毀了自己的代碼形象，這會給他人和整個項目帶來不必要的麻煩。

本文內(nèi)容參考自《編寫可維護的JavaScript》一書。

如果覺得本文對你有幫助，可以關(guān)注我的微信公眾號，來這里聊點關(guān)于前端的事情。