每周我都可以用四種不同的語言編寫至少幾百行代碼。我也可以同其他與我一同工作的開發(fā)者協(xié)作進行代碼的編輯和審查。

簡單來說，有許多代碼在到處放著，當它們沒有被組織管理起來，但 更重要的是當它們沒有寫好時，事情就會變得有點復雜起來。讓我們來看一看幾種能提升我們的代碼整體質(zhì)量的不同方法。

1. 開始構(gòu)建模塊

保持代碼一致，可重用且有組織的一個***方式就是將功能成組的放在一起。例如，別把你所有的js代碼都扔到一個main.js文件中，而是要嘗試基于功能將它們分組放在分開的文件里面, 然后在你達成你的構(gòu)建步驟以后再將它們連接起來. 當然，要編寫模塊化的代碼還有更多事情要做，而你也不僅僅只能在用js編寫模塊化的代碼.

CSS 預處理器，像 Sass (這里有介紹)，它們可以讓你 把CSS文件寫在分開的文件中，然后可以在你編譯它們的時候在把它們包含在一個主文件中. 這可以讓你為不同的組件，像按鈕，列表和字體編寫獨立的CSS文件。***，它們?nèi)慷急话揭粋€主文件中，而從整體上維護這些代碼會變得容易許多.

新的技術，比如 Polymer ，可以讓你編寫定制的HTML元素，那樣你的HTML、CSS和JS就可以根據(jù)功能來組織成單獨的組件了. 你也一定要看看Browserify ( 這里 有介紹), 它能讓你可以在瀏覽器中使用 Node.js-風格的模塊.

Brad Frost 在這里也就編寫模塊化代碼的觀念和方法提供了一個很棒的概述.

2. 談到預處理器…

預處理器不僅僅能對編寫模塊化代碼有所幫助. 許多其它方面它們也表現(xiàn)得很棒! 預處理器可以在輸出瀏覽器可以處理的相同HTML，CSS和JS時，在你的代碼內(nèi)部添加額外的功能. 它們常常需要一些額外的設置時間，但只要耗費一次這樣的時間，你就可以不斷享受使用它們帶來的好處.

使用預處理器可以幫你省掉多次編寫重復性代碼的時間. 它們也還提供了像變量、函數(shù)、循環(huán)和簡化的語法這些很有用的功能. 大多數(shù)預處理器也是高度可定制化的。有些還包含選擇你更喜歡的輸出風格，包含插件以及附件，甚至在必要時創(chuàng)建自定義通知，這些選項. ***的預處理器都有大型的社區(qū)，并且得到了良好的維護，而對于一般問題的回答也很容易找到.

這里有一個視頻介紹最通行的CSS、HTML和JS預處理器: Sass, Haml 和 CoffeeScript.

如果你對Sass感興趣，這里有一篇SitePoint 作者 Hugo Giraudel如何組織他們Sass項目的文章, 以及 他用來做這些事情時***用到的工具.

當你研究Sass時，一定也要看看 HAML 和 Coffescript 哦.

你不必在每一種你用來編寫程序的語言上都用到預處理器，但它們中的許多確實能幫助你寫出更好的代碼.

3. 開寫之前請計劃好

你***一次坐下來用紙筆寫下你會如何處理一個項目，是什么時候呢? 你計劃選用什么架構(gòu)，你預期能支持多少中瀏覽器，你計劃了使用任何自動化的運行工具或者構(gòu)建系統(tǒng)嗎？在你想好了具體它如何被構(gòu)造以后，項目就很容易推進起來了，只有在意識到一半時，你才需要回頭重寫一些代碼.

North 是一套出眾的指導你如何從頭到尾規(guī)劃一個web項目的規(guī)則. 它是一份長而全面的在線文檔，不是所有的東西在編寫代碼的時候都會用到，但是其長度和詳細程序確實顯示出了在構(gòu)建一個站點時有多少因素是必須被考慮到的.

選擇正確的工具和庫是一項很有挑戰(zhàn)性的任務，特別是在每天都有新工具和庫被創(chuàng)建出來的時候. 我的策略是收藏一份工具盒資源的列表 來對***和最有用的東東進行持續(xù)跟蹤， 那就你就可以在下一個項目中隨意的來使用它了.

4. 使用版本控制

版本控制是一種按照時間來記錄對文件或者資源的修改，它允許多人編輯，變化跟蹤，以及對資源的管理. 有許多支持版本控制的服務，包括Bitbucket, Assembla, 以及 Github. Github 是我個人的***，因為它支持社交化編碼，這意味著人們可以在Github上分享代碼，發(fā)展或者學習別人寫的代碼.

版本控制是一個理解起來有點復雜的話題，但卻有很多入門教程。我建議在著手前看下我們對git的介紹以對其有一個基本的了解。也可以看下我們的團隊中git使用指南和git進階竅門。如果你對git沒興趣，你也可以看下版本控制的其他建議。

***一個建議：使用命令行。命令行是一個令人生畏的用戶接口，但熟悉它會在整體上提高你對編程的理解，同時可以讓你有能力使用其他優(yōu)秀的工具，例如Gulp和Grunt。

5.開始代碼審查

如果你是一個團隊中的一員那這對你來說很簡單，但如果你是獨立開發(fā)者代碼審查也不是不可能的。代碼審查的基本思想是將你寫的代碼展示給其他開發(fā)者（或上級），這樣你就可以解釋你寫了什么，從而知道如何能寫得更好，甚至可以教導對你所使用的技術不熟悉的人。

***每周進行一次，同時本著學習如何改進已完成代碼的目的進行。這里有一篇關于代碼審查的好處的文章解釋了如何***地執(zhí)行代碼審查。

如果你是獨立開發(fā)，或者你很反社會，jslint 和 SCSSlint 會是很有用的。這些工具在保持你的文件整潔干凈的同時會檢查你的代碼是否有錯誤。有了它們你也就不需要與人接觸了。

6. 接受編程的挑戰(zhàn)

有許多免費的在線資源旨在為想要尋找到對其每天使用的語言更好理解的開發(fā)者提供編程挑戰(zhàn). 大多數(shù)的這些站點都配備有大型的社區(qū)，愿意在需要時提供幫助，因此你不必擔心遇到困難后無法繼續(xù)下去.

CodeWars 對梳理你的Js能力很有幫助，還有 Practice App 為你提供在 Codepen 構(gòu)建的隨機的前端挑戰(zhàn).

總結(jié)

多少按照上面的建議那樣做，都將大大提升你的編碼技能，并因此提升你所編寫的站點，工具或者應用的質(zhì)量.

你還有更多編寫更棒代碼的建議和工具嗎? 請在評論中分享一下吧!

英文原文：6 Tips for Writing Better Code

譯文來自：http://www.oschina.net/translate/6-tips-for-writing-better-code