筆者以前寫(xiě)Javascript的時(shí)候漓摩，經(jīng)常會(huì)把代碼寫(xiě)的又臭又長(zhǎng)又啰嗦裙士。
在經(jīng)過(guò)一段實(shí)踐的實(shí)踐和反思后，代碼的優(yōu)雅性應(yīng)該提高很多管毙。
所以個(gè)人就總結(jié)了寫(xiě)出優(yōu)雅Javascript代碼的心得腿椎。
不寫(xiě)分號(hào)
不寫(xiě)分號(hào)能顯著讓代碼更加優(yōu)雅，并少輕松你的雙手夭咬。
可能很多人會(huì)有疑問(wèn)啃炸，沒(méi)有分號(hào)的Javascript也能正常運(yùn)行？
幾乎是的卓舵。不過(guò)在一些特殊的時(shí)候Javascript引擎并不會(huì)幫助你正確插入分號(hào)南用。
具體的情況只有這五個(gè)符號(hào)：+， - 掏湾，(裹虫， [， /
沒(méi)了融击。
也就是說(shuō)筑公，凡是新的一行代碼以上述五個(gè)符號(hào)開(kāi)頭，那么之前一句的末尾是需要分號(hào)的尊浪。
而在實(shí)際情況中匣屡，以+，- 開(kāi)頭的新一行代碼幾乎不可能出現(xiàn)拇涤。
所以可能情況：
(function(){
// do something
})()
如果之前沒(méi)加分號(hào)耸采，那么這個(gè)匿名函數(shù)外的括號(hào)會(huì)調(diào)用上一行定義的函數(shù)，匿名函數(shù)就變成了參數(shù)工育。記住下面的這個(gè)分號(hào)
;(function(){
// do something
})()
還有比如這樣
;(a == 1 || b == 1) && fn()
;[].slice.call()
;/abc/.test('abcd')
除了上面例子，幾乎沒(méi)有其他情景需要加分號(hào)了搓彻。
所以經(jīng)常遇到這種情況如绸，一個(gè)javascript文件里幾百個(gè)分號(hào)全是沒(méi)必要的。
而且旭贬，通常在生產(chǎn)環(huán)境中會(huì)提前用uglify.js去壓縮代碼怔接，或是用ES6時(shí)babel轉(zhuǎn)碼，這都會(huì)幫你補(bǔ)全分號(hào)稀轨。
所以還有什么理由去寫(xiě)分號(hào)呢扼脐？
當(dāng)然寫(xiě)不寫(xiě)分號(hào)也屬于個(gè)人習(xí)慣，知道什么時(shí)候分號(hào)是不可省的才是重點(diǎn)。
PS：Vue.js的源碼就是不寫(xiě)分號(hào)的瓦侮。
使用ES6
相比較ES5艰赞，ES6的語(yǔ)法中的結(jié)構(gòu)賦值，箭頭函數(shù)肚吏，模板字符串方妖，對(duì)象的簡(jiǎn)寫(xiě)法等都能讓代碼變得干凈利落。
比如一個(gè)判斷奇偶的函數(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)雅的寫(xiě)法
邏輯運(yùn)算符
if (a == 1) {
b()
}
//可以寫(xiě)成
a == 1 && b()
初始化變量
var a = obj || {}
三元運(yùn)算符
var a = b % 2 == 0 ? 'even' : 'odd'
合理的命名
具體來(lái)說(shuō)有這樣幾點(diǎn)：
- 方法名以動(dòng)詞開(kāi)頭罚攀，比如
var getName = function(){} - 布爾值以is開(kāi)頭党觅，
var isEven = function(x){return x % 2 == 0} - 駝峰大小寫(xiě)和下劃線(xiàn)不要混用，比如
whatTheHell和what_the_hell - 下劃線(xiàn)只有在私有對(duì)象屬性時(shí)使用
- 方法內(nèi)部變量盡可能短
變量聲明
變量聲明盡可能的放在開(kāi)頭斋泄，這樣有助于：
- 提供一個(gè)單一地址查找到函數(shù)所有需要的局部變量
- 防止因聲明提升所引發(fā)的邏輯錯(cuò)誤
- 幫助牢記要聲明的變量杯瞻，盡可能地少適用全局變量
使用逗號(hào)隔開(kāi)換行，而非每一行重新var
var a = 1
var b = 2
//換成
var a = 1,
b = 2
有的時(shí)候也可以把逗號(hào)寫(xiě)在開(kāi)頭炫掐，這樣比較方便加入新的變量
var a = 1
,b = 2
,c = 3
對(duì)齊方式
var express = require('express')
var path = require('path')
var favicon = require('serve-favicon')
var logger = require('morgan')
實(shí)際上用var的時(shí)候是可以用逗號(hào)的魁莉。所以在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)
}
避免超長(zhǎng)代碼
如果代碼長(zhǎng)到底部的滾動(dòng)條都出現(xiàn)了，如何算得上優(yōu)雅呢卒废。
所以要保持每一行的代碼不要太長(zhǎng)沛厨，具體有這樣需要注意的地方：
- 內(nèi)部不重要的過(guò)程性代碼盡可能短，但至少保留語(yǔ)義
- 如果用到鏈?zhǔn)秸Z(yǔ)法摔认，可在 ' . '的開(kāi)頭換行
[].concat(arr).sort().forEach(fn)...
可以改成
[].concat(arr)
.sort()
.forEach(fn)...
- 字符串拼接時(shí)逆皮，用加號(hào)換行，或用ES6的模板字符串
- 如果因?yàn)檫壿嬤\(yùn)算符兒導(dǎo)致過(guò)長(zhǎng)参袱，可以將邏輯運(yùn)算符換行
- 如果函數(shù)參數(shù)過(guò)長(zhǎng)电谣，可以將參數(shù)換行，也是沒(méi)問(wèn)題的
- 盡可能避免嵌套過(guò)多的
if語(yǔ)句 - 如果還是很長(zhǎng)抹蚀，可以嘗試2個(gè)空格縮進(jìn)
其他細(xì)節(jié)
- 代碼不同功能區(qū)之間加空行剿牺，比如每個(gè)funtion之間
- 對(duì)于數(shù)組或類(lèi)數(shù)組，可以用map等函數(shù)替代for循環(huán)
- 如
+號(hào)的運(yùn)算符之間加空格 - 若多次引用同一外部對(duì)象的屬性环壤，則定義到方法內(nèi)部
最后
在實(shí)踐中還有很多可以注意的地方晒来，以后也會(huì)慢慢完善。
當(dāng)然郑现，也歡迎一起補(bǔ)充~~
寫(xiě)優(yōu)雅的代碼是很令人愉悅的湃崩。
代碼如詩(shī)~
