在 2016 年學 JavaScript 是一種什麼樣的體驗？（React從入門到放棄）

jquery 年代 vs 前端模塊化

 

---

 

http://blog.csdn.net/offbye/article/details/52793921

 

++ 嘿，我最近接到一個 Web 項目，不過老實說，我這兩年沒怎麼接觸 Web 編程，據說 Web 技術已經發生了一些變化。據說你是這裏對新技術最瞭解的 Web 開發工程師？
-- 準確地說，我是一名「前端工程師」。不過你算是找對人了。我對今年的技術別提多熟了，前端可視化、音樂播放器、能踢足球的無人機，你儘管問吧。我剛去 JS 大會和 React 大會逛了一圈，沒有什麼新技術是我不知道的。

++ 厲害。是這樣的，我要開發一個網頁，用來展現用戶的最新動態。我想我應該經過後端接口獲取數據，而後用一個 table 來展現數據，用戶能夠對數據進行排序。若是服務器上的數據變化了，我還須要更新這個 table。個人思路是用 jQuery 來作。
-- 可別用 jQuery！如今哪還有人用 jQuery。如今是 2016 年了，你絕對應該用 React。

++ 哦，好吧，React 是什麼？
-- React 是一個很是厲害的庫，Facebook 的牛人寫的。它能讓頁面更可控，性能極高，並且使用起來很簡單。

++ 聽起來確實不錯。我能用 React 展現服務器傳來的數據嗎？
-- 固然能夠，你只須要添加兩個依賴，一個是 React，一個是 React DOM

++ 額，等下，爲何是兩個庫？
-- React 是我說的庫，React DOM 是用來操做 DOM 的。由於這些 DOM 是用 JSX 寫的，因此須要一個專門的庫來操做。

++ JSX？JSX 是什麼？
-- JSX 是對 JS 的擴展，它看起來跟 XML 差很少，能夠用來寫 HTML，你能夠認爲 JSX 是一種更優雅的 HTML 寫法。

++ 爲何不用 HTML 了……？
-- 如今但是 2016 年啊，沒有直接寫 HTML 的。

++ 對哦。好吧，加了這兩個依賴，是否是就能夠開始用 React 了？
-- 不行哦。你須要添加 Babel，而後才能用 React。

++ Babel 是另外一個庫？
-- 嗯，Babel 是一個轉譯工具，Babel 能把你寫的 JS 轉譯成任意版本的 JS。你不必定非要用 Babel，可是若是你不用的話，你就只能寫 ES5 的語法了。你知道的，如今是 2016 年，你怎麼能不使用 ES2016+ 的語法呢？ES2016+
多麼酷啊。

++ ES5 是啥？ES2016+ 又是啥？我有點暈。
-- ES5 就是 ECMAScript 5。大部分人都會使用 ES5，由於大部分瀏覽器都支持 ES5。

++ ECMAScript 是啥……
-- 你曉得的，JS是1995年誕生的，而JS的標準是1999制定出來的。那時候 JavaScript 還叫作 Livescript，只能運行在網景的瀏覽器裏。那時真是混亂的年代，如今好了，咱們有了 JS 的 7 個版本的規範。

++ 7 個版本？那 ES5 和 ES2016+ 是？
-- 分別是第 5 個版本和第 7 個版本。

++ 誒，那第六個版本呢？
-- 你說的是 ES6。每一個版本都是上一個版本的超集，因此你直接使用最新的 ES2016+ 就行了。

++ 對哦。爲何不用 ES6 呢？
-- 好吧，你能夠用 ES6，可是你就用不到 async 和 await 這麼酷的語法了。用 ES2016+ 比較好。用 ES6 的話你就只能用 generator 來控制異步任務流了。

++ 不知道你在說什麼……你說了太多我聽不懂的名詞了。我只是想從服務器取點數據，我之前用 jQuery 挺好的，從 CDN 引入 jQuery，我就能用 AJAX 獲取數據了，如今不能這樣作嗎？
-- 大哥，都 2016 年了，沒人用 jQuery 好嗎。全部人都知道用 jQuery 只會造出「意大利麪條」同樣的代碼（不可維護）

++ 好吧，因此我如今要加載三個庫才能獲取並展現數據。
-- 對的，其實你能夠用「模塊管理器」把這三個庫「打包」成一個文件。

