如何寫出優雅的Javascript代碼

筆者之前寫Javascript的時候，常常會把代碼寫的又臭又長又囉嗦。在通過一段實踐的實踐和反思後，代碼的優雅性提升不少。

不寫分號

不寫分號能顯著讓代碼更加優雅，並少輕鬆你的雙手。

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

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

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

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

而在實際狀況中，以+，- 開頭的新一行代碼幾乎不可能出現。 因此可能狀況：

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

若是以前沒加分號，那麼這個匿名函數外的括號會調用上一行定義的函數，匿名函數就變成了參數。記住下面的這個分號：

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

還有好比這樣：

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

;[].slice.call()

;/abc/.test('abcd')

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

因此常常遇到這種狀況，一個javascript文件裏幾百個分號全是不必的。

並且，一般在生產環境中會提早用uglify.js去壓縮代碼，或是用ES6時babel轉碼，這都會幫你補全分號。

因此還有什麼理由去寫分號呢？固然寫不寫分號也屬於我的習慣，知道何時分號是不可省的纔是重點。

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

使用ES6

相比較ES5，ES6的語法中的結構賦值，箭頭函數，模板字符串，對象的簡寫法等都能讓代碼變得乾淨利落。

好比一個判斷奇偶的函數：

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?`

 

一些優雅的寫法

邏輯運算符：

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
• 下劃線只有在私有對象屬性時使用
• 方法內部變量儘量短

 

變量聲明

變量聲明儘量的放在開頭，這樣有助於：

• 提供一個單一地址查找到函數全部須要的局部變量
• 防止因聲明提高所引起的邏輯錯誤
• 幫助牢記要聲明的變量，儘量地少適用全局變量
• 使用逗號隔開換行，而非每一行從新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中更常常出現的狀況:

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)
}

 

避免超長代碼

若是代碼長到底部的滾動條都出現了，如何算得上優雅呢。

因此要保持每一行的代碼不要太長，具體有這樣須要注意的地方：

• 內部不重要的過程性代碼儘量短，但至少保留語義
• 若是用到鏈式語法，可在 ' . '的開頭換行

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

能夠改爲：

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

• 字符串拼接時，用加號換行，或用ES6的模板字符串
• 若是由於邏輯運算符兒致使過長，能夠將邏輯運算符換行
• 若是函數參數過長，能夠將參數換行，也是沒問題的
• 儘量避免嵌套過多的 if 語句
• 若是仍是很長，能夠嘗試2個空格縮進

 

其餘細節

• 代碼不一樣功能區之間加空行，好比每一個funtion之間
• 對於數組或類數組，能夠用map等函數替代for循環
• 如 + 號的運算符之間加空格
• 若屢次引用同一外部對象的屬性，則定義到方法內部

來源：簡書