原文為A Baseline for Front-End Developers，感覺不錯隨手翻譯了一下~
前些天我給一個項目寫過一個使用指南，以供其他的開發者們觀摩學習。當我在寫這個指南的時候，我意識到我不經意間羅列出的一些在測試、開發過程中用到的名詞，諸如：Node，npm，Homebrew，git等，在兩三年前絕對是能把我嚇尿了的高端大氣上檔翅的東西。
曾幾何時，編輯代碼、本地測試然后通過FTP把項目發布到服務器是前端開發人員必要的工作流程。我們對于自身能力的衡量是基于我們能否搞掂IE6，以及完成跨瀏覽器的完美顯示。包括我自己在內的很多人都缺乏傳統的編程經驗，像HTML、css、JavaScript（以及jQuery）這些技能，也都是靠自學成才。
在過去的幾年里，這一狀態正在慢慢改變。這導致了許多人開始認真對待前端開發——也許是由于不同瀏覽器的逐漸統一，亦或是由于包括我在內的這些瀏覽器廠商的前端開發者們，在開發過程中逐漸看到了能夠對程序進行良好架構的有效方法。
不管是什么吧，我們的目光正在從對前端的細枝末節的關注轉移到對于工具的關注，這就對前端開發者提出了一系列新的要求。那些認為這些要求理所應當并開始接受新知識的人，就足以把那些不能滿足要求的開發者們甩出幾條街了。
這里有一些我希望開發者們開始熟悉掌握的知識，如果有某些部分你覺得十分需要，你可以加快學習這部分內容。
JavaScript
JS的重要性是不言而喻的，但是僅僅知道JS的庫已經跟不上時代的需求了。我并不是說你需要知道如何用純JS實現這些庫的功能；而是說你應該知道什么時候應該用庫，并在不需要庫的時候有能力用原生JS實現功能。
這意味著你必須要反復閱讀這本書——《JavaScript：語言精粹》（傳說中的蝴蝶書，譯者注）。你需要：理解諸如objects和array等的數據結構；理解function，并知道使用 call 函數和 apply 函數的原因；使用原型繼承（prototypal inheritance）來編程；管理好異步性等。
如果你覺得你寫純JS弱爆了，這有一些可以幫助你的資源：
-
Eloquent Javascript：一本可以將你帶到JS基礎領域的精彩的書。
-
A Test-Driven JS Assessment：涵蓋了諸多JS領域的測試題目，你能編寫代碼通過他們么？
-
10 things I learned from the jQuery Source：一壇來自Paul Irish（谷歌Chrome開發者，jQuery團隊核心成員，譯者注）的陳年佳釀，教會你如何在閱讀別人代碼的過程中學習新知識。
Git（以及Github的帳號）
如果你不上Github，你根本無法參與到這個豐富的開源社區，汲取如雨后春筍般迅猛發展的前端開發技術。clone一個repo（Git術語，本操作指把放在git倉庫中的代碼下載到本地，譯者注）并親自修改嘗試這件事兒應該成為你的習性，同時你應該理解如何在合作項目上使用分支（branch）的技術。
要提高你的git技術？下面有幾個網站可以共你學習：
模塊化、依賴管理和創建項目
那些通過在頁面上加入<script>或者<style>標簽的方式來進行依賴管理的日子已經一去不復返了（啥？現在都不這樣搞了么？譯者注）。即使你現在不能把一些優秀的工具（例如RequireJS）合并到你的工作流中，你也應該抽時間在你的個人項目、或者在Backbone Boilerplate來研究一下，因為這些工具的好處是巨大的。特別是RequireJS可以讓你開發小型的、模塊化的JS和CSS文件，并通過優化工具對其進行連接和壓縮以便在實際項目中使用。
對AMD規范持懷疑態度？這不應是你無所作為的借口。至少你應該知道使用Uglify或Closure的編譯器來智能優化你的代碼，然后把這些壓縮的文件鏈接到項目中。
如果你在寫純CSS（就是說你不用諸如Sass或者Stylus等CSS編譯器），RequireJS也可以使你的CSS文件模塊化。在基礎文件中使用 @import 語句以加載開發依賴，然后運行RequireJS優化基礎文件并創建實際項目中用到文件。
瀏覽器內置開發者工具
在過去的幾年里，基于瀏覽器的開發者工具的水平已經大大提高，如果你知道如何使用他們，你的開發效率將會提升一個檔次。（啥？你還在用alert來調試代碼？你這是在浪費繩命啊~）
你應該找到一個適于你自己的開發者工具——比方說我這兩天就偏愛谷歌Chrome的開發者工具（也是譯者的最愛）——但是也不要就拋棄了別的瀏覽器，因為大家都在根據開發者的反饋而不斷增加有用的功能特性。Opera的Dragonfly工具就因有一些獨到的功能而在開發者工具中脫穎而出，比如一個CSS分析器、可制訂的快捷鍵、無需USB連接的遠程調試（這是啥？）、可使用和保存的自定義調色板。
如果你對于瀏覽器開發者工具不是十分理解，這個網址：jQuery修復術（不僅僅是jQuery的核心代碼）會教你包括單步調試之類的debug方法——這可是一個能改變你人僧的東西啊，如果你還不會，趕緊的去學習吧！
命令行！
說到了命令行，我們就感覺踏入了苦海——不過你要是說為了不弄臟我用慣了GUI的冷艷高貴的手，就放棄丑陋的終端的話，那你可就得不償失啦。當然，我也不是讓你吃喝拉撒都在終端里解決，不用完全脫離GUI，雖然我覺得沒有它你會活得更好。不過呢，你還是應該擁有用終端編輯運行你任意一個項目的能力。下面有幾條命令你應該做到熟練掌握：
-
ssh：用于登錄到另一臺計算機活服務器 -
scp：用于將文件復制到另一臺計算機活服務器 -
ack或grep：查找項目或文件中包含的字符串或樣式 -
find：給定文件名匹配模式查找文件 -
git：至少會些基本的命令吧，比方add、commit、status和pull -
brew：用Homebrew安裝插件 -
npm：安裝Node插件 -
gem：安裝Ruby插件
如果有些命令是你常用的呢，你可以編輯你的.bashrc，或者.profile，.zshrc之類的，然后搞一個alias讓你不用命令行敲得那么累（alias是設置命令縮寫別名的命令，其實這些原生態命令好像也不是很長很難敲啦……譯者注）。你也可以把你的aliases放到~/.gitconfig文件里。Gianni CHiappetta的這個項目可能對你會有所啟發。
如果你在用windows，我感覺除了說句呵呵以外就沒啥要說的了。呵呵。嗯，其實你可以用一下Cygwin？不管怎么說，要在windows下參與前端項目的開源開發實在是要困難的多。不過所幸現在MacBook Air也不算貴，它功能強大且攜帶便捷；而且我們還有Ubuntu和其他還不錯的帶有GUI的*nix系統。
客戶端模板
在不久之前服務器的典型的做法還是通過一小段HTML返回XHRs（XMLHttpRequest，額不是很理解啊。。現在不用XHR了么），但是差不多在一年到一年半前，前端開發社區找到并著手開發從服務器請求純數據的替代方案。如果在你的代碼里直接將這些數據放入HTML以待將其插入DOM中，會是一個混亂而難以維護的過程。這就是為什么客戶端模板出現的原因：他們讓你維護一個模板，然后將數據插入其中，最終生成HTML的字符串。需要一個模板選擇的工具？Garann Means'的模板選擇器可能會幫到你。
CSS預處理器
Paul Irish之前曾說，我們開始看到了前端開發的編碼與后端開發的明顯不同，CSS預處理器就是一個明顯的例子。當然還是有不少人宣稱除了純CSS之外其他的都是異端，不過現在他們也開始逐漸接受預處理器這個東西。這些工具給了CSS一些按理說應該存在的特性，諸如變量、數學運算、邏輯運算、混入技術（Max-in，譯者也不是很清楚，可以參照這篇文章）等，同時其還可以幫助CSS理清混亂的前綴。
測試
模塊化編程、編寫送耦合的代碼的一大好處就是讓你的代碼變得非常容易測試。現在有了Grunt這樣的工具，讓一個項目包含測試模塊已經變得十分容易。Grunt源自QUnit的集合，不過這兒呢有一大堆測試的框架，供你依據你的喜好以及你對其他方面的要求進行選擇——比方Jasmine和Mocha這兩個框架就是我最近的最愛。
當你的代碼是模塊化的和松耦合的你的測試就會變得很輕松；不過如果你要測試的代碼一團糟，那測試很有可能會變得十分困難或者根本沒法搞定。另一方面，強制要求你對自己寫的代碼進行測試，有時候甚至于在你寫代碼之前就讓你寫好測試用例和測試程序什么的，也會對你好好構思代碼有所幫助。這也會使你在徹底重構代碼時有十足的信心（原文用down the line表示完全地）。
流程自動化（rake、make、grunt等等）
Grunt創建一個內置支持單元測試的項目的能力就是流程自動化的一個例子。前端開發的事實是我們要做一大堆重復的事情。但是我的一個朋友有次和我說，一個牛叉的開發者應該是個懶惰的開發者：從經驗上講，當你發現你重復了同一件事請三次以上，你就應把它自動化了。
諸如make這樣的工具很長一段時間內幫助我們搞定自動化的事情，當然還有rake、grunt等等。如果你要用自動化處理文件系統，那么學會除JavaScript之外的一門語言將對你大有裨益。當你手工處理文件時，Node的異步性對你而言將是一個沉重的負擔。當然這兒也有很多針對特定任務的測試工具，比方開發、編譯生成、質量保障等等。
代碼質量
如果你曾經被一個缺失的分號或多余的逗號的bug所困擾半天，你就會知道代碼中小小的錯誤將會浪費你多少的時間。這就是為啥你要在JSHint這樣的工具里運行代碼，對吧～JSHint是可配置的，而且有多種方法可以整合到你的編輯器或編譯過程中。
詳盡的手冊
唉，前端的苦逼之處在于木有手冊啊，不過MDN還是不錯的。一個好的開發者應該知道在搜索的時候加上mdn的前綴，比方你這樣寫：mdn javascript arrays——以避免找到那些盈利為目的的w3shcools的查詢結果（啥。。譯者一直用w3啊）。
結語
和做其他事情一樣，僅僅讀一些建議啊要求啊是不足以使你成為大拿的——就是小拿也夠嗆。唯一的方法就是自己去實踐吧騷年們！
Good luck.
文章列表
留言列表
