javascript代碼風格指北

前言

在咱們平時工做中寫代碼是最頻繁的事情了，但咱們的代碼真的"好看"嗎？

預計本文閱讀時間(10分鐘)

正文

1.1--語句結尾

咱們來看一段代碼

//合法的代碼
var name = "Dreams";
function sayName() {
    alert(name);
}
//合法的代碼，但不推薦這樣寫
var name = "Dreams"
function sayName() {
    alert(name)
}
複製代碼

這裏咱們能夠看到上面兩段代碼的區別就是在於一段加了分號，一段沒有加，那麼問題來了，咱們到底該不應加分號？

解釋

這裏其實有賴於分析的自動分號插入(Automatic Semicolon Insertion, ASI)機制，Javascript代碼省略分號也是能夠正常工做的。ASI會自動尋找代碼中應當使用分號但實際沒有分號額位置，並插入分號。大多數場景下ASI都會正確插入分號，不會產生錯誤。但ASI的分號插入規則很是複雜且很難記住，所以推薦你們不要省略分號。看一下這段代碼：

// 原始代碼
function getData() {
    return
    {
        title: "Dreams",
        author: "Dreams"
    }
}
//分析器會將它理解成
function getData() {
    return;
    {
        title: "Dreams",
        author: "Dreams"  
    };
}
複製代碼

在這段代碼中，函數getData()的本意是返回一個包含一些數據的對象。然而，return以後新起了一行，致使return後被插入了一個分號，這會致使函數返回值是undefined. 能夠經過將左花括號移至與return同一行的位置來修復這個問題。

//這段代碼工做正常，儘管沒有用分號
function getData() {
    return {
        title: "Dreams",
        author: "Dreams"  
    }
}
複製代碼

ASI在某些場景下是很管用的，特別是，有時候ASI能夠幫助減小代碼錯誤。當某個場景咱們認爲不須要插入分號而ASI認爲須要插入時，經常會產生錯誤。因此咱們儘可能養成加分號的習慣，在某種意義上加上分號還提升程序的性能哦！

1.2--換行

當一行長度達到了單行最大字符數限制時，就須要手動將一行拆成兩行。一般咱們會在運算符後換行，下一行會增長兩個層級的縮進。好比這樣。

在這個例子中，逗號時一個運算符，應看成爲前一行的行尾。這個換行位置很是重要，由於ASI機制會在某些場景下在行結束的位置插入分號。老是將一個運算符置爲行尾，ASI就不會自做主張地插入分號，也就避免了錯誤的發生。

1.3--命名

咱們只要是代碼，都會涉及變量和函數，所以變量和函數命名對於加強代碼可讀性相當重要。那麼在js中，ECMAScript推薦咱們遵循**駝峯式大小寫(Camel Case)**的命名方式.這種命名方式是小寫字母開始的，後續每一個單詞首字母都大寫，好比：

var thisMyName;
var anotherVariable;
var aVeryLongVariableName;
複製代碼

函數的命名

咱們推薦函數函數前用動詞開頭

//好的寫法
var count = 10;
var myName = "Dreams"
var found = true
//很差的寫法:變量看起來像函數
var getCount = 10;
var isFound = true;
//好的寫法
function getName() {
    return myName;
}
//很差的寫法:函數看起來像變量
function theName() {
    return myName;
}
複製代碼

命名是一種學問，更是一門技術！，一般咱們應儘可能保持儘量的簡短，抓重點的命名方式。經過函數命就大概能夠看出這個是幹什麼的函數。記住寫代碼永遠不是在給本身寫，而是在給你下一個接手的人寫，因此代碼寫的規範對你們都有好處 咱們推薦的函數有：can has is get set 例如：canDo hasClass isBlack getData setData

1.4--null

null是一個特殊值，但咱們經常誤解它，將它和undefined搞混。在下列場景中應當使用null.

• 用來初始化一個變量
• 用來和一個已經初始化的變量比較，這個變量能夠是也能夠不是一個對象
• 當函數的參數指望是對象時，用做參數傳入。
• 當函數的返回值指望是對象時，用做返回值傳出

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

• 不要使用null來檢測是否傳入了某個參數。
• 不要用null來檢測一個未初始化的變量

示例代碼：

//好的用法
var person = null;
function getPerson() {
    if (condition) {
        return new Person("Dreams");
    } else {
        return null;
    }
}
var person = getPerson();
if (person !== null) {
    doSomething();
}

//很差的寫法：用來和未初始化的變量比較
var person;
if (person != null) {
   doSomething() 
}
//很差的寫法:用來和未初始化的變量比較
var person;
if (person != null) {
    doSomething();
}
//很差的寫法：檢測是否傳入了參數
function doSomething(arg1,arg2,arg3,arg4) {
    if (arg4 != null) {
        doSomethingElse();
    }
}
複製代碼

1.5--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都會致使tpyeof返回"undefined" 當變量未聲明時，若是你使用了一個可能(或可能不會)賦值爲一個對象的變量時，則將其賦值爲null

//好的作法
var person = null;
console.log(person === null);//true
複製代碼

將變量初始值賦值爲null代表了這個變量的意圖，他最終極可能賦值爲對象。typeof運算符運算null的類型時返回"object"，這樣就能夠和undefined區分開了

1.6--對象字面量

聲明數組和對象時推薦下面的作法

//好的寫法
var book = {}
var numbers = [1,2,3,4]
//很差的寫法
var book = new Object();
var numbers = new Array(1,2,3,4)
複製代碼

結語

本文內容參考至<<編寫可維護的javascript>>

在平常工做中咱們應當合理使用上述方法對變量/方法/對象/數組進行管理，而不是胡亂的起名和管理，這樣會對咱們項目後續的維護不利，若是你們還有什麼好的習慣，能夠在評論區提出哦。