筆者以前寫Javascript的時候，經(jīng)常會把代碼寫的又臭又長又啰嗦。在經(jīng)過一段實踐的實踐和反思后，代碼的優(yōu)雅性提高很多。

不寫分號

不寫分號能顯著讓代碼更加優(yōu)雅，并少輕松你的雙手。

可能很多人會有疑問，沒有分號的Javascript也能正常運行？

幾乎是的。不過在一些特殊的時候Javascript引擎并不會幫助你正確插入分號。

具體的情況只有這五個符號： + ， - ， ( ， [ ， / 沒了。

也就是說，凡是新的一行代碼以上述五個符號開頭，那么之前一句的末尾是需要分號的。

而在實際情況中，以+，- 開頭的新一行代碼幾乎不可能出現(xiàn)。 所以可能情況：

(function(){
  // do something
})()

如果之前沒加分號，那么這個匿名函數(shù)外的括號會調(diào)用上一行定義的函數(shù)，匿名函數(shù)就變成了參數(shù)。記住下面的這個分號：

;(function(){
  // do something
})()

還有比如這樣：

;(a == 1 || b == 1) && fn()

;[].slice.call()

;/abc/.test('abcd')

除了上面例子，幾乎沒有其他情景需要加分號了。

所以經(jīng)常遇到這種情況，一個javascript文件里幾百個分號全是沒必要的。

而且，通常在生產(chǎn)環(huán)境中會提前用uglify.js去壓縮代碼，或是用ES6時babel轉(zhuǎn)碼，這都會幫你補全分號。

所以還有什么理由去寫分號呢？當(dāng)然寫不寫分號也屬于個人習(xí)慣，知道什么時候分號是不可省的才是重點。

PS：Vue.js的源碼就是不寫分號的。

使用ES6

相比較ES5，ES6的語法中的結(jié)構(gòu)賦值，箭頭函數(shù)，模板字符串，對象的簡寫法等都能讓代碼變得干凈利落。

比如一個判斷奇偶的函數(shù)：

function isEven(x){
    return x % 2 == 0
}

ES6：

const isEven = x => x % 2 == 0

比如字符串拼接：

dom.innerHTML='Hello '
    + name
    + ',How you today?'

ES6：

dom.innerHTML=`Hello 
    ${name}
    How you today?`

一些優(yōu)雅的寫法

邏輯運算符：

if (a == 1) {
    b()
}
//可以寫成
a == 1 && b()

初始化變量：

var a = obj || {}

三元運算符：

var a = b % 2 == 0 ? 'even' : 'odd'

合理的命名

具體來說有這樣幾點：

• 方法名以動詞開頭，比如 var getName = function(){}
• 布爾值以is開頭， var isEven = function(x){return x % 2 == 0}
• 駝峰大小寫和下劃線不要混用，比如 whatTheHell 和 what_the_hell
• 下劃線只有在私有對象屬性時使用
• 方法內(nèi)部變量盡可能短

變量聲明

變量聲明盡可能的放在開頭，這樣有助于：

• 提供一個單一地址查找到函數(shù)所有需要的局部變量
• 防止因聲明提升所引發(fā)的邏輯錯誤
• 幫助牢記要聲明的變量，盡可能地少適用全局變量
• 使用逗號隔開換行，而非每一行重新var

var a = 1
var b = 2
//換成
var a = 1,
    b = 2

有的時候也可以把逗號寫在開頭，這樣比較方便加入新的變量：

var a = 1
   ,b = 2
   ,c = 3

對齊方式

var express =   require('express')
var path =      require('path')
var favicon =   require('serve-favicon')
var logger =    require('morgan')

實際上用var的時候是可以用逗號的。所以在ES6中更經(jīng)常出現(xiàn)的情況:

import Vue          from 'vue'
import VueResource  from 'vue-resource'
import VueValidator from 'vue-validator'
import VueRouter    from 'vue-router'
import Vuex         from 'vuex'

縮短常用方法名

var $ = function(x){
    return document.getElementById(x)
}

避免超長代碼

如果代碼長到底部的滾動條都出現(xiàn)了，如何算得上優(yōu)雅呢。

所以要保持每一行的代碼不要太長，具體有這樣需要注意的地方：

• 內(nèi)部不重要的過程性代碼盡可能短，但至少保留語義
• 如果用到鏈?zhǔn)秸Z法，可在 ' . '的開頭換行

[].concat(arr).sort().forEach(fn)...

可以改成：

[].concat(arr)
  .sort()
  .forEach(fn)...

• 字符串拼接時，用加號換行，或用ES6的模板字符串
• 如果因為邏輯運算符兒導(dǎo)致過長，可以將邏輯運算符換行
• 如果函數(shù)參數(shù)過長，可以將參數(shù)換行，也是沒問題的
• 盡可能避免嵌套過多的 if 語句
• 如果還是很長，可以嘗試2個空格縮進

其他細節(jié)

• 代碼不同功能區(qū)之間加空行，比如每個funtion之間
• 對于數(shù)組或類數(shù)組，可以用map等函數(shù)替代for循環(huán)
• 如 + 號的運算符之間加空格
• 若多次引用同一外部對象的屬性，則定義到方法內(nèi)部

來源：