++ 哦，什麼是模塊管理器……
-- 不一樣平臺的模塊管理器不一樣啦。前端的模塊管理器通常指管理 AMD 或者 CommonJS 模塊的東西。

++ 好……吧，什麼是 AMD 和 CommonJS？
-- 是兩個定義。咱們有不少方式來描述 JS 中多個庫或類的交互方式，好比 exports 和 requires。你能夠按照 AMD 或者 CommonJS 的 API 來書寫 JS，而後用 Browserify 將它們打包。

++ 聽起來頗有道理。不過，什麼是 Browserify？
-- 是一個工具，用來將 CommonJS 形式的 JS 文件打包起來，放到瀏覽器裏運行。用 npm 倉庫的人發明了 CommonJS。

++ npm 倉庫是什麼……
-- 是一個公開的倉庫，用於放置可依賴的模塊。

++ 就像一個 CDN 麼？
-- 不太同樣。它更像是一個數據庫，每一個人都能在上面發佈代碼，也能下載上面的代碼。你能夠在開發的時候將這些代碼下載到本地來使用，必要的時候也能上傳到 CDN。

++ 聽起來像是 Bower！
-- 是的，不過如今是 2016 年了，沒有人用 Bower 了……

++ 好吧，我知道了，因此我應該用 npm 來安裝依賴。
-- 對的。我舉個例子吧，若是你要使用 React，你直接用 npm 安裝 React，而後在代碼裏導入 React 就能夠了。大部分 JS 庫都能這麼安裝。

++ 嗯，Angular 也能夠。
-- Angular 是 2015 年的事情了。不過今年 Angular 還沒死，還有 VueJS 和 RxJS 等等，你想學一學麼？

++ 仍是用 React 吧。我剛纔已經學了夠多東西了。因此我用 npm 安裝 React 而後用 Browerify 來打包就行了？
-- 是的。

++ 這麼作看起來有點過於複雜啊。
-- 確實。這就是爲何你應該使用 Grunt、Gulp 或者 Broccoli 這樣的任務管理工具，它們能自動運行 Browserify。不對，你如今能夠用 Mimosa。

++ 你在說什麼……
-- 任務管理工具。不過咱們如今已經不用了。去年咱們還在用，後來改爲了 Makefiles，可是如今咱們用的都是 Webpack。

++ 我覺得只有 C/C++ 項目纔會用 Makefiles。
-- 是的，不過顯然咱們作 Web 開發的，喜歡先把事情搞複雜，而後迴歸到最樸素的狀態。每一年咱們都是這麼搞的。你就看着吧，過不了兩年，咱們就能夠在網頁上寫彙編了。

++ 唉，你剛纔說的 Webpack 是什麼？
-- 另外一種模塊管理工具，同時也是一個任務管理工具。你能夠認爲它是 Browserify 的增強版。

++ 哦，好吧，爲何 Webpack 是增強版？
-- 額，可能並無增強吧。Webpack 告訴你應該如何管理你的依賴，Webpack 容許你使用不一樣的模塊管理器，不僅是 CommonJS，甚至支持 ES6 模塊。

++ 這都是哪跟哪啊，我都被繞暈了。
-- 你們都被繞暈了，不過等 SystemJS 出來了就行了。

++ 天吶，又一個 JS 庫，這是什麼鬼？
-- 呵呵，不像 Browserify 和 Webpack 1.x，SystemJS 是一個動態的模塊加載器。

++ 等下，剛纔不是說應該把全部依賴打包成一個文件嗎？
-- 話是這麼說，可是等 HTTP/2 普及以後，不打包反而更好。

++ 那爲何咱們不直接在頁面裏添加 React 的三個依賴文件呢？
-- 不行。你能夠從 CDN 加載這些文件，可是你仍是要在本地用 Babel 轉譯。

++ 唉，這麼鹺？
-- 是的，你不能在生產環境上運行 babel，你應該在發佈到生產環境以前，運行一系列的任務，包括壓縮、混淆、內聯化CSS、延遲加載script……

++ 我懂了我懂了。既然我不能直接用 CDN，那麼我應該怎麼作？
-- 我會考慮用 Webpack + SystemJS + Babel 來轉譯 Typescript。

