1.為什要遵守代碼規(guī)范

2.編寫代碼需遵守的幾個(gè)原則

3.編碼規(guī)范(Coding Conventions)

4.命名規(guī)范(Naming Conventions)

5.css基礎(chǔ)class類

軟件bug的修復(fù)是昂貴的，并且隨著時(shí)間的推移，這些bug的成本也會(huì)增加，尤其當(dāng)這些bug潛伏并慢慢出現(xiàn)在已經(jīng)發(fā)布的軟件中時(shí)。當(dāng)你發(fā)現(xiàn)bug 的時(shí)候就立即修復(fù)它是最好的，此時(shí)你代碼要解決的問(wèn)題在你腦中還是很清晰的。否則，你轉(zhuǎn)移到其他任務(wù)，忘了那個(gè)特定的代碼，一段時(shí)間后再去查看這些代碼就 需要：

花時(shí)間學(xué)習(xí)和理解這個(gè)問(wèn)題

花時(shí)間是了解應(yīng)該解決的問(wèn)題代碼

還有問(wèn)題，特別對(duì)于大的項(xiàng)目或是公司，修復(fù)bug的這位伙計(jì)不是寫代碼的那個(gè)人（且發(fā)現(xiàn)bug和修復(fù)bug的不是同一個(gè)人）。因此，必須降低理解代 碼花費(fèi)的時(shí)間，無(wú)論是一段時(shí)間前你自己寫的代碼還是團(tuán)隊(duì)中的其他成員寫的代碼。這關(guān)系到底線（營(yíng)業(yè)收入）和開發(fā)人員的幸福，因?yàn)槲覀兏鼞?yīng)該去開發(fā)新的激動(dòng) 人心的事物而不是花幾小時(shí)幾天的時(shí)間去維護(hù)遺留代碼。

另一個(gè)相關(guān)軟件開發(fā)生命的事實(shí)是，讀代碼花費(fèi)的時(shí)間要比寫來(lái)得多。有時(shí)候，當(dāng)你專注并深入思考某個(gè)問(wèn)題的時(shí)候，你可以坐下來(lái)，一個(gè)下午寫大量的代碼。

你的代碼很能很快就工作了，但是，隨著應(yīng)用的成熟，還會(huì)有很多其他的事情發(fā)生，這就要求你的進(jìn)行進(jìn)行審查，修改，和調(diào)整。例如：

bug是暴露的

新功能被添加到應(yīng)用程序

程序在新的環(huán)境下工作（例如，市場(chǎng)上出現(xiàn)新想瀏覽器）

代碼改變用途

代碼得完全從頭重新，或移植到另一個(gè)架構(gòu)上或者甚至使用另一種語(yǔ)言

由于這些變化，很少人力數(shù)小時(shí)寫的代碼最終演變成花數(shù)周來(lái)閱讀這些代碼。這就是為什么創(chuàng)建可維護(hù)的代碼對(duì)應(yīng)用程序的成功至關(guān)重要。

可維護(hù)的代碼意味著：

可讀的

一致的

可預(yù)測(cè)的

看上去就像是同一個(gè)人寫的

已記錄

提示： 不遵守這些原則代碼也能運(yùn)行起來(lái)。只是可能出現(xiàn)難以維護(hù)的現(xiàn)象。規(guī)范就像一種模式，大家按照一種模式來(lái)，那么閱讀其他人的代碼，成本就降低了。

function func() {
    var a = 1,
        b = 2,
        sum = a + b,
        myobject = {},
        i,
        j;
    // function body...
}

注意：在es6中，使用let 定義，可能出現(xiàn)"暫時(shí)性死區(qū)", 具體想知道什么叫做"暫時(shí)性死區(qū)" , 請(qǐng)查看阮一峰 ECMAScript 6 入門

// 次佳的循環(huán)
for (var i = 0; i < myarray.length; i++) {
// 使用myarray[i]做點(diǎn)什么
}
//更好的方式
for (var i = 0, max = myarray.length; i < max; i++) {
// 使用myarray[i]做點(diǎn)什么
}

**JSLint提示您這樣做，原因是++和–-促進(jìn)了“過(guò)分棘手(excessive trickiness)”。//zxx:這里比較難翻譯，我想本意應(yīng)該是讓代碼變得更加的棘手
如果你直接無(wú)視它，JSLint的plusplus選項(xiàng)會(huì)是false（默認(rèn)是default）。**

