2018本身的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模塊/內聯樣式那麼輕便。

轉載連接：http://zcfy.cc/article/3696.html