摘要：程序是寫給人讀的只是偶爾讓計算機執(zhí)行一下當(dāng)你剛剛組建一個團隊時團隊中的每個人都各自有一套編程習(xí)慣畢竟每個成員都有著不同的背景有些人可能來自某個皮包公司身兼數(shù)職在公司里面什么事都做還有些人會來自不同的團隊對某種特定的做事風(fēng)格情有獨鐘或恨之入骨

"程序是寫給人讀的,只是偶爾讓計算機執(zhí)行一下." Donald Knuth

當(dāng)你剛剛組建一個團隊時,團隊中的每個人都各自有一套編程習(xí)慣.畢竟,每個成員都有著不同的背景.有些人可能來自某個"皮包公司",身兼數(shù)職,在公司里面什么事都做;還有些人會來自不同的團隊,對某種特定的做事風(fēng)格情有獨鐘(或恨之入骨).每個人都覺得代碼應(yīng)當(dāng)按照自己的想法來寫,這些通常被歸納為個人編程嗜好.在這個過程中應(yīng)當(dāng)今早將統(tǒng)一的編程風(fēng)格納入議題.

以上來自于"編寫可維護的javascript"一書的開頭部分.
以下則是我認(rèn)為可能需要摘撿出來便于記憶的一些.

1.1 換行
當(dāng)一行長度達(dá)到了單行最大字符數(shù)限制時,就需要手動將一行拆成兩行.通常我們會在用算符后換行,下一行會增加兩個層級的縮進.比如(假定縮進為4個字符)

//運算符后換行,第二行追加兩個縮進
callAFunction(document, element, window, "some string value", true, 123,
        navigator);
//語句換行
if(isLeapYear && isFebruary && day == 29 && itsYourBirthday && 
        noPlans){
    waitAnotherFourYears();
}
//列外: 變量賦值時,第二行的位置應(yīng)當(dāng)和賦值運算符的位置保持對齊
var result = something + anotherThing + yetAnotherThing + somethingElse +
             anotherSomethingElse;

1.2 空行
空行是常常被忽略的一個方面.通常來講,代碼應(yīng)該看起來像一系列可讀的段落,而不是一大段揉在一起的連續(xù)文本.一段代碼的語義和另一段不相關(guān),這時就應(yīng)該使用空行將它們分隔,

//沒有加空行的代碼段
if(wl && wl.length) {
    for(var i = 0; i < wl.length; i++) {
        p = wl[i];
        type = Y.Lang.type(r[p]);
        if(s.hasOwnProperty(p)) {
            if(merge && type == "object"){
                Y.mix(r[p], s[p]);
            }else if(ov || !(p in r)) {
                r[p] = s[p];
            }
        }
    }
}
//加入空行后
if(wl && wl.length) {

    for(var i = 0; i < wl.length; i++) {
        p = wl[i];
        type = Y.Lang.type(r[p]);
        
        if(s.hasOwnProperty(p)) {
        
            if(merge && type == "object"){
                Y.mix(r[p], s[p]);
            }else if(ov || !(p in r)) {
                r[p] = s[p];
            }
        }
    }
}

這段代碼中是在每個流控制語句之前(比如if和for語句)添加空行.這樣閱讀起來更加流暢.
下面這些場景添加空行也是不錯的.

在方法之間.

在方法中的局部變量(local variable)和第一條語句之間.

在多行或單行注釋之前.

在方法內(nèi)的邏輯片段之間插入空行,提高可讀性.

1.3 命名

"計算機科學(xué)只存在兩個難題: 緩存失效和命名." ----Phil Karlton.

ECMAScript遵照了駝峰式大小寫命名法

//大駝峰
var ThisIsMyName;

//小駝峰
var thisIsMyName;

1.3.1 變量和函數(shù)
變量名遵循駝峰大小寫命名法,并且命名前綴應(yīng)當(dāng)是名詞
函數(shù)名前綴應(yīng)為動詞, 可以讓變量和函數(shù)區(qū)分開來.

//好的寫法
var count = 10;
var myName = "Nicholas";
var found = true;

//不好的寫法: 變量看起來像函數(shù)
var getCount = 10;
var isFound = true;

//好的寫法
function getName() {
    return myName;
}

//不好的寫法: 函數(shù)看起來像變量
function theName() {
    return myName;
}

命名不僅是一門科學(xué), 更是一門技術(shù). 命名長度盡可能短, 抓住要點. 盡量在變量名中提現(xiàn)出值得數(shù)據(jù)類型. 比如, 命名 count, length和size表明數(shù)據(jù)類型是數(shù)字, 而命名name, title, message表明是字符串等.

對于函數(shù)和方法命名來說,第一個單詞應(yīng)該是動詞, 這里有一些常見的約定.

can 返回一個布爾值

has 返回一個布爾值

is 返回一個布爾值

get 返回一個非布爾值

set 用來保存一個值

//這樣可以使得代碼可讀性更強 這是一些例子
if(isEnabled()){
    setName("Tony");
}

if(getName() === "Tony"){
    doSomething();
}

1.3.2 常量
通常使用大寫字母和下劃線來命名, 下劃線用以分隔單詞

const MAX_COUNT = 10;

