前些天我給一個項目寫過一個使用指南，以供其他的開發(fā)者們觀摩學習。當我在寫這個指南的時候，我意識到我不經(jīng)意間羅列出的一些在測試、開發(fā)過程中用到的名詞，諸如：Node，npm，Homebrew，git等，在兩三年前絕對是能把我嚇尿了的高端大氣上檔翅的東西。

曾幾何時，編輯代碼、本地測試然后通過FTP把項目發(fā)布到服務(wù)器是前端開發(fā)人員必要的工作流程。我們對于自身能力的衡量是基于我們能否搞掂IE6， 以及完成跨瀏覽器的完美顯示。包括我自己在內(nèi)的很多人都缺乏傳統(tǒng)的編程經(jīng)驗，像HTML、css、JavaScript（以及jQuery）這些技能，也 都是靠自學成才。

在過去的幾年里，這一狀態(tài)正在慢慢改變。這導致了許多人開始認真對待前端開發(fā)——也許是由于不同瀏覽器的逐漸統(tǒng)一，亦或是由于包括我在內(nèi)的這些瀏覽器廠商的前端開發(fā)者們，在開發(fā)過程中逐漸看到了能夠?qū)Τ绦蜻M行良好架構(gòu)的有效方法。

不管是什么吧，我們的目光正在從對前端的細枝末節(jié)的關(guān)注轉(zhuǎn)移到對于工具的關(guān)注，這就對前端開發(fā)者提出了一系列新的要求。那些認為這些要求理所應(yīng)當并開始接受新知識的人，就足以把那些不能滿足要求的開發(fā)者們甩出幾條街了。

這里有一些我希望開發(fā)者們開始熟悉掌握的知識，如果有某些部分你覺得十分需要，你可以加快學習這部分內(nèi)容。

JavaScript

JS的重要性是不言而喻的，但是僅僅知道JS的庫已經(jīng)跟不上時代的需求了。我并不是說你需要知道如何用純JS實現(xiàn)這些庫的功能；而是說你應(yīng)該知道什么時候應(yīng)該用庫，并在不需要庫的時候有能力用原生JS實現(xiàn)功能。

這意味著你必須要反復閱讀這本書——《JavaScript：語言精粹》（傳說中的蝴蝶書，譯者注）。你需要：理解諸如objects和array等的數(shù)據(jù)結(jié)構(gòu)；理解function，并知道使用 call 函數(shù)和 apply 函數(shù)的原因；使用原型繼承（prototypal inheritance）來編程；管理好異步性等。

如果你覺得你寫純JS弱爆了，這有一些可以幫助你的資源：

• Eloquent Javascript ：一本可以將你帶到JS基礎(chǔ)領(lǐng)域的精彩的書。
• A Test-Driven JS Assessment ：涵蓋了諸多JS領(lǐng)域的測試題目，你能編寫代碼通過他們么？
• 10 things I learned from the jQuery Source ：一壇來自Paul Irish（谷歌Chrome開發(fā)者，jQuery團隊核心成員，譯者注）的陳年佳釀，教會你如何在閱讀別人代碼的過程中學習新知識。

Git（以及Github的帳號）

如果你不上Github，你根本無法參與到這個豐富的開源社區(qū)，汲取如雨后春筍般迅猛發(fā)展的前端開發(fā)技術(shù)。clone一個repo（Git術(shù)語，本操作指把放在git倉庫中的代碼下載到本地，譯者注）并親自修改嘗試這件事兒應(yīng)該成為你的習性，同時你應(yīng)該理解如何在合作項目上使用分支（branch）的技術(shù)。

要提高你的git技術(shù)？下面有幾個網(wǎng)站可以共你學習：

• help.github.com
• Github git cheat sheet
• More cheat sheet
• More git links

模塊化、依賴管理和創(chuàng)建項目

那些通過在頁面上加入 <script> 或者 <style> 標簽的方式來進行依賴管理的日子已經(jīng)一去不復返了（啥？現(xiàn)在都不這樣搞了么？譯者注）。即使你現(xiàn)在不能把一些優(yōu)秀的工具（例如 RequireJS ）合并到你的工作流中，你也應(yīng)該抽時間在你的個人項目、或者在 Backbone Boilerplate 來研究一下，因為這些工具的好處是巨大的。特別是 RequireJS 可以讓你開發(fā)小型的、模塊化的 JS 和 CSS 文件，并通過優(yōu)化工具對其進行連接和壓縮以便在實際項目中使用。

