簡單來說，有許多程式碼在到處放著，當它們沒有被組織管理起來，但更重要的是當它們沒有寫好時，事情就會變得有點複雜起來。讓我們來看一看幾種能提升我們的程式碼整體質量的不同方法。
1. 開始構建模組
保持程式碼一致，可重用且有組織的一個最好方式就是將功能成組的放在一起。例如，別把你所有的js程式碼都扔到一個main.js檔案中，而是要嘗試基於功能將它們分組放在分開的檔案裡面, 然後在你達成你的構建步驟以後再將它們連線起來. 當然，要編寫模組化的程式碼還有更多事情要做，而你也不僅僅只能在用js編寫模組化的程式碼.
CSS 前處理器，像 Sass (這裡有介紹)，它們可以讓你 把CSS檔案寫在分開的檔案中，然後可以在你編譯它們的時候在把它們包含在一個主檔案中. 這可以讓你為不同的元件，像按鈕，列表和字型編寫獨立的CSS檔案。最後，它們全部都被包含到一個主檔案中，而從整體上維護這些程式碼會變得容易許多.
新的技術，比如 Polymer ，可以讓你編寫定製的HTML元素，那樣你的HTML、CSS和JS就可以根據功能來組織成單獨的元件了. 你也一定要看看Browserify ( 這裡 有介紹), 它能讓你可以在瀏覽器中使用 Node.js-風格的模組.Brad Frost 在這裡也就編寫模組化程式碼的觀念和方法提供了一個很棒的概述.
2. 談到前處理器…
前處理器不僅僅能對編寫模組化程式碼有所幫助. 許多其它方面它們也表現得很棒! 前處理器可以在輸出瀏覽器可以處理的相同HTML，CSS和JS時，在你的程式碼內部新增額外的功能. 它們常常需要一些額外的設定時間，但只要耗費一次這樣的時間，你就可以不斷享受使用它們帶來的好處.
使用前處理器可以幫你省掉多次編寫重複性程式碼的時間. 它們也還提供了像變數、函式、迴圈和簡化的語法這些很有用的功能. 大多數前處理器也是高度可定製化的。有些還包含選擇你更喜歡的輸出風格，包含外掛以及附件，甚至在必要時建立自定義通知，這些選項. 最流行的前處理器都有大型的社群，並且得到了良好的維護，而對於一般問題的回答也很容易找到.
這裡有一個視訊介紹最通行的CSS、HTML和JS前處理器: Sass, Haml 和 CoffeeScript.
如果你對Sass感興趣，這裡有一篇SitePoint 作者 Hugo Giraudel如何組織他們Sass專案的文章, 以及 他用來做這些事情時最愛用到的工具.
當你研究Sass時，一定也要看看 HAML 和 Coffescript 哦.
你不必在每一種你用來編寫程式的語言上都用到前處理器，但它們中的許多確實能幫助你寫出更好的程式碼.
3. 開寫之前請計劃好
你最後一次坐下來用紙筆寫下你會如何處理一個專案，是什麼時候呢? 你計劃選用什麼架構，你預期能支援多少中瀏覽器，你計劃了使用任何自動化的執行工具或者構建系統嗎？在你想好了具體它如何被構造以後，專案就很容易推進起來了，只有在意識到一半時，你才需要回頭重寫一些程式碼.
North 是一套出眾的指導你如何從頭到尾規劃一個web專案的規則. 它是一份長而全面的線上文件，不是所有的東西在編寫程式碼的時候都會用到，但是其長度和詳細程式確實顯示出了在構建一個站點時有多少因素是必須被考慮到的.
選擇正確的工具和庫是一項很有挑戰性的任務，特別是在每天都有新工具和庫被建立出來的時候. 我的策略是收藏一份工具盒資源的列表 來對最好和最有用的東東進行持續跟蹤， 那就你就可以在下一個專案中隨意的來使用它了.
4. 使用版本控制
版本控制是一種按照時間來記錄對檔案或者資源的修改，它允許多人編輯，變化跟蹤，以及對資源的管理. 有許多支援版本控制的服務，包括Bitbucket, Assembla, 以及 Github. Github 是我個人的最愛，因為它支援社交化編碼，這意味著人們可以在Github上分享程式碼，發展或者學習別人寫的程式碼.
版本控制是一個理解起來有點複雜的話題，但卻有很多入門教程。我建議在著手前看下我們對git的介紹以對其有一個基本的瞭解。也可以看下我們的團隊中git使用指南和git進階竅門。如果你對git沒興趣，你也可以看下版本控制的其他建議。
最後一個建議：使用命令列。命令列是一個令人生畏的使用者介面，但熟悉它會在整體上提高你對程式設計的理解，同時可以讓你有能力使用其他優秀的工具，例如Gulp和Grunt。
5.開始程式碼審查
如果你是一個團隊中的一員那這對你來說很簡單，但如果你是獨立開發者程式碼審查也不是不可能的。程式碼審查的基本思想是將你寫的程式碼展示給其他開發者（或上級），這樣你就可以解釋你寫了什麼，從而知道如何能寫得更好，甚至可以教導對你所使用的技術不熟悉的人。
最好每週進行一次，同時本著學習如何改進已完成程式碼的目的進行。這裡有一篇關於程式碼審查的好處的文章解釋瞭如何最好地執行程式碼審查。
如果你是獨立開發，或者你很反社會，jslint 和 SCSSlint 會是很有用的。這些工具在保持你的檔案整潔乾淨的同時會檢查你的程式碼是否有錯誤。有了它們你也就不需要與人接觸了。
6. 接受程式設計的挑戰
有許多免費的線上資源旨在為想要尋找到對其每天使用的語言更好理解的開發者提供程式設計挑戰. 大多數的這些站點都配備有大型的社群，願意在需要時提供幫助，因此你不必擔心遇到困難後無法繼續下去.
CodeWars 對梳理你的Js能力很有幫助，還有 Practice App 為你提供在 Codepen 構建的隨機的前端挑戰.
總結
多少按照上面的建議那樣做，都將大大提升你的編碼技能，並因此提升你所編寫的站點，工具或者應用的質量.
你還有更多編寫更棒程式碼的建議和工具嗎? 請在評論中分享一下吧!
來自：開源中國社群
相關閱讀
評論(3)