JavaScript編碼風(fēng)格指南:一、基本的格式化

1.1 使用4個(gè)空格作為一個(gè)縮進(jìn)層級(jí)。

1.2 語(yǔ)句結(jié)尾寫(xiě)分號(hào)。

1.3 代碼單行長(zhǎng)度不超過(guò)80個(gè)字符。

1.4 換行:

當(dāng)一行長(zhǎng)度達(dá)到了單行最大字符數(shù)限制時(shí),就需要手動(dòng)將一行拆成兩行。通常會(huì)在運(yùn)算符后換行,下一行將會(huì)增加兩個(gè)層級(jí)的縮進(jìn)。

//好的做法
if (isLeapYear && isFebruary && day == 29 && itsYourBirthday && 
        noPlans) {
    waitAnotherFourYears();
}

//不好的做法:第二行只有一個(gè)縮進(jìn)
callAFunction(document, element, window, "some string value", true, 
    123, navigator);

//不好的做法:在運(yùn)算符之前換行了
callAFunction(document, element, window, "some string value", true
    , 123,navigator);
    

這個(gè)規(guī)則有一個(gè)例外:當(dāng)給變量賦值時(shí),第二行的位置應(yīng)當(dāng)與賦值運(yùn)算符的位置保持對(duì)其。例如:

var result = something + anotherThing + yetAnotherThing + someThingElse + 
             anotherSomethingElse;

1.5 空行

空行是常常被忽略的一個(gè)方面,通常來(lái)講,代碼看起來(lái)應(yīng)當(dāng)像一系列可讀的段落,而不是一大段揉在一起。應(yīng)該在下面這些場(chǎng)景中添加空行:

  • 在方法之間
  • 在方法中的局部變量和第一條語(yǔ)句之間
  • 在多行或單行注釋之間
  • 在方法內(nèi)的邏輯片段之間
  • 其他...

1.6 命名

“計(jì)算機(jī)科學(xué)只存在兩個(gè)難題:緩存失敗和命名?!?————Phil Karlton。

使用駝峰命名方法給變量和函數(shù)命名。如:anotherThing、yetAnotherThing。
鏈接:常用命名

1.6.1 變量和函數(shù)
遵守駝峰大小寫(xiě)命名法;
變量名:前綴應(yīng)該是名詞;
函數(shù)名:前綴應(yīng)該是動(dòng)詞。如:

//好的寫(xiě)法
var count =10;
var myName = "Jwk";
var found = true;

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

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

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

