如何才能寫出高質量的JavaScript程式碼
最近很多小夥伴來給我留言，問我怎麼樣才能寫出高質量的JavaScript，在這之前，我曾經發過一個推文了，就是《 ofollow,noindex">8個要點教你輕鬆寫出優秀Javascript程式碼 》，這一篇主要是講如何寫出優秀的JavaScript程式碼，比較偏難和針對程式碼執行的質量。
今天我們來聊一些新的，因為寫好一個JavaScript並不是一份簡單的事情，所以我們來聊聊零基礎要寫好JavaScript程式碼的一些細節。關注好這些細節，你也能寫出高質量的JavaScript程式碼了。
所謂的高質量的JavaScript程式碼，其實指的就是可維護性高，可讀性高，可拓展性高的程式碼，不僅開發的過程中寫得舒服，而且後期維護也很輕鬆的程式碼質量。
我們可以通過下面這11個要點，從細節來把握我們的JavaScript質量。
1.可維護性高的程式碼
在我們開發過程中，當出現bug的時候，我們立刻去修復，這時候解決程式碼bug的思路是最清晰的。否則，你去做了別的程式碼任務或者這個bug出現了一段時間，你再去處理，你就忘了你寫的思路是什麼了，那這時候去處理這些程式碼你就需要想兩個問題了：
1.花時間去學習和理解這個程式碼問題
2.花時間瞭解bug的解決方案
同時，你如果是在企業中做的大型專案，都是團隊開發，開發和維護可能都不是同一個人（發現bug和修復bug的都不是作者）。所以，必須降低大量的理解程式碼的時間，無論是你自己寫的程式碼，還是團隊中其他人的程式碼。這關係到整個專案的發展和開發團隊每個人的生活幸福啊，畢竟我們應該多花時間去研究更多好的程式碼想法，而不是時間都浪費在維護遺留程式碼裡面。
所以，可維護性高的程式碼很重要，一般可維護性高的程式碼都有以下這些原則：
1.可讀性高 （例如好的命名，解析性強的註釋）
2.一致性強 （命名風格，編碼風格，程式碼規範）
3.可預測性 （明顯看出執行效果）
4.風格統一 （看上去就知道是不是同一個人寫完的）
5.有記錄 （有清晰的註釋開發記錄）
2.全域性變數的問題
什麼是全域性變數的問題，就是在你的javascript程式和網頁中的所有程式碼都共享這些變數，他們都住在同一個名稱空間裡面（全域性作用域），所以當程式在執行過程中兩個不同部分定義同名但不同作用的全域性變數的時候，命名衝突的情況就很常見了（許多小白遇到了就抓不著頭腦了：咦，這個命名沒問題啊，為什麼報錯了？）。
而且，網頁裡面包含有其他不是開發作者寫的程式碼而產生的全域性命名問題也是比較常見的。比如說：
1.第三方javascript庫
2.甲方（或開發團隊自己封裝的程式碼）的腳步程式碼
3.第三方使用者跟蹤或分析程式碼
4.不同型別的UI元件
.....
這些帶來的情況就很常見了，比如說，第三方指令碼定義了一個變數，叫做userId，接著，你的函式裡面也寫了個userId的全域性變數。這個時候的結果就是，後面的覆蓋掉前面的變數，第三方指令碼直接就無效了，這種情況是很難調試出來的。
所以，儘可能的少使用全域性變數很重要，例如名稱空間模式或者函式立即執行，不過要想讓全域性變數減少，最重要的還是多用var來宣告變數。
3.忘記var的副作用
隱式全域性變數和顯式定義的全域性變數是有點差異的。
具體如下：
通過var建立的全域性變數（任何函式之外的程式中建立）是不能被刪除的。
沒有通過var建立的隱式全域性變數（無視是否在函式中建立）是能被刪除的。
所以隱式全域性變數並不是真正的全域性變數，但它們是全域性物件的屬性。
屬性是可以通過delete操作符刪除的，而變數是不能的，具體的程式碼我這裡就不說了。
4.訪問全域性物件
在瀏覽器中，全域性物件可以通過window屬性在程式碼任何地方訪問（除非說你做了一些很超乎想象的事情，比如說聲明瞭一個名為window的區域性變數）。
但是在其他環境下，這個方便的屬性可能被叫做其他什麼東西（甚至在程式中不可用）。
如果你需要在沒有硬編碼的window識別符號下訪問全域性物件，你可以在任何層級的函式作用域中做如下操作：
5.for迴圈
在使用for迴圈的時候，可以遍歷拿到陣列或者陣列類似物件的值，比如說arguments和HTMLCollection物件，一般我們的寫法都是這樣的：
這種迴圈的方式並不是很好，每次執行迴圈的時候都需要獲取一次陣列的長度，這個時候我們程式碼的執行效率就特別低了，特別是當myArray不是陣列的時候，而是一個HTMLCollection物件的時候。
6.不擴充套件內建原型
擴增建構函式的prototype屬性是個很強大的增加功能的方法，但有時候它太強大了。
增加內建的建構函式原型（如Object(), Array(), 或Function()）挺誘人的，但是這嚴重降低了可維護性，因為它讓你的程式碼變得難以預測。
使用你程式碼的其他開發人員很可能更期望使用內建的 JavaScript方法來持續不斷地工作，而不是你另加的方法。
另外，屬性新增到原型中，可能會導致不使用hasOwnProperty屬性時在迴圈中顯示出來，這會造成混亂。
7.避免隱式型別轉換
JavaScript的變數在比較的時候會隱式型別轉換。
這就是為什麼一些諸如：false == 0 或 “” == 0 返回的結果是true。
為避免引起混亂的隱含型別轉換，在你比較值和表示式型別的時候始終使用===和!==操作符。
8.編碼規範
建立和遵循編碼規範是很重要的，這讓你的程式碼保持一致性，一目瞭然，更易於閱讀和理解。
一個新的開發者加入這個團隊可以通讀規範，能馬上理解其它團隊成員書寫的程式碼，更快上手進行開發。
9.縮排
程式碼開發，標準的縮排是最基本的，沒有縮排的程式碼基本就不能讀了。唯一糟糕的事情就是不一致的縮排，因為它看上去像是遵循了規範，但是可能一路上伴隨著混亂和驚奇。重要的是規範地使用縮排。
10.註釋
註釋這個，其實是應該只要是寫了程式碼，都要有註釋的，讓別人一看你的程式碼就能快速理解你的程式碼。
在平時我們開發的時候，你很花時間去研究一個程式怎麼實現，你會很清楚的知道這個程式碼是幹嘛用的。但是，你一週之後回來再看這段程式碼，你就會燒掉很多腦細胞了。
當然，註釋也不能走極端路線：有的人就說不是要理解沒一段程式碼嗎，那每個單獨變數或是單獨一行就給一段註釋。這樣就很沒有意義了。
一般來說，註釋都是記錄在函式的部分，它們的引數和返回值，或是一些不尋常的技術和方法。通過註釋可以給你程式碼的未來閱讀者以諸多提示；
閱讀你程式碼的人需要的是（不要讀太多的東西）註釋和函式名來理解你的程式碼意義。
11.花括號{}
花括號（也稱大括號，下同）應該多使用，即使在它們為可選的時候。技術上來說，在in或是for中如果執行語句僅一條時，花括號是不需要寫也能執行理想效果的，但是你最好還是用花括號，因為這會讓你的程式碼更有持續性和易於更新，並且更加好理解。
記住這11個要點，時刻落實到你的程式碼書寫習慣當中，慢慢的，你也能輕鬆寫出大神的程式碼了。
更多前端開發學習教程，歡迎大家掃碼關注公眾號，每天更新實戰乾貨哦！
限時搶課
只需4個月，技術大牛手把手帶你從小白到專業前端開發工程師
前80名立減2000元