對AMD規(guī)范持懷疑態(tài)度？這不應(yīng)是你無所作為的借口。至少你應(yīng)該知道使用 Uglify 或 Closure 的編譯器來智能優(yōu)化你的代碼，然后把這些壓縮的文件鏈接到項目中。

如果你在寫純CSS（就是說你不用諸如Sass或者Stylus等CSS編譯器），RequireJS也可以使你的CSS文件模塊化。在基礎(chǔ)文件中使用 @import 語句以加載開發(fā)依賴，然后運行RequireJS優(yōu)化基礎(chǔ)文件并創(chuàng)建實際項目中用到文件。

瀏覽器內(nèi)置開發(fā)者工具

在過去的幾年里，基于瀏覽器的開發(fā)者工具的水平已經(jīng)大大提高，如果你知道如何使用他們，你的開發(fā)效率將會提升一個檔次。（啥？你還在用alert來調(diào)試代碼？你這是在浪費繩命啊~）

你應(yīng)該找到一個適于你自己的開發(fā)者工具——比方說我這兩天就偏愛谷歌 Chrome 的開發(fā)者工 具（也是譯者的最愛）——但是也不要就拋棄了別的瀏覽器，因為大家都在根據(jù)開發(fā)者的反饋而不斷增加有用的功能特性。Opera的Dragonfly工具就 因有一些獨到的功能而在開發(fā)者工具中脫穎而出，比如一個CSS分析器、可制訂的快捷鍵、無需USB連接的遠程調(diào)試（這是啥？）、可使用和保存的自定義調(diào)色 板。

如果你對于瀏覽器開發(fā)者工具不是十分理解，這個網(wǎng)址：jQuery修復術(shù)（不僅僅是jQuery的核心代碼）會教你包括單步調(diào)試之類的debug方法——這可是一個能改變你人僧的東西啊，如果你還不會，趕緊的去學習吧！

命令行！

說到了命令行，我們就感覺踏入了苦海——不過你要是說為了不弄臟我用慣了GUI的冷艷高貴的手，就放棄丑陋的終端的話，那你可就得不償失啦。當然， 我也不是讓你吃喝拉撒都在終端里解決，不用完全脫離GUI，雖然我覺得沒有它你會活得更好。不過呢，你還是應(yīng)該擁有用終端編輯運行你任意一個項目的能力。 下面有幾條命令你應(yīng)該做到熟練掌握：

• ssh ：用于登錄到另一臺計算機或服務(wù)器
• scp ：用于將文件復制到另一臺計算機或服務(wù)器
• ack 或 grep ：查找項目或文件中包含的字符串或樣式
• find ：給定文件名匹配模式查找文件
• git ：至少會些基本的命令吧，比方 add 、commit 、status 和 pull
• brew ：用Homebrew安裝插件
• npm ：安裝Node插件
• gem ：安裝Ruby插件

如果有些命令是你常用的呢，你可以編輯你的.bashrc，或者.profile，.zshrc之類的，然后搞一個alias讓你不用命令行敲得那 么累（alias是設(shè)置命令縮寫別名的命令，其實這些原生態(tài)命令好像也不是很長很難敲啦……譯者注）。你也可以把你的aliases放 到~/.gitconfig文件里。Gianni CHiappetta的這個項目可能對你會有所啟發(fā)。

如果你在用windows，我感覺除了說句呵呵以外就沒啥要說的了。呵呵。嗯，其實你可以用一下Cygwin？不管怎么說，要在windows下參與前端項目的開源開發(fā)實在是要困難的多。不過所幸現(xiàn)在MacBook Air也不算貴，它功能強大且攜帶便捷；而且我們還有Ubuntu和其他還不錯的帶有GUI的*nix系統(tǒng)。

客戶端模板