1.3.3 構(gòu)造函數(shù)
在js中,構(gòu)造函數(shù)是加了new運算符的函數(shù),用來創(chuàng)建對象. 需要用到大駝峰命名. 更好的區(qū)別是構(gòu)造函數(shù)還是函數(shù)或者方法.

//好的做法
function Person(name) {
    this.name = name;
}

Person.protopype.sayName = function() {
    alert(this.name);
}

var me = new Person("Tony");

1.4 直接量
js中包含一些類型的原始值: 字符串, 數(shù)字, 布爾值, null和undefined. 同樣也包含對象直接量和數(shù)組直接量.這其中,只有布爾是自解釋的(self-explanatory)的,其他的類型或多或少都需要思考一下它們?nèi)绾胃_的表示出來.

1.4.1 字符串
在js中,字符串是獨一無二的.可以用雙引號,也可以用單引號.你只需要將你的代碼從頭到尾保持一種風(fēng)格即可. 比如我通常在html中用雙引號,js中用單引號.

1.4.2 數(shù)字
數(shù)字類型只有一種,因為所有數(shù)字形式──整數(shù)和浮點數(shù)──都儲存為相同的數(shù)據(jù)類型．還有一些其他的數(shù)字直接量格式來表示不同的數(shù)據(jù)格式．

//整數(shù)
var count = 10;

//小數(shù)
var price = 10.0;
var price = 10.00;

//不推薦寫法
var price = 10.;
var price = .1;

1.4.3 null
null是一個特殊值,但我們常常誤解它,將它和undefined搞混.在下列場景中使用null.

用來初始化一個變量,這個變量可能賦值為一個對象.

用來和一個已經(jīng)初始化的變量比較,這個變量可以是也可以不是一個對象.

當(dāng)函數(shù)的參數(shù)期望是對象時,用作參數(shù)傳入.

當(dāng)函數(shù)返回值期望是對象時,用作返回值傳出.

還有下面一些場景不應(yīng)當(dāng)使用null.

不要使用null來檢測是否傳入了某個參數(shù).

不要用null來檢測一個未初始化的變量.

這里是一些代碼示例.

//好的用法
var person = null;

//好的用法
function getPerson() {
    if(condition) {
        return new Person("Tony");
    }else {
        return null;
    }
}

//好的用法
var person = getPerson();
if(person !== null) {
    doSomething();
}

//不好的寫法: 用來和未初始化的變量比較
var person;
if(person != null) {
    doSomething();
}

//不好的寫法: 檢測是否傳入了參數(shù)
function doSomething(arg1, arg2, arg3) {
    if(arg3 != null) {
        doSomethingElse();
    }
}

理解null最好的方式是將它當(dāng)做對象的占位符(placeholder).

1.4.4 undefined
undefined是一個特殊的值,我們常常將它和null搞混.其中一個讓人困惑的地方在于null==undefined結(jié)果是true.然而,這兩個值得用途各不相同.那些沒有被初始化的變量都有一個初始值,即undefined,表示這個變量等待被賦值.比如:

//不好的寫法
var person;
console.log(person === undefined); //true

盡管這段代碼能正常工作,但是建議避免在代碼中使用undefined.這個值常常和返回"undefined"的typeof運算符混淆.事實上,typeof的行為也很讓人費解,因為不管是值是undefined的變量還是為聲明的變量,typeof運算的結(jié)果都是"undefined".比如:

//foo未被聲明
var person;
console.log(typeof person); //"undefined"
console.log(typeof foo); //"undefined"

這段代碼中,person和foo都會導(dǎo)致typeof返回"undefined",即便是person和foo的其他場景中的行天差地別(在語句中使用foo會報錯,而使用person則不會報錯).

通過禁止使用特殊值undefined,可以有效地確保只在一種情況下typeof才會返回"undefined":當(dāng)變量未聲明時.如果你使用了一個可能(或可能不會)賦值為一個對象的變量時,則將其賦值為null.

//好的做法
var person = null;
console.log(person === null); //true

將變量初始賦值為null表明了這個變量的意圖,它最終很可能賦值為對象.typeof運算符運算null的類型時返回"object",這樣就可以和undefined區(qū)分開了.

1.4.5 對象直接量
創(chuàng)建對象最流行的一種做法是使用對象直接量,在直接量中直接寫出所有屬性.
對象直接量容許將所有的屬性都括在一對花括號內(nèi).直接量可以高效的完成非直接量寫法相同的任務(wù),非直接量寫法語法看起來更復(fù)雜一些.

//非直接量 不好的法
var book = new Object();
book.title = "編寫可維護的js";
book.author = "Nicholas";

//直接量 好的寫法
var book = {
    title: "編寫可維護的js",
    author: "Nicholas"
}

1.4.6 數(shù)組直接量
和對象直接量類似,直接量是定義數(shù)組最簡潔的一種方式.

//不好的寫法 Array構(gòu)造函數(shù)來創(chuàng)建數(shù)組
var colors = new Array("red", "green", "yellow");
var numbers = new Array(1, 2, 3, 4, 5);

//好的寫法 數(shù)組直接量
var colors = ["red", "green", "yellow"];
var numbers = [1, 2, 3, 4, 5];