【翻譯】前端開發者應掌握的基本知識

於明昊發表於2013-08-06
原文網址 : http://www.ituring.com.cn/article/51527
前端

繼續轉載一篇已經發布在點點上的文章

原文為 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弱爆了，這有一些可以幫助你的資源：

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 ：用於將檔案複製到另一臺計算機或伺服器
  • awk 或 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.

相關文章