轉：前端開發者的基本要求

時間 2019-11-13

原文原文鏈接

原文連接：http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/javascript

前幾天我爲一個項目寫README文檔，我但願其餘開發者可以看到這個項目，並從中學到一些東西。忽然我意識到，若放在幾年前，我寫做的過程當中隨口提到的Node，npm，Homebrew，git，測試還有產品構建，會把我魂都嚇沒了。css

曾經有段時間，一個前端開工程師基本的工做流程是：編輯文件，本地測試下（盡咱們可能作到最好），而後經過FTP上傳到服務器。咱們評價一個前端工程師的水平，是經過他是否可以兼容IE6，或者取得跨瀏覽器的像素級的一致。不少社區的成員——包括我在內——缺乏傳統的編程經驗。HTML、CSS和JavaScript——一般指jQuery——是自學的技能。html

這些事情在過去的幾年裏發生了變化。多是由於你們開始認真的看待前端開發者的工做，或者是由於瀏覽器開發商開始臭味相投（趨向一致？原句getting their shit together），又或者是前端開發者本身——一樣，包括我在內——開始看到軟件開發變得完善的曙光。前端

無論怎麼說，咱們看到前端開發的重點，從繁瑣轉向了重視工具化。想要成爲一名成功的前端開發者，你須要掌握一套新的基礎技能，而不知足要求的前端開發者會感受到落後愈來愈多，而那些正在分享他們知識的工程師們以爲這些事情是天然而然的。java

下面提到的一些內容是我但願人們可以熟悉的，除此以外還有一些相關的資源，若是你以爲你須要在成長的道路上加速的話。（感謝Paul Irish，Mike Taylor，Angus Croll，以及Vlad Fillppov的貢獻）jquery

JavaScript

這個不用多說，但僅僅知道一個javascript庫不再夠了。我並非說你須要知道如何用原生的JavaScript實現一個JavaScript庫的全部特性，但你須要知道，何時的確須要用庫，同時，在不須要用庫的時候，有能力用簡單而古老的JavaScript完成你的工做。git

這意味着，你已經讀過《JavaScript語言精粹》—— 但願不止一次。你理解像對象、數組這樣的數據結構；函數，包括如何、爲何你須要～call和apply他們；掌握原型繼承；掌握javascript的異步操做。github

若是你的原生JS比較弱，這裏有一些資源能夠幫到你：chrome

《JavaScript編程精解》：一本能夠帶你迴歸JavaScript基礎的書，挺不錯的（有紙質版的）
《測試驅動的JS評價》：一系列失敗測試，它們覆蓋了不一樣的JavaScript主題；你可以編寫讓測試經過的代碼嗎？
《我從jQuery源碼中學到的10點》：Paul Irish給咱們帶來的禮物，雖然比較舊，但的確不錯，它讓咱們知道從閱讀他人的代碼中所能學到的東西。

Git（還有一個Github帳戶）

若是你沒訪問過Github，你絕對沒法參與到這個資源豐富的開源社區中來，它已經在前端開發技術領域呈現欣欣向榮之勢。克隆一個分支而後跑一下應該成爲你的習慣，同時你須要知道在多人協做的項目中如何使用分支。npm

須要提高你的git技能？

模塊化，依賴管理，產品構建

經過在頁面塞幾個script或style標籤來管理依賴的日子已經一去不復返了。即便你還沒能可以將RequireJS引入你的工做流程中去，也應該找時間在本身的我的項目，或像Backbone Boilerplate這樣的項目裏試下它，由於它能給咱們帶來許多好處。RequireJS可以讓你開發的JS、CSS文件保持模塊化、粒度足夠細，而在產品上線前能夠經過配套的優化工具進行文件壓縮、合併。

AMD聽起來很嚇人？再也沒有藉口什麼也不幹了。至少，你應該知道存在像UglifyJS、Closure Compiler這樣的工具，它們可以在你的產品上線前，對你的代碼進行智能壓縮和合並。

若是你還在寫原生的CSS —— 也就是說，目前沒有用像Sass或者Stylus這樣的CSS預處理器 —— RereireJS也可以幫你保持你的CSS文件模塊化。在一個基礎樣式文件裏使用@import聲明來加載相關依賴文件，而後對這個基礎文件運行ReqireJS Optimizer來構建實際生產環境所要用到的文件。

瀏覽器內置開發者工具

在過去的幾年裏，基於瀏覽器的開發工具已經大大獲得了提高，若是你知道怎麼利用好它們的話，它們可以大大提升你的開發體驗。（提示：若是你還在使用alert調試代碼的話，你會浪費不少時間）

