好程式設計師web前端分享7個步驟：讓JavaScript變得更好

　　 好程式設計師 web 前端分享 7 個步驟：讓 JavaScript 變得更好 ， 隨著瀏覽器效能提高，伴隨著新的 HTML5 的程式設計介面的穩步採用，網頁上的 JavaScript 的音量在逐漸增加。然而，一個寫得不好的程式編碼卻擁有著打破整個網站，讓使用者為之沮喪和驅趕潛在客戶的潛力。

 

　　開發人員必須使用所有供他們任意使用的工具和技術來提升他們的程式碼的質量，並有信心確認每次的執行都是可以預見的。這是一個在我心靈深處的話題並且我已經工作多年找到一組開發過程中來遵循的步驟以確保只有最高質量的程式碼可以被髮布。

 

　　您只要按照這七個步驟操作就會大大提高您的 JavaScript 專案的質量。使用這個工作流程，錯誤將會減少並且將很多處理最佳化，讓使用者擁有一個愉悅的上網瀏覽體驗。

 

　　01. 程式碼

 

　　首先在你的函式里呼叫 ECMAScript5 的嚴格模式和一個“嚴格模式”的宣告，並使用該模組的設計模式，在自執行的函式閉包裡，透過沙箱獨立的程式碼模組儘量減少全域性變數內的使用，透過任何外部依賴關係以保持全域性變數模組清晰，簡明。只有使用已建立好的，行之有效的，已透過測試並結果良好的第三方的函式庫和框架，並保持你的函式處於小值，從你的模組操作和其他檢視層程式碼裡分離出任何業務邏輯或資料。

 

　　有多個開發人員的較大的專案應該遵循一套既定的編碼原則，如谷歌的 JavaScript 的風格指南，並需要更強的程式碼管理規則，包括透過一個庫，如 RequireJS ，使用軟體包管理使用非同步模組定義 (AMD) 進行嚴格的依賴關係管理，使用 Bower 或 Jam( 客戶端庫管理工具 ) 的包裝管理來參考您的依賴項檔案的特定版本，並採用結構設計模式，如觀察者模式，以方便您不同的程式碼模組之間的松耦合通訊。這也是一個明智的想法：使用一個程式碼儲存庫系統體系，如 Git 或 Subversion ，透過一些服務如原始碼或魔豆，讓您的程式碼在雲端備份，提供恢復到以前的版本的能力，並且，對更為先進的專案建立一個程式碼分支來執行不同的功能，在完成之前把它們合併到一起。

 

　　02. 檔案

 

　　使用結構化的註釋區塊格式如 YUIDoc 或 JsDoc 到檔案的功能，因此任何開發人員可以瞭解其目的，而不需要研究它的程式碼，這樣可以減少誤解。用 Markdown 語法可以有更豐富，長篇的評論和說明。使用關聯的命令列工具來自動生成一個文件的網站：基於這些結構性的意見 , 它和在您的程式碼所做的任何修改最新狀態一致。

 

　　03. 往績分析　　

 

        定期對您的程式碼執行一個靜態程式碼分析工具，如 JSHint 或 JSLint 。這些對已知的編碼缺陷和潛在的錯誤進行的檢查，比如忘記使用嚴格模式或引用未宣告的變數，和缺少括號或分號。糾正任何問題的工具控制元件，以改善你的程式碼質量。嘗試為您的專案團隊設定預設選項，以加強編碼標準，如由空格的縮排每一行，在哪裡放置花括號，並在整個程式碼檔案中使用單引號或雙引號的數目。

 

　　04. 測試

 

　　一個單元測試是一小段獨立的功能執行的功能之一：執行其中一個來自你特定輸入的主程式碼庫的函式以確認它輸出一個預期值。為了提高您的信心，程式碼將像預期的那樣，編寫使用的框架，如 Jasmine 或 QUnit 為每個功能單元測試，使用預期和未預期的輸入引數。但是千萬不要忘了那些邊緣的情況 !

 

　　在跨多個作業系統多個瀏覽器上執行這些測試，透過利用這項服務，如 BrowserStack 或 Sauce Labs ，讓你可以加速需求中的在雲端上地虛擬機器地測試。這兩個服務提供了一個 API ，允許你的單元測試能夠自動在多個瀏覽器同時執行，一旦它們完成，就會將結果反饋給你。作為紅利，如果你的程式碼儲存在 GitHub 上，你可以採取 BrowserSwarm ，這是一個當你提交你的程式碼會自動執行你的單元測試的工具。

 

　　05. 測量

 

　　程式碼覆蓋工具，如 Istanbul 測量當你的單元測試對你的函式執行時，哪些程式碼行數被執行，將它作為該程式碼行總數的百分比進行報告。對你的單元測試執行一個程式碼覆蓋工具，並增加額外的測試，可以增加你的覆蓋率得分至 100% ，給你對你的程式碼更大的信心。

 

　　函式的複雜性可以用霍爾斯特德複雜度量測來測量：電腦科學家莫里斯 ·霍爾斯特德在 20 世紀 70 年代設立的方程式，一個函式的複雜性的是根據迴圈，分支和它所包含的函式呼叫來量化的：函式的複雜性可以使用 Halstead 的複雜性措施進行測量。當這種複雜的分數降低時，我們就越容易理解和保持這個函式，減少了出錯的可能性。命令列工具柏拉圖措施和 JavaScript 程式碼複雜性的生成的資料的視覺化，幫助確定可以改進的功能，同時儲存以前的結果，允許跟隨著時間的推移跟蹤質量的進步。

 

　　06. 自動化

 

　　使用 Task runner 例如 Grunt 來自動操作檔案編制，分析，測試，覆蓋範圍和複雜性報告生成的過程，這樣就節省了您的時間和精力，並增加解決出現的任何質量問題的機會。大多數的這篇文章中所強調的工具和測試框架都和 Grunt 有關聯，這可以幫助您提高您的工作流程和程式碼質量並且不必動一根手指。

 

　　07. 處理異常

 

　　不約而同的是，在某些時候，你的程式碼將在它執行時出現一個錯誤。使用 “ try... Catch ”語句來適當地處理執行時間的錯誤和限制您網站上的行為的影響。使用網路服務記錄執行時出現的錯誤。並使用此資訊來新增新的單元測試，從而改進你的程式碼並一個一個地消滅這些錯誤。

 

　　這七個步驟，幫我創作 一些在我到目前為止的職業生涯裡我最自豪的程式碼。它們也是未來的一個很好的基礎。在您自己的專案裡，承諾使用這些步驟，生產出高品質的 JavaScript 程式碼，讓我們攜手共進，改善網路，一步一步通向成功。