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

簡(jiǎn)單來(lái)說(shuō)，有許多代碼在到處放著，當(dāng)它們沒(méi)有被組織管理起來(lái)，但 更重要的是當(dāng)它們沒(méi)有寫好時(shí)，事情就會(huì)變得有點(diǎn)復(fù)雜起來(lái)。讓我們來(lái)看一看幾種能提升我們的代碼整體質(zhì)量的不同方法。

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

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

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

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

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

2. 談到預(yù)處理器…

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

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

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

如果你對(duì)Sass感興趣，這里有一篇SitePoint 作者 Hugo Giraudel如何組織他們Sass項(xiàng)目的文章, 以及 他用來(lái)做這些事情時(shí)最愛(ài)用到的工具.

當(dāng)你研究Sass時(shí)，一定也要看看 HAML 和 Coffescript 哦.

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

3. 開寫之前請(qǐng)計(jì)劃好

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

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

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

4. 使用版本控制

版本控制是一種按照時(shí)間來(lái)記錄對(duì)文件或者資源的修改，它允許多人編輯，變化跟蹤，以及對(duì)資源的管理. 有許多支持版本控制的服務(wù)，包括Bitbucket, Assembla, 以及 Github. Github 是我個(gè)人的最愛(ài)，因?yàn)樗С稚缃换幋a，這意味著人們可以在Github上分享代碼，發(fā)展或者學(xué)習(xí)別人寫的代碼.

版本控制是一個(gè)理解起來(lái)有點(diǎn)復(fù)雜的話題，但卻有很多入門教程。我建議在著手前看下我們對(duì)git的介紹以對(duì)其有一個(gè)基本的了解。也可以看下我們的團(tuán)隊(duì)中g(shù)it使用指南和git進(jìn)階竅門。如果你對(duì)git沒(méi)興趣，你也可以看下版本控制的其他建議。

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

5.開始代碼審查

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

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

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

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

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

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

總結(jié)

多少按照上面的建議那樣做，都將大大提升你的編碼技能，并因此提升你所編寫的站點(diǎn)，工具或者應(yīng)用的質(zhì)量.你還有更多編寫更棒代碼的建議和工具嗎? 請(qǐng)?jiān)谠u(píng)論中分享一下吧!

當(dāng)前題目：成都網(wǎng)站建設(shè)-6個(gè)代碼編寫技巧讓你的編碼技能飛躍提升
轉(zhuǎn)載源于：http://www.rwnh.cn/news41/260391.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、企業(yè)建站、用戶體驗(yàn)、定制網(wǎng)站、全網(wǎng)營(yíng)銷推廣、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)