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

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

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

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

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

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

1.2 空行
空行是常常被忽略的一個(gè)方面.通常來講,代碼應(yīng)該看起來像一系列可讀的段落,而不是一大段揉在一起的連續(xù)文本.一段代碼的語義和另一段不相關(guān),這時(shí)就應(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];
            }
        }
    }
}

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

在方法之間.

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

在多行或單行注釋之前.

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

1.3 命名

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

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

//大駝峰
var ThisIsMyName;

//小駝峰
var thisIsMyName;

1.3.1 變量和函數(shù)
變量名遵循駝峰大小寫命名法,并且命名前綴應(yīng)當(dāng)是名詞
函數(shù)名前綴應(yīng)為動(dò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ù). 命名長度盡可能短, 抓住要點(diǎn). 盡量在變量名中提現(xiàn)出值得數(shù)據(jù)類型. 比如, 命名 count, length和size表明數(shù)據(jù)類型是數(shù)字, 而命名name, title, message表明是字符串等.

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

can 返回一個(gè)布爾值

has 返回一個(gè)布爾值

is 返回一個(gè)布爾值

get 返回一個(gè)非布爾值

set 用來保存一個(gè)值

//這樣可以使得代碼可讀性更強(qiáng) 這是一些例子
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運(yùn)算符的函數(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中,字符串是獨(dú)一無二的.可以用雙引號,也可以用單引號.你只需要將你的代碼從頭到尾保持一種風(fēng)格即可. 比如我通常在html中用雙引號,js中用單引號.

1.4.2 數(shù)字
數(shù)字類型只有一種,因?yàn)樗袛?shù)字形式──整數(shù)和浮點(diǎn)數(shù)──都儲(chǔ)存為相同的數(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是一個(gè)特殊值,但我們常常誤解它,將它和undefined搞混.在下列場景中使用null.

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

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

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

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

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

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

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

這里是一些代碼示例.

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

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

盡管這段代碼能正常工作,但是建議避免在代碼中使用undefined.這個(gè)值常常和返回"undefined"的typeof運(yùn)算符混淆.事實(shí)上,typeof的行為也很讓人費(fèi)解,因?yàn)椴还苁侵凳莡ndefined的變量還是為聲明的變量,typeof運(yùn)算的結(jié)果都是"undefined".比如:

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

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

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

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

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

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

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

//直接量 好的寫法
var book = {
    title: "編寫可維護(hù)的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];