還有兩種變化的形式，其又有了些微改進(jìn)，因?yàn)椋?/p>

少了一個(gè)變量(無(wú)max)

向下數(shù)到0，通常更快，因?yàn)楹?做比較要比和數(shù)組長(zhǎng)度或是其他不是0的東西作比較更有效率

//第一種變化的形式：
var i, myarray = [];
for (i = myarray.length; i–-;) {
// 使用myarray[i]做點(diǎn)什么
}

//第二種使用while循環(huán)：

var myarray = [],
i = myarray.length;
while (i–-) {
// 使用myarray[i]做點(diǎn)什么
}

面兩種情況優(yōu)于前面兩種情況。

for-in循環(huán)應(yīng)該用在非數(shù)組對(duì)象的遍歷上，使用for-in進(jìn)行循環(huán)也被稱為“枚舉”。

從技術(shù)上將，你可以使用for-in循環(huán)數(shù)組（因?yàn)镴avaScript中數(shù)組也是對(duì)象），但這是不推薦的。因?yàn)槿绻麛?shù)組對(duì)象已被自定義的功能增強(qiáng)，就可能發(fā)生邏輯錯(cuò)誤。另外，在for-in中，屬性列表的順序（序列）是不能保證的。所以最好數(shù)組使用正常的for循環(huán)，對(duì)象使用for-in循環(huán)。

有個(gè)很重要的hasOwnProperty()方法，當(dāng)遍歷對(duì)象屬性的時(shí)候可以過(guò)濾掉從原型鏈上下來(lái)的屬性

// 對(duì)象
var man = {
    hands: 2,
    legs: 2,
    heads: 1
};

// 在代碼的某個(gè)地方
// 一個(gè)方法添加給了所有對(duì)象
if (typeof Object.prototype.clone === "undefined") {
    Object.prototype.clone = function () {};
}
====================================================================
// for-in 循環(huán)
for (var i in man) {
if (man.hasOwnProperty(i)) { // 過(guò)濾
    console.log(i, ":", man[i]);
}
}
/* 控制臺(tái)顯示結(jié)果
hands : 2
legs : 2
heads : 1
*/
==========================================================================
// 反面例子:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, ":", man[i]);
}
/*
控制臺(tái)顯示結(jié)果
hands : 2
legs : 2
heads : 1
clone: function()
*/

增加內(nèi)置的構(gòu)造函數(shù)原型（如Object(), Array(), 或Function()）挺誘人的，但是這嚴(yán)重降低了可維護(hù)性，因?yàn)樗屇愕拇a變得難以預(yù)測(cè)。使用你代碼的其他開發(fā)人員很可能更期望使用內(nèi)置的 JavaScript方法來(lái)持續(xù)不斷地工作，而不是你另加的方法。

因此，不增加內(nèi)置原型是最好的。你可以指定一個(gè)規(guī)則，僅當(dāng)下面的條件均滿足時(shí)例外：

可以預(yù)期將來(lái)的ECMAScript版本或是JavaScript實(shí)現(xiàn)將一直將此功能當(dāng)作內(nèi)置方法來(lái)實(shí)現(xiàn)。例如，- 你可以添加ECMAScript 5中描述的方法，一直到各個(gè)瀏覽器都迎頭趕上。這種情況下，你只是提前定義了有用的方法。

如果您檢查您的自定義屬性或方法已不存在——也許已經(jīng)在代碼的其他地方實(shí)現(xiàn)或已經(jīng)是你支持的瀏覽器JavaScript引擎部分。

你清楚地文檔記錄并和團(tuán)隊(duì)交流了變化。

   if (typeof Object.protoype.myMethod !== "function") {
       Object.protoype.myMethod = function () {
           // 實(shí)現(xiàn)...
       };
   }

一般情況下，強(qiáng)烈不建議使用

JavaScript的變量在比較的時(shí)候會(huì)隱式類型轉(zhuǎn)換。這就是為什么一些諸如：false == 0 或 “” == 0 返回的結(jié)果是true。為避免引起混亂的隱含類型轉(zhuǎn)換，在你比較值和表達(dá)式類型的時(shí)候始終使用===和!==操作符。

var zero = 0;
if (zero === false) {
// 不執(zhí)行，因?yàn)閦ero為0, 而不是false
}

