2017年必備的JavaScript開發指南

 

 過去幾年可能你一直在寫接口。也許一直在優化大家公司數據的搜索速度，也可能在爲微波爐寫嵌入式程序。是否記得那時你擺弄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，就能夠免費領取了