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

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

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

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

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

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

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

//沒有加空行的代碼段
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)和第一條語句之間.

在多行或單行注釋之前.

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

1.3 命名

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

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

//大駝峰
var ThisIsMyName;

//小駝峰
var thisIsMyName;

1.3.1 變量和函數
變量名遵循駝峰大小寫命名法,并且命名前綴應當是名詞
函數名前綴應為動詞, 可以讓變量和函數區分開來.

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

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

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

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

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

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

can 返回一個布爾值

has 返回一個布爾值

is 返回一個布爾值

get 返回一個非布爾值

set 用來保存一個值

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

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

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

const MAX_COUNT = 10;

1.3.3 構造函數
在js中,構造函數是加了new運算符的函數,用來創建對象. 需要用到大駝峰命名. 更好的區別是構造函數還是函數或者方法.

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

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

var me = new Person("Tony");

1.4 直接量
js中包含一些類型的原始值: 字符串, 數字, 布爾值, null和undefined. 同樣也包含對象直接量和數組直接量.這其中,只有布爾是自解釋的(self-explanatory)的,其他的類型或多或少都需要思考一下它們如何更精確的表示出來.

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

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

//整數
var count = 10;

//小數
var price = 10.0;
var price = 10.00;

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

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

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

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

當函數的參數期望是對象時,用作參數傳入.

當函數返回值期望是對象時,用作返回值傳出.

還有下面一些場景不應當使用null.

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

不要用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();
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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