// 反面示例
if (zero == false) {
// 執(zhí)行了...
}

如果你現(xiàn)在的代碼中使用了eval()，記住該咒語(yǔ)“eval()是魔鬼”。此方法接受任意的字符串，并當(dāng)作JavaScript代碼來(lái)處理。當(dāng)有 問(wèn)題的代碼是事先知道的（不是運(yùn)行時(shí)確定的），沒(méi)有理由使用eval()。如果代碼是在運(yùn)行時(shí)動(dòng)態(tài)生成，有一個(gè)更好的方式不使用eval而達(dá)到同樣的目 標(biāo)。例如，用方括號(hào)表示法來(lái)訪問(wèn)動(dòng)態(tài)屬性會(huì)更好更簡(jiǎn)單：

// 反面示例
var property = "name";
alert(eval("obj." + property));

// 更好的
var property = "name";
alert(obj[property]);

代碼沒(méi)有縮進(jìn)基本上就不能讀了。唯一糟糕的事情就是不一致的縮進(jìn)，因?yàn)樗瓷先ハ袷亲裱艘?guī)范，但是可能一路上伴隨著混亂和驚奇。重要的是規(guī)范地使用縮進(jìn)。

一些開發(fā)人員更喜歡用tab制表符縮進(jìn)，因?yàn)槿魏稳硕伎梢哉{(diào)整他們的編輯器以自己喜歡的空格數(shù)來(lái)顯示Tab。有些人喜歡空格——通常四個(gè)，這都無(wú)所謂，只要團(tuán)隊(duì)每個(gè)人都遵循同一個(gè)規(guī)范就好了。這本書，例如，使用四個(gè)空格縮進(jìn)，這也是JSLint中默認(rèn)的縮進(jìn)。

什么應(yīng)該縮進(jìn)呢？規(guī)則很簡(jiǎn)單——花括號(hào)里面的東西。這就意味著函數(shù)體，循環(huán) (do, while, for, for-in)，if，switch，以及對(duì)象字面量中的對(duì)象屬性。下面的代碼就是使用縮進(jìn)的示例：

function outer(a, b) {
    var c = 1,
        d = 2,
        inner;
    if (a > b) {
        inner = function () {
            return {
                r: c - d
            };
        };
    } else {
        inner = function () {
            return {
                r: c + d
            };
        };
    }
    return inner;
}

// 糟糕的實(shí)例
for (var i = 0; i < 10; i += 1)
alert(i);
// 好的實(shí)例
for (var i = 0; i < 10; i += 1) {
alert(i);
}

這個(gè)實(shí)例中，仁者見仁智者見智，但也有個(gè)案，括號(hào)位置不同會(huì)有不同的行為表現(xiàn)。這是因?yàn)榉痔?hào)插入機(jī)制(semicolon insertion mechanism)——JavaScript是不挑剔的，當(dāng)你選擇不使用分號(hào)結(jié)束一行代碼時(shí)JavaScript會(huì)自己幫你補(bǔ)上。這種行為可能會(huì)導(dǎo)致麻 煩，如當(dāng)你返回對(duì)象字面量，而左括號(hào)卻在下一行的時(shí)候

// 警告： 意外的返回值
function func() {
    return
    // 下面代碼不執(zhí)行
    {
        name : "Batman"
    }
}

// 警告： 意外的返回值
function func() {
    return undefined;
    // 下面代碼不執(zhí)行
    {
        name : "Batman"
    }
}

空格的使用同樣有助于改善代碼的可讀性和一致性。在寫英文句子的時(shí)候，在逗號(hào)和句號(hào)后面會(huì)使用間隔。在JavaScript中，你可以按照同樣的邏輯在列表模樣表達(dá)式（相當(dāng)于逗號(hào)）和結(jié)束語(yǔ)句（相對(duì)于完成了“想法”）后面添加間隔。

適合使用空格的地方包括：

for循環(huán)分號(hào)分開后的的部分：如for (var i = 0; i < 10; i += 1) {...}

for循環(huán)中初始化的多變量(i和max)：for (var i = 0, max = 10; i < max; i += 1) {...}

分隔數(shù)組項(xiàng)的逗號(hào)的后面：var a = [1, 2, 3];

對(duì)象屬性逗號(hào)的后面以及分隔屬性名和屬性值的冒號(hào)的后面：var o = {a: 1, b: 2};

限定函數(shù)參數(shù)：myFunc(a, b, c)

