如何寫出優雅的Javascript代碼

vw3683 9年前發布 | 9K 次閱讀 JavaScript開發 JavaScript ECMAScript

筆者以前寫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循環
如 + 號的運算符之間加空格
若多次引用同一外部對象的屬性，則定義到方法內部

最后

在實踐中還有很多可以注意的地方，以后也會慢慢完善。

來自：http://www.jianshu.com/p/4e4289c5bcdc

本文由用戶 vw3683 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1474355001009.html

JavaScript開發 JavaScript ECMAScript