++ Typescript？咱們不是在說 JavaScript 嗎？！
-- Typescript 也是 JavaScript 呀，它比 JS 更好用，是 JS 的超集，它是基於 ES6 的，就是咱們剛纔談論的 ES6，你還記得吧。

++ ES2016+ 已是 ES6 的超集了，怎麼又冒出來一個 Typescript？
-- 是這樣的，Typescript 能讓咱們寫出「強類型」的 JS，從而減小運行時的錯誤。2016年，咱們應該讓 JS 支持強類型了。

++ 顯然 Typescript 能夠作到。
-- Flow 也能夠作到，區別是 Typescript 須要編譯，而 Flow 只是檢查語法。

++ 唉，Flow 是？
-- 是一個靜態類型檢查器，就是 Facebook 的人寫的。使用 OCaml 寫的，函數式編程很叼的。

++ OCaml？函數式編程？
-- 現在大牛都用這些東西，都2016年了，你懂的，函數式編程、高階函數、柯里化、純函數這些概念。

++ 不知道你在說什麼。
-- 一開始你們都不知道。這麼說吧，你只須要知道函數式編程比面向對象編程厲害，2016 年咱們就指着函數式編程了。

++ 等下，我大學裏學過面向對象編程，當時我以爲它還不錯。
-- Java 在被 Oracle 買下來以前也挺不錯啊。個人意思是，面向對象之前是不錯，如今依然有人用它，可是如今全部人都發覺狀態變換是很難維護的，因此你們都開始用「不可變對象」和函數式編程了。Haskell
的人已經用這套東西用了好久了，不過幸運的是 Web 開發領域裏有 Ramda 這樣的庫，讓咱們用 JS 就能夠進行函數式編程了。

++ 你剛剛是否是又拋出了幾個名詞？Ramnda 又是什麼？
-- 不是 Ramnda，是 Ramda，跟 Lambda 表達式有點像。是 David Chambers 寫的庫。

++ 誰？
-- David Chambers，大神一個。blablabla

++ 我不得不打斷你一下了。這些東西看起來都不錯，可是我以爲它們都太複雜，並且不必。我只是想獲取數據而後展現，我很肯定這種狀況下我不須要掌握這些知識。回到 React 吧，用 React 我怎麼從服務器獲取數據？
-- 額，React 沒有提供這個功能，你只能用 React 展現數據。

++ 服了啊。那我怎麼獲取數據？
-- 你用 Fetch API 就能夠了。

++ 啥玩意？這個 API 的名字很爛啊。
-- 我也以爲是啊。Fetch API 是瀏覽器提供的異步請求接口。

++ 哦，那不就是 AJAX。
-- AJAX 只是使用 XMLHttpRequest 對象，可是 Fetch API 可讓你用 Promise 風格來發起異步請求，幫你擺脫「回調地獄」。

++ 回調地獄？
-- 是的，每次你發起一個異步請求，就得等待它響應。這時你就得在函數裏使用一個函數，這種嵌套調用就是回調地獄。

++ 好吧。Promise 解決了這個問題麼？
-- 是的。用 Promise 來管理回調，你就能夠寫出更易讀的代碼，更容易測試的代碼。甚至能夠同時發起多個請求，而後等待它們所有返回。

++ Fetch 也能作到嗎？
-- 是的。但前提是你的用戶使用了新版的瀏覽器，否則的話你就須要加一個 Fetch 的 「polyfill」，或者使用 Request、Bluebird 或者 Axios 這些庫。

++ 天吶我到底須要多少個庫？
-- 這是 JS，同一件事情有上千個庫在作。咱們瞭解庫，並且咱們有最好的庫，咱們有海量的庫，要什麼有什麼。

++ 你剛纔說的幾個庫都是幹什麼的？
-- 這幾個庫操做 XMLHttpRequest 而後返回 Promise 對象。

++ 好像 jQuery 的 ajax 方法作的是一樣的事吧……
-- 從 2016 年起咱們就不用 jQuery 了。用 Fetch，大不了加個 Polyfill，要否則用 Bluebird、Request 或者 Axios 都行。而後用 await 和 async 管理 Promise，這樣才能控制好異步任務。

