網(wǎng)上有不少關(guān)于JS編寫優(yōu)化建議,這里我根據(jù)自己的經(jīng)驗提出一些比較有用的意見。
1. 按強類型風(fēng)格寫代碼
JS是弱類型的,但是寫代碼的時候不能太隨意,寫得太隨意也體現(xiàn)了編碼風(fēng)格不好。下面分點說明:
(1)定義變量的時候要指明類型,告訴JS解釋器這個變量是什么數(shù)據(jù)類型的,而不要讓解釋器去猜,例如不好的寫法:
聲明了三個變量,但其實沒什么用,因為解釋器不知道它們是什么類型的,好的寫法應(yīng)該是這樣的:
定義變量的時候就給他一個默認(rèn)值,這樣不僅方便了解釋器,也方便了閱讀代碼的人,他會在心里有數(shù)——知道這些變量可能會當(dāng)作什么用。
(2)不要隨意地改變變量的類型,例如下面代碼:
第1行它是一個整型,第2行它變成了一個字符串。因為JS最終都會被解釋成匯編的語言,匯編語言變量的類型肯定是要確定的,你把一個整型的改成了字符串,那解釋器就得做一些額外的處理。并且這種編碼風(fēng)格是不提倡的,有一個變量第1行是一個整型,第10行變成了一個字符串,第20行又變成了一個object,這樣就讓閱讀代碼的人比較困惑,上面明明是一個整數(shù),怎么突然又變成一個字符串了。好的寫法應(yīng)該是再定義一個字符串的變量:
(3)函數(shù)的返回類型應(yīng)該是要確定的,例如下面不確定的寫法:
getPrice這個函數(shù)有可能返回一個整數(shù),也有可能返回一個空的字符串。這樣寫也不太好,雖然它是符合JS語法的,但這種編碼風(fēng)格是不好的。使用你這個函數(shù)的人會有點無所適從,不敢直接進行加減乘除,因為如果返回字符串進行運算的話值就是NaN了。函數(shù)的返回類型應(yīng)該是要確定的,如下面是返回整型:
然后告訴使用者,如果返回-1就表示不合法。如果類型確定,解釋器也不用去做一些額外的工作,可以加快運行速度。
2. 減少作用域查找
(1)不要讓代碼暴露在全局作用域下
例如以下運行在全局作用域的代碼:
有時候你需要在頁面直接寫一個script,要注意在一個script標(biāo)簽里面,代碼的上下文都是全局作用域的,由于全局作用域比較復(fù)雜,查找比較慢。例如上面的map變量,第二行在使用的時候,需要在全局作用域查找一下這個變量,假設(shè)map是在一個循環(huán)里面使用,那可能就會有效率問題了。所以應(yīng)該要把它搞成一個局部的作用域:
上面用了一個function制造一個局部作用域,也可以用ES6的塊級作用域。由于map這個變量直接在當(dāng)前的局部作用域命中了,所以就不用再往上一級的作用域(這里是全局作用域)查找了,而局部作用域的查找是很快的。同時直接在全局作用域定義變量,會污染window對象。
(2)不要濫用閉包
閉包的作用在于可以讓子級作用域使用它父級作用域的變量,同時這些變量在不同的閉包是不可見的。這樣就導(dǎo)致了在查找某個變量的時候,如果當(dāng)前作用域找不到,就得往它的父級作用域查找,一級一級地往上直到找到了,或者到了全局作用域還沒找到。因此如果閉包嵌套得越深,那么變量查找的時間就越長。如下:
上面的代碼定義了一個process函數(shù),在這個函數(shù)里面count變量的查找時間要高于局部的factor變量。其實這里不太適合用閉包,可以直接把count傳給process:
這樣count的查找時間就和factor一樣,都是在當(dāng)前作用域直接命中。這個就啟示我們?nèi)绻硞€全局變量需要頻繁地被使用的時候,可以用一個局部變量緩存一下,如下:
頻繁地使用了window.location對象,所以可以先把它緩存一下:
搞成了一個局變變量,這樣查找就會明顯快于全局的查找,代碼也可以寫少一點。
3. 避免==的使用
這里你可能會有疑問了,有些人喜歡用==,有些人喜歡用===,大家的風(fēng)格不一樣,你為什么要強制別人用===呢?習(xí)慣用==的人,不能僅僅是因為==比===少敲了一次鍵盤。為什么不提倡用==呢?
(1)如果你確定了變量的類型,那么就沒必要使用==了,如下:
上面的兩個例子都是確定類型的,一個是字符串,一個是整數(shù)。就沒必要使用==了,直接用===就可以了。
(2)如果類型不確定,那么應(yīng)該手動做一下類型轉(zhuǎn)換,而不是讓別人或者以后的你去猜這里面有類型轉(zhuǎn)換,如下:
(3)使用==在JSLint檢查的時候是不通過的:
如下JSLint的輸出:
(4)并且使用==可能會出現(xiàn)一些奇怪的現(xiàn)象,這些奇怪的現(xiàn)象可能會給代碼埋入隱患:
上面的比較在用===的時候都是false,這樣才是比較合理的。例如第一點null居然會等于undefined,就特別地奇怪,因為null和undefined是兩個毫無關(guān)系的值,null應(yīng)該是作為初始化空值使用,而undefined是用于檢驗?zāi)硞€變量是否未定義。
這和第1點介紹強類型的思想是相通的。
4. 合并表達式
如果用1句代碼就可以實現(xiàn)5句代碼的功能,那往往1句代碼的執(zhí)行效率會比較高,并且可讀性可能會更好
(1)用三目運算符取代簡單的if-else
如上面的getPrice函數(shù):
可以改成:
這個比寫一個if-else看起來清爽多了。當(dāng)然,如果你寫了if-else,壓縮工具也會幫你把它改三目運算符的形式:
(2)連等
連等是利用賦值運算表達式會返回所賦的值,并且執(zhí)行順序是從右到左的,如下:
有時候你會看到有人這樣寫:
也是利用了賦值表達式會返回一個值,在if里面賦值的同時用它的返回值做判斷,然后else里面就已經(jīng)有值了。上面的+號把字符串轉(zhuǎn)成了整數(shù)。
(3)自增
利用自增也可以簡化代碼。如下,每發(fā)出一條消息,localMsgId就自增1:
5. 減少魔數(shù)
例如,在某個文件的第800行,冒出來了一句:
就會讓人很困惑了,上面的四個常量分別代表什么呢,如果我不去查一個那個函數(shù)的變量說明就不能夠很快地意會到這些常量分別有什么用。這些意義不明的常量就叫“魔數(shù)”。
所以最好還是給這些常量取一個名字,特別是在一些比較關(guān)鍵的地方。例如上面的代碼可改成:
這樣意義就很明顯了。
6. 使用ES6簡化代碼
ES6已經(jīng)發(fā)展很多年了,兼容性也已經(jīng)很好了。恰當(dāng)?shù)厥褂?,可以讓代碼更加地簡潔優(yōu)雅。
(1)使用箭頭函數(shù)取代小函數(shù)
有很多使用小函數(shù)的場景,如果寫個function,代碼起碼得寫3行,但是用箭頭函數(shù)一行就搞定了,例如實現(xiàn)數(shù)組從大到小排序:
如果用箭頭函數(shù),排序只要一行就搞定了:
代碼看起來簡潔多了,還有setTimeout里面經(jīng)常會遇到只要執(zhí)行一行代碼就好了,寫個function總感覺有點麻煩,用字符串的方式又不太好,所以這種情況用箭頭函數(shù)也很方便:
箭頭函數(shù)在C++/Java等其它語言里面叫做Lambda表達式,Ruby比較早就有這種語法形式了,后來C++/Java也實現(xiàn)了這種語法。
當(dāng)然箭頭函數(shù)或者Lambda表達式不僅適用于這種一行的,多行代碼也可以,不過在一行的時候它的優(yōu)點才比較明顯。
(2)使用ES6的class
雖然ES6的class和使用function的prototype本質(zhì)上是一樣的,都是用的原型。但是用class可以減少代碼量,同時讓代碼看起來更加地高大上,使用function要寫這么多:
使用class代碼看加地簡潔易懂:
并且class還可以很方便地實現(xiàn)繼承、靜態(tài)的成員函數(shù),就不需要自己再去通過一些技巧去實現(xiàn)了。
(3)字符串拼接
以前要用+號拼接:
現(xiàn)在只要用兩個反引號“`”就可以了:
另外反引號還支持占位替換,原本你需要:
現(xiàn)在只需要:
就不用使用+號把字符串拆散了。
(4)塊級作用域變量
塊級作用域變量也是ES6的一個特色,下面的代碼是一個任務(wù)隊列的模型抽象:
但是上面代碼的執(zhí)行輸出是4,4,4,4,并且不是想要輸出:0,1,2,3,所以每個task就不能取到它的index了,這是因為閉包都是用的同一個i變量,i已經(jīng)變成4了,所以執(zhí)行閉包的時候就都是4了。那怎么辦呢?可以這樣解決:
把i賦值給了k,由于k它是一個function的一個參數(shù),每次執(zhí)行函數(shù)的時候,肯定會實例化新的k,所以每次的k都是不同的變量,這樣就輸出就正常了。
但是代碼看起來有點別扭,如果用ES6,只要把var改成let就可以了:
只改動了3個字符就達到了目的。因為for循環(huán)里面有個大括號,大括號就是一個獨立的作用域,let定義的變量在獨立的作用域里面它的值也是獨立的。當(dāng)然即使沒寫大括號for循環(huán)執(zhí)行也是獨立的。
除了以上幾點,ES6還有其它一些比較好用的功能,如Object的assign,Promise等,也是可以幫助寫出簡潔高效的代碼。
以上列了我自己在實際寫代碼過程中遇到的一些問題和一些個人認(rèn)為比較重要的方面,其它的還有變量命名、縮進、注釋等,這里就不提及了。寫代碼的風(fēng)格也體現(xiàn)了編程的素養(yǎng),有些人的代碼看起來非常地干凈利落,而有些人的代碼看起來讓人比較痛苦。這種編程素質(zhì)的提升需要有意識地去做一些改進,有些人雖然代碼寫得很爛,但是他自己并不覺得有什么問題。這就需要多去學(xué)下別人的代碼,甚至學(xué)一下其它語言的書寫,兩者一比較就能發(fā)現(xiàn)差異,或者看下這方面的書,像什么代碼大全之類的。
【責(zé)任編輯:龐桂玉 TEL:(010)68476606】