函數(shù)聲明的花括號(hào)的前面：function myFunc() {}

匿名函數(shù)表達(dá)式function的后面：var myFunc = function () {};

使用空格分開所有的操作符和操作對(duì)象是另一個(gè)不錯(cuò)的使用，這意味著在+, -, *, =, <, >, <=, >=, ===, !==, &&, ||, +=等前后都需要空格。

// 寬松一致的間距
// 使代碼更易讀
// 使得更加“透氣”
var d = 0,
    a = b + 1;
if (a && b && c) {
    d = a % c;
    a += d;
}

// 反面例子
// 缺失或間距不一
// 使代碼變得疑惑
var d = 0,
    a = b + 1;
if (a&&b&&c) {
    d=a % c;
    a+= d;
}

最后需要注意的一個(gè)空格——花括號(hào)間距。最好使用空格：

函數(shù)、if-else語(yǔ)句、循環(huán)、對(duì)象字面量的左花括號(hào)的前面({)

else或while之間的右花括號(hào)(})

//{} 空格
if (4) {
console.log(1)
} else if (3) {
console.log(1)
}
var a = {}

另一種方法讓你的代碼更具可預(yù)測(cè)性和可維護(hù)性是采用命名規(guī)范。這就意味著你需要用同一種形式給你的變量和函數(shù)命名。

下面是建議的一些命名規(guī)范，你可以原樣采用，也可以根據(jù)自己的喜好作調(diào)整。同樣，遵循規(guī)范要比規(guī)范是什么更重要。

JavaScript并沒(méi)有類，但有new調(diào)用的構(gòu)造函數(shù)：

var adam = new Person();  

因?yàn)闃?gòu)造函數(shù)仍僅僅是函數(shù)，僅看函數(shù)名就可以幫助告訴你這應(yīng)該是一個(gè)構(gòu)造函數(shù)還是一個(gè)正常的函數(shù)。
命名構(gòu)造函數(shù)時(shí)首字母大寫具有暗示作用，使用小寫命名的函數(shù)和方法不應(yīng)該使用new調(diào)用：

function MyConstructor() {...}
function myFunction() {...}、

當(dāng)你的變量或是函數(shù)名有多個(gè)單詞的時(shí)候，最好單詞的分離遵循統(tǒng)一的規(guī)范，有一個(gè)常見的做法被稱作“駝峰(Camel)命名法”，就是單詞小寫，每個(gè)單詞的首字母大寫。

對(duì)于構(gòu)造函數(shù)，可以使用大駝峰式命名法(upper camel case)，如MyConstructor()。

對(duì)于函數(shù)和方法名稱，你可以使用小駝峰式命名法(lower camel case)，像是myFunction(), calculateArea()和getFirstName()。

## 4.3 注釋(Writing Comments)

你必須注釋你的代碼，即使不會(huì)有其他人向你一樣接觸它。通常，當(dāng)你深入研究一個(gè)問(wèn)題，你會(huì)很清楚的知道這個(gè)代碼是干嘛用的，但是，當(dāng)你一周之后再回來(lái)看的時(shí)候，想必也要耗掉不少腦細(xì)胞去搞明白到底怎么工作的。
很顯然，注釋不能走極端：每個(gè)多帶帶變量或是多帶帶一行。但是，你通常應(yīng)該記錄所有的函數(shù)，它們的參數(shù)和返回值，或是任何不尋常的技術(shù)和方法。要想到注 釋可以給你代碼未來(lái)的閱讀者以諸多提示；閱讀者需要的是（不要讀太多的東西）僅注釋和函數(shù)屬性名來(lái)理解你的代碼。例如，當(dāng)你有五六行程序執(zhí)行特定的任務(wù)， 如果你提供了一行代碼目的以及為什么在這里的描述的話，閱讀者就可以直接跳過(guò)這段細(xì)節(jié)。沒(méi)有硬性規(guī)定注釋代碼比，代碼的某些部分（如正則表達(dá)式）可能注釋 要比代碼多。

css規(guī)范我們偉大的張旭鑫老師，講的很清楚。面向?qū)傩缘拿?/p>

這是比較好的命名規(guī)范。簡(jiǎn)介來(lái)說(shuō)，就是我們先定義好一些常用基礎(chǔ)類樣式。組件則使用less,或者sass進(jìn)行組裝，形成即可。