在不久之前服務(wù)器的典型的做法還是通過一小段HTML返回XHRs（XMLHttpRequest，額不是很理解啊?！，F(xiàn)在不用XHR了么），但是 差不多在一年到一年半前，前端開發(fā)社區(qū)找到并著手開發(fā)從服務(wù)器請求純數(shù)據(jù)的替代方案。如果在你的代碼里直接將這些數(shù)據(jù)放入HTML以待將其插入DOM中， 會是一個混亂而難以維護的過程。這就是為什么客戶端模板出現(xiàn)的原因：他們讓你維護一個模板，然后將數(shù)據(jù)插入其中，最終生成HTML的字符串。需要一個模板 選擇的工具？Garann Means'的模板選擇器可能會幫到你。

CSS預(yù)處理器

Paul Irish之前曾說，我們開始看到了前端開發(fā)的編碼與后端開發(fā)的明顯不同，CSS預(yù)處理器就是一個明顯的例子。當然還是有不少人宣稱除了純CSS之外其他 的都是異端，不過現(xiàn)在他們也開始逐漸接受預(yù)處理器這個東西。這些工具給了CSS一些按理說應(yīng)該存在的特性，諸如變量、數(shù)學運算、邏輯運算、混入技術(shù) （Max-in，譯者也不是很清楚，可以參照這篇文章）等，同時其還可以幫助CSS理清混亂的前綴。

測試

模塊化編程、編寫送耦合的代碼的一大好處就是讓你的代碼變得非常容易測試?，F(xiàn)在有了Grunt這樣的工具，讓一個項目包含測試模塊已經(jīng)變得十分容易。Grunt源自QUnit的集合，不過這兒呢有一大堆測試的框架，供你依據(jù)你的喜好以及你對其他方面的要求進行選擇——比方Jasmine和Mocha這兩個框架就是我最近的最愛。

當你的代碼是模塊化的和松耦合的你的測試就會變得很輕松；不過如果你要測試的代碼一團糟，那測試很有可能會變得十分困難或者根本沒法搞定。另一方 面，強制要求你對自己寫的代碼進行測試，有時候甚至于在你寫代碼之前就讓你寫好測試用例和測試程序什么的，也會對你好好構(gòu)思代碼有所幫助。這也會使你在徹 底重構(gòu)代碼時有十足的信心（原文用down the line表示完全地）。

流程自動化（rake、make、grunt等等）

Grunt創(chuàng)建一個內(nèi)置支持單元測試的項目的能力就是流程自動化的一個例子。前端開發(fā)的事實是我們要做一大堆重復的事情。但是我的一個朋友有次和我說，一個牛叉的開發(fā)者應(yīng)該是個懶惰的開發(fā)者：從經(jīng)驗上講，當你發(fā)現(xiàn)你重復了同一件事請三次以上，你就應(yīng)把它自動化了。

諸如make這樣的工具很長一段時間內(nèi)幫助我們搞定自動化的事情，當然還有rake、grunt等等。如果你要用自動化處理文件系統(tǒng)，那么學會除 JavaScript之外的一門語言將對你大有裨益。當你手工處理文件時，Node的異步性對你而言將是一個沉重的負擔。當然這兒也有很多針對特定任務(wù)的 測試工具，比方開發(fā)、編譯生成、質(zhì)量保障等等。

代碼質(zhì)量

如果你曾經(jīng)被一個缺失的分號或多余的逗號的bug所困擾半天，你就會知道代碼中小小的錯誤將會浪費你多少的時間。這就是為啥你要在JSHint這樣的工具里運行代碼，對吧～JSHint是可配置的，而且有多種方法可以整合到你的編輯器或編譯過程中。

詳盡的手冊

唉，前端的苦逼之處在于木有手冊啊，不過 MDN 還是不錯的。一個好的開發(fā)者應(yīng)該知道在搜索的時候加上mdn的前綴，比方你這樣寫：mdn javascript arrays——以避免找到那些盈利為目的的w3shcools的查詢結(jié)果（啥。。譯者一直用w3啊）。

結(jié)語

和做其他事情一樣，僅僅讀一些建議啊要求啊是不足以使你成為大拿的——就是小拿也夠嗆。唯一的方法就是自己去實踐吧騷年們！

Good luck.