++ 這是你第三次說 await 了，那是什麼東西？
-- await 能讓你攔住一個異步調用，讓你更好地控制異步返回的數據，大大加強了代碼的可讀性。await 很是好用，你只須要在 Babel 裏添加 stage–3 配置，或者添加 syntax-async-functions 和 transform-async-to-generator
插件就能夠了。

++ 聽起來像是瘋了。
-- 沒瘋。爲了使用 await，把 Typescript 編譯以後再用 Babel 轉譯一道的人才是瘋了。

++ 啥玩意？Typescript 不支持 await？
-- 下個版本就支持了。

++ 我已經無話可說了。
-- 你看其實很簡單。用 Typescript 寫代碼，用 Fetch 發起異步請求，全部代碼編譯成 ES6，而後用上 Babel 的 stage–3 配置項，把 ES6 轉譯成 ES5。全部代碼用 SystemJS 加載。若是你用不了 Fetch，就加個 polyfill，或者用
Bluebird、Request 或者 Axios，這樣你就能夠用 await 來處理 Promise 了。

++ 看來咱們倆對於「簡單」的理解是不一樣的。好吧，有了這些，我終於能夠獲取數據而後用 React 展現數據了，對吧？
-- 你的網頁須要處理狀態變動嗎？

++ 唔，不用吧。我只是想展現數據。
-- 那就好，否則我就得跟你解釋 Flux，以及 Flux 的一些實現，好比 Flummox、Alt、Fluxible。不過說真的你應該用 Redux。

++ 你說的這些我就當耳旁風了。再說一次，我只想展現數據。
-- 這樣啊，若是你只是想展現數據，其實你不須要 React。你只須要一個模板引擎。

++ 你逗我呢？
-- 我只是告訴你你能夠用什麼技術。

++ 別說了，真的。
-- 我想說，即便只是用一個模板引擎，我仍是會用 Typescript + SystemJS + Babel 的。

++ 我只是想在頁面上展現數據，你就告訴我用哪一個模板引擎就行了。
-- 有不少，你用過哪個？

++ 額，過久沒用了，不記得了。
-- jTemplates、jQote 仍是 PURE？

++ 額，不記得，還有別的麼？
-- Transparency? JSRender? MarkupJS? KnockoutJS? 這一個支持雙向綁定。

++ 還有嗎？
-- PlatesJS? jQuery-tmpl? Handlebars? 還有些人在用。

++ 有點像。有哪些跟最後一個比較像的？
-- Mustache, underscore? 我記得連 Lodash 都有一個模板引擎，不過這是 2014 年的事情了。

++ 額，也許是再新一點的庫？
-- Jade? DustJS?

++ 沒用過
-- DotJS? EJS?

++ 沒用過。
-- Nunjucks? ECT?

++ 沒用過。記不起來了，要是你的話，你用哪一個？
-- 我應該會用 ES6 原生的模板字符串

++ 我猜猜，只有 ES6 支持。
-- 對的。

++ 須要用 Babel
-- 對的。

++ 須要用 npm 安裝
-- 對的。

++ 須要用 Browserify 或者 Webpack，或者 SystemJS
-- 對的。

++ 若是沒用 Webpack 的話，我還須要一個任務管理工具。
-- 對的。

++ 可是因爲我要用函數式編程和強類型語言，因此我首先要用上 Typescript 或者 Flow。
-- 對的。

++ 若是我要用 await，那我就必須用 Babel 轉譯。
-- 對的。

++ 而後我就能用上 Fetch、Promise 和各類炫酷的東西。
-- 嗯，別忘了加上 Fetch 的 Polyfill，由於 Safari 不支持 Fetch。

++ 你猜怎麼着，咱們就聊到這吧。我不作了，我不作 Web 了，我也不想再碰 JS 了。
-- 沒事，過不了幾年，咱們都會用 Elm 或者 WebAssembly 了。

++ 我要回後端去了，我受不這些變更、版本更新、編譯和轉譯了，JS 社區若是以爲有人能跟上它的腳步，那這個社區就是瘋了。
-- 我理解你。我建議你去 Python 社區。

++ 爲何？
-- 據說過 Python 3 嗎？

完。
譯者注：最後一句「據說過 Python 3 嗎？」是諷刺 Python 3 發佈已經 8 年了，Python 社區卻依然在使用 Python 2.7。而 JS 社區正好相反，把尚未實現的語言特性都用到生成環境中了！

譯者：方應杭