常用動(dòng)詞:(鏈接:更多

| can | 函數(shù)返回一個(gè)布爾值 |
| has | 函數(shù)返回一個(gè)布爾值 |
| is | 函數(shù)返回一個(gè)布爾值 |
| get | 函數(shù)返回一個(gè)非布爾值 |
| set | 函數(shù)用來(lái)保存一個(gè)值 |

1.6.2 常量

雖然JavaScript中并沒(méi)有真正的常量的概念,但這并不能阻止開(kāi)發(fā)者將變量作為常量。

約定使用大寫(xiě)字母和下劃線來(lái)命名常量。例如:

if (count < MAX_COUNT) {
    doSomething();
}

1.6.3 構(gòu)造函數(shù)

在JavaScript中,構(gòu)造函數(shù)是前面冠以new運(yùn)算符的函數(shù),用來(lái)創(chuàng)建對(duì)象。例如,Object和RegExp。所以開(kāi)發(fā)者創(chuàng)建自己的構(gòu)造函數(shù)時(shí),命名應(yīng)該與本地語(yǔ)言保持一致,采用駝峰命名法。

駝峰命名分為大寫(xiě)和小寫(xiě)兩種,例如anoherName和AnotherName,構(gòu)造函數(shù)采用后一種大寫(xiě)模式,這樣可以將構(gòu)造函數(shù)從變量和普通函數(shù)中區(qū)分出來(lái)。

看下一段代碼:

var me = Person("Nicholas");
var you = getPerson("Michael");

根據(jù)上面的約定,我們一眼可以看出來(lái)第一行出了問(wèn)題,缺少new運(yùn)算符,第二行看起來(lái)還ok。

1.7直接量

1.7.1 字符串

約定使用雙引號(hào)包裹字符串。

約定不使用“\”來(lái)創(chuàng)建多行字符串,使用“+”代替。

1.7.2 數(shù)字

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

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

//不推薦的小數(shù)寫(xiě)法:沒(méi)有小數(shù)部分
var price = 10.;

//不推薦的小數(shù)寫(xiě)法:沒(méi)有整數(shù)部分
var price = .1;

//不推薦的寫(xiě)法:八進(jìn)制寫(xiě)法已經(jīng)被棄用了
var num = 010;

1.7.3 null 和 undefined

這兩個(gè)詞經(jīng)常會(huì)被搞混,邪門(mén)的是null === undefined 返回結(jié)果竟為true。

null :把他當(dāng)做對(duì)象的占位符
undefined :沒(méi)有被初始化的變量都有一個(gè)初始值,即undefined,表示這個(gè)變量等待被賦值。

1、如果你使用了一個(gè)可能賦值為一個(gè)對(duì)象的變量時(shí),將其賦值為null。不要寫(xiě)聲明了但未賦值的變量。

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

//不好的做法,foo未被聲明
var person;
console.log(typeof person);          //"undefined"
console.log(typeof foo);             //"undefined"

這樣寫(xiě)就可以保證只有在一種情況下typeof才會(huì)返回“undefined”:當(dāng)變量未聲明時(shí)。

2、比較的時(shí)候注意,因?yàn)?undefined === null ,返回true

//不好的寫(xiě)法
var person;
if (person != null) {
    //...
}

1.7.4 對(duì)象直接量

最流行的做法是使用對(duì)象直接量方法替代傳統(tǒng)的創(chuàng)建object實(shí)例再添加屬性的做法。

//不好的寫(xiě)法
var book = new Object();
book.title = "編寫(xiě)可維護(hù)的 JavaScript";

//好的寫(xiě)法
var book = {
    title : "編寫(xiě)可維護(hù)的 JavaScript"
}

1.7.5 數(shù)組直接量

同對(duì)象直接量一樣。

//不好的寫(xiě)法
var colors = new AArray("red", "green", "blue");

//好的寫(xiě)法
var color = [ "red", "green", "blue"];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第1章 JavaScript 簡(jiǎn)介 JavaScript 具備與瀏覽器窗口及其內(nèi)容等幾乎所有方面交互的能力。 歐洲...
    力氣強(qiáng)閱讀 1,293評(píng)論 0 0
  • 本章內(nèi)容 語(yǔ)法 數(shù)據(jù)類型 流控制語(yǔ)句 理解函數(shù) 3.1 語(yǔ)法 3.1.1 區(qū)分大小寫(xiě) 區(qū)分大小寫(xiě) 3.1.2 標(biāo)識(shí)...
    悶油瓶小張閱讀 801評(píng)論 0 0
  • FreeCodeCamp - Basic JavaScript 寫(xiě)在前面: 我曾經(jīng)在進(jìn)谷前刷過(guò)這一套題,不過(guò)當(dāng)時(shí)只...
    付林恒閱讀 16,589評(píng)論 5 28
  • 翻了翻手機(jī)相冊(cè),驚奇的發(fā)現(xiàn),竟然沒(méi)有自拍照?。?!作為一個(gè)女生,竟然沒(méi)有自拍,多么悲傷的消息。。。 接下來(lái),事情變成...
    bobo屋閱讀 211評(píng)論 2 0
  • 。。這么多年了,看清一個(gè)人還是得靠錢(qián)啊。。
    我是瑪莎閱讀 160評(píng)論 0 0

友情鏈接更多精彩內(nèi)容