2017年必備的JavaScript開發指南

標籤：tap   不能   style   pac   blank   int   免費課程   函數   prototype   

  過去幾年可能你一直在寫介面。也許一直在最佳化你們公司資料的搜尋速度，也可能在為微波爐寫嵌入式程式。是否記得那時你擺弄Prototype.js，已經過去好長一段時間了。現在你決定是時候提升自己的前端技能了，這時你將看到這樣一幅風景:

 

當然你不是在裡面尋找某人，而且隨機尋找25個人，你甚至都不知道他們的名字。這種被淹沒的感覺在JavaScript社區非常常見，所以“JavaScript疲勞”這個詞是真實存在的。閒置時候你可以看看這篇文章很貼切的反應了這種現象。

 

你現在沒時間，但你又正處在一個巨大的迷宮中，你需要一個地圖，所以我製作了這張地圖。

 

一個小小的免責聲明：這是一個備忘清單，可以讓你在不用做太多選擇的情況下快速學習。我會列出一些工具來滿足大部分情境下的前端開發。當你看完這篇文章，你會有足夠的自信來調整你的技術棧。

 

⊙概要

 

我會將地圖劃分為你需要解決的問題。對於每個問題將包含：

 

• 問題描述以及所需工具

• 決定用哪種工具來解決問題

• 解釋我為什麼選擇這個工具

• 給出幾個替代方案

 ⊙包管理

 

• 問題: 需要組織管理的你的項目和依賴

• 解決: NPM 和 Yarn

• 原因: NPM是市面上非常優秀的包管理工具。Yarn運行在NPM之上，最佳化了依賴解析，把你的第三方依賴版本鎖定在一個檔案中。

• 其他選擇: 據我所知還沒有。

 ⊙JavaScript

• 問題: ECMAScript 5 很老派很糟糕

• 解決: ES6

• 原因: ES6包含了幾個很有用的特性，這些特性其他語言已經存在很久了。說幾個有意思的特性吧：箭頭函數、具備模組匯入匯出能力、對象解構、模板字串、let和const、generators、promises等等。如果你是個python程式員，你會有家的感覺。

• 其他選擇: TypeScript, CoffeeScript, PureScript, Elm

 ⊙文法轉化

• 問題: 許多瀏覽器還沒有大規模的支援ES6。你需要一個程式來將ES6文法轉換成ES5。

• 解決: babel

• 原因: 完美運行，近乎事實上的標準。在伺服器端完成轉換。

• 其他選擇: Traceur

• 注意: 你將使用babel載入器，是一個webpack載入器。如果你使用比如coffeeScript這樣的語言，也需要轉換。

 ⊙檢查工具

• 問題: 有無數種方法可以寫js，所以實現代碼一致性很難。用語法檢查工具可以阻止一些bugs。

• 解決: ESLint

• 原因: 很好的代碼檢查器，而且還可配置。可以很好的協助你適應新的文法。

• 其他選擇: JSLint

 ⊙打包工具

• 問題: 需要處理第三方依賴和模組載入問題。

• 解決: Webpack

• 原因: 高度可配置。可以載入各種依賴，可插拔。

• 其他選擇: Browserify

• 缺點: 首次配置會比較麻煩

• 注意: 你需要花一些時間去瞭解webpack運行機制。以及去瞭解babel-loader, style-loader, css-loader, file-loader, url-loader。

 ⊙測試

• 問題: 有時候你的代碼很脆弱，你需要測試它。

• 解決: mocha（測試回合器），chai（斷言庫）。

• 原因: 使用方便，功能強大.

• 其他選擇: Jasmine, Jest, Sinon, Tape.

 ⊙前端架構 / 狀態管理

• 問題: 這是一個很大的問題。單頁應用變得越來越複雜，可變狀態很麻煩。

• 解決: React 和 Redux

• 為什麼使用React: 讓人興奮的是React打破了許多傳統教條，更好的組件劃分思想：用功能劃分替代了原有通過（HTML/CSS/JavaScript）來劃分組件的方式。

• 為什麼使用Redux: 如果你的應用很複雜，那你需要用一個工具來管理你的狀態。網上有很多工具可以實現，為了節約你的時間請直接學redux吧。它實現簡單，Facebook也在用。

• 其他選擇: Angular2, Vue.js.

• 警告: 當你第一次看到JSX代碼時，可能想罵人。請相信我，把HTML，JavaScript和CSS寫到一個檔案會超級爽，感覺解鎖了一個新世界。

 ⊙操作DOM

• 問題: 你偶爾也需要操作DOM

• 解決: jQuery.

• 原因: 是的，jQuery仍然活的很好，React和jQuery不是水火不容的。你覺得還可以用React原生提供的’querySelector‘，但jQuery的跨瀏覽器的相容能力可以為你省去很多麻煩。

• 其他選擇: Dojo (不知道現在還有嗎).

 ⊙樣式

• 問題: 每個組件需要有獨立的樣式，而且可複用。

• 解決: CSS模組

• 原因: 我喜歡用內聯樣式，但我不得不承認它有很多局限性。當然在React中用也是可以的，但是你不能定位偽類別選取器（如 :hover）。

• 其他選擇: 內聯樣式。我特別喜歡在React中使用內聯樣式，這樣你就可以把樣式當做js對象來處理，而且他們在一個檔案中，非常容易維護。有些人可能主張用 SASS/SCSS/Less，但是又會增加新的步驟，沒有CSS模組/內聯樣式那麼輕便。

•  

• 需要web前端免費課程的同學，QQ登入 http://www.kgc.cn/index.php?tuin=7124，就可以免費領取了

•  

2017年必備的JavaScript開發指南