好程序員web前端分享7個步驟:讓JavaScript變得更好,隨着瀏覽器性能提升,伴隨着新的HTML5的編程接口的穩步採用,網頁上的JavaScript的音量在逐漸增長。然而,一個寫得很差的程序編碼卻擁有着打破整個網站,讓用戶爲之沮喪和驅趕潛在客戶的潛力。前端
開發人員必須使用全部供他們任意使用的工具和技術來提高他們的代碼的質量,並有信心確認每次的執行都是能夠預見的。這是一個在我心靈深處的話題而且我已經工做多年找到一組開發過程當中來遵循的步驟以確保只有最高質量的代碼能夠被髮布。程序員
您只要按照這七個步驟操做就會大大提升您的JavaScript項目的質量。使用這個工做流程,錯誤將會減小而且將不少處理優化,讓用戶擁有一個愉悅的上網瀏覽體驗。web
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代碼,讓咱們攜手共進,改善網絡,一步一步通向成功。