你或許須要肯定一款瀏覽器，你主要使用它的開發者工具 —— 近來我比較傾向於使用Google Chrome開發者工具 —— 但不要當即拋棄其餘瀏覽器的開發者工具，由於他們常常會根據開發者的反饋來添加有用的特性。特別值得一提的是，Opera的Dragonfly的某些功能讓它的開發者工具不同凡響，好比（尚在實驗中的）CSS分析器，可用戶自定義的鍵盤快捷鍵，無需USB鏈接的遠程調試，以及可以保存並使用自定義的調色板。

命令行

說到命令行，適應它(being comfortable with it)不再是可選項了——若是你沒有準備好坐到終端窗口前，並親自動手敲命令行的話，你一路上會錯過很是多的東西。我並非說你必須在終端上完成全部事情——我不會搶走你的git GUI（圖形化用戶操做界面），雖然個人確以爲最終你離開它會更好——但無論作什麼項目，你最好一直開着你的命令行終端。下面幾個命令行任務是你必須不假思索就必須可以完成的：

ssh 登陸另外一臺機器或服務器
scp 拷貝文件到另外一臺機器或服務器
ack或者grep 找到文件名包含某個字符串或符合某種模式的文件
find 定位文件名符合某種模式的文件
git 至少可以用它完成以下事情：add，commit，status和pull
brew 經過Homebrew 來安裝文件
npm 安裝Node包
gem 安裝Ruby包

若是有些命令你用得比較多，你能夠編輯.bashrc或者.profile或者.zshrc或者其餘，而後建立alias，這樣你就不用像以前那樣敲不少字符。你也能夠添加alias到你的~/.gitconfig文件裏。Gianni Chiappetta的dofiles是個不錯的範例。

注意：若是你在Windows上開發，我不知道如何幫助你，除了建議使用Cygwin。在Windows上參與前端開源社區的活動比較麻煩，固然我說的不必定正確。相反的，MacBook Air便宜、強大，並且難以想象地便攜，並且老是會有Ubuntu或者各類*nix。

前端模板

在不久以前，對於前端的XHR請求，服務器典型的應答方式是返回一段HTML文本。但在過去的12到18個月間，前端開發社區看到了曙光，要求服務端返回單純的數據。將數據轉成HTML是件麻煩的事情，若是處理得很差的話，可維護性會至關糟糕。這就是前端模版庫誕生的目的：你僅須要維護一套模板，在須要的時候提供數據，就可以將模板轉換成HTML。在模板庫的選擇上須要幫助？Garann Mean的template chooser可以給你指明方向。

CSS預處理器

Paul Irish前些天注意到，前端開發者編寫的代碼，跟最終在生產環境部署的差異開始變得很大。經過CSS預處理器寫出來的代碼就是很好的例子。仍然有很多人堅持說原生的CSS纔是惟一的出路，但它們離咱們愈來愈近(but they are starting to come around)。這些工具提供了一些CSS屬性按理來講早就該有的特性，包括——變量、數學運算、邏輯、混合(mixin)，它們可以幫你從一堆冗餘的特性前綴中解放出來。

測試

編寫模塊化、鬆耦合代碼的樂趣之一就是，你的代碼變得很容測試。若是你用了Grunt這樣的工具，建立一個包含測試用例的項目再簡單不過了。雖然Grunt集成了QUnit，可是還有許多測框架供你選擇——Jasmine和Mocha是我喜歡的兩個測試框架——框架的選擇取決於你的我的偏好，以及你項目的結構(the mark up of the rest of your stack)。

若是你的代碼是模塊化、鬆耦合的，測試是件有趣的事情。然而，對於那些組織糟糕的代碼，測試不單困難，有時甚至不可能的。換句話說，強迫本身編寫測試用例——甚至可能在你正式編碼以前——有助於幫你理清你的思路以及你的代碼組織。後續當你重構你的代碼的時候，它也能讓你充滿自信。

我錄製的一段很短的視頻，關於如何使用Jasmine測試jQuery
一個jquery-bbq插件單元測試的例子

流程自動化(rake/make/grunt/其餘)

流程自動化的一個例子：經過Grunt建立內置單元測試的項目。前端開發的現狀是，咱們有一大堆重複性的工做須要作，但有個朋友曾經告訴我，一個好的開發者是個「懶惰」的開發者：首要的一點是，若是你發現本身作同一件一樣的事件超過三次，那麼是時候將它變成自動化的。

像make這樣的工具已經存在很長一段時間，主要用來幫咱們解決上述問題，但也有相似rake、grunt以及其餘相似的工具。若是你想把跟須要跟文件系統打交道的任務變成自動化，學習一門JavaScript之外的語言很是有幫助，由於當你僅僅想要處理文件時，Node的異步特性會讓事情變得更加麻煩。也有許多針對特定任務的自動化工具——部署，構建，代碼質量保證，還有其餘。