嘿，我最近接到一個(gè) Web 項(xiàng)目，不過老實(shí)說，我這兩年沒怎么接觸 Web 編程，聽說 Web 技術(shù)已經(jīng)發(fā)生了一些變化。聽說你是這里對(duì)新技術(shù)最了解的 Web 開發(fā)工程師？
準(zhǔn)確地說，我是一名「前端工程師」。不過你算是找對(duì)人了。我對(duì)今年的技術(shù)別提多熟了，前端可視化、音樂播放器、能踢足球的無人機(jī)，你盡管問吧。我剛?cè)?JS 大會(huì)和 React 大會(huì)逛了一圈，沒有什么新技術(shù)是我不知道的。
厲害。是這樣的，我要開發(fā)一個(gè)網(wǎng)頁，用來展示用戶的最新動(dòng)態(tài)。我想我應(yīng)該通過后端接口獲取數(shù)據(jù)，然后用一個(gè) table 來展示數(shù)據(jù)，用戶可以對(duì)數(shù)據(jù)進(jìn)行排序。如果服務(wù)器上的數(shù)據(jù)變化了，我還需要更新這個(gè) table。我的思路是用 jQuery 來做。
可別用 jQuery！現(xiàn)在哪還有人用 jQuery?，F(xiàn)在是 2016 年了，你絕對(duì)應(yīng)該用 React。
哦，好吧，React 是什么？
React 是一個(gè)非常厲害的庫，F(xiàn)acebook 的牛人寫的。它能讓頁面更可控，性能極高，而且使用起來很簡(jiǎn)單。
聽起來確實(shí)不錯(cuò)。我能用 React 展示服務(wù)器傳來的數(shù)據(jù)嗎？
當(dāng)然可以，你只需要添加兩個(gè)依賴，一個(gè)是 React，一個(gè)是 React DOM
額，等下，為什么是兩個(gè)庫？
React 是我說的庫，React DOM 是用來操作 DOM 的。因?yàn)檫@些 DOM 是用 JSX 寫的，所以需要一個(gè)專門的庫來操作。
JSX？JSX 是什么？
JSX 是對(duì) JS 的擴(kuò)展，它看起來跟 XML 差不多，可以用來寫 HTML，你可以認(rèn)為 JSX 是一種更優(yōu)雅的 HTML 寫法。
為什么不用 HTML 了……？
現(xiàn)在可是 2016 年啊，沒有直接寫 HTML 的。
對(duì)哦。好吧，加了這兩個(gè)依賴，是不是就可以開始用 React 了？
不行哦。你需要添加 Babel，然后才能用 React。
Babel 是另一個(gè)庫？
嗯，Babel 是一個(gè)轉(zhuǎn)譯工具，Babel 能把你寫的 JS 轉(zhuǎn)譯成任意版本的 JS。你不一定非要用 Babel，但是如果你不用的話，你就只能寫 ES5 的語法了。你知道的，現(xiàn)在是 2016 年，你怎么能不使用 ES2016+ 的語法呢？ES2016+ 多么酷啊。
ES5 是啥？ES2016+ 又是啥？我有點(diǎn)暈。
ES5 就是 ECMAScript 5。大部分人都會(huì)使用 ES5，因?yàn)榇蟛糠譃g覽器都支持 ES5。
ECMAScript 是啥……
你曉得的，JS是1995年誕生的，而JS的標(biāo)準(zhǔn)是1999制定出來的。那時(shí)候 JavaScript 還叫做 Livescript，只能運(yùn)行在網(wǎng)景的瀏覽器里。那時(shí)真是混亂的年代，現(xiàn)在好了，我們有了 JS 的 7 個(gè)版本的規(guī)范。
7 個(gè)版本？那 ES5 和 ES2016+ 是？
分別是第 5 個(gè)版本和第 7 個(gè)版本。
誒，那第六個(gè)版本呢？
你說的是 ES6。每個(gè)版本都是上一個(gè)版本的超集，所以你直接使用最新的 ES2016+ 就好了。
對(duì)哦。為什么不用 ES6 呢？
好吧，你可以用 ES6，但是你就用不到 async 和 await 這么酷的語法了。用 ES2016+ 比較好。用 ES6 的話你就只能用 generator 來控制異步任務(wù)流了。
不知道你在說什么……你說了太多我聽不懂的名詞了。我只是想從服務(wù)器取點(diǎn)數(shù)據(jù)，我以前用 jQuery 挺好的，從 CDN 引入 jQuery，我就能用 AJAX 獲取數(shù)據(jù)了，現(xiàn)在不能這樣做嗎？
大哥，都 2016 年了，沒人用 jQuery 好嗎。所有人都知道用 jQuery 只會(huì)造出「意大利面條」一樣的代碼（不可維護(hù)）
好吧，所以我現(xiàn)在要加載三個(gè)庫才能獲取并展示數(shù)據(jù)。
對(duì)的，其實(shí)你可以用「模塊管理器」把這三個(gè)庫「打包」成一個(gè)文件。
哦，什么是模塊管理器……
不同平臺(tái)的模塊管理器不同啦。前端的模塊管理器一般指管理 AMD 或者 CommonJS 模塊的東西。
好……吧，什么是 AMD 和 CommonJS？
是兩個(gè)定義。我們有很多方式來描述 JS 中多個(gè)庫或類的交互方式，比如 exports 和 requires。你可以按照 AMD 或者 CommonJS 的 API 來書寫 JS，然后用 Browserify 將它們打包。
聽起來很有道理。不過，什么是 Browserify？
是一個(gè)工具，用來將 CommonJS 形式的 JS 文件打包起來，放到瀏覽器里運(yùn)行。用 npm 倉庫的人發(fā)明了 CommonJS。
npm 倉庫是什么……
是一個(gè)公開的倉庫，用于放置可依賴的模塊。
就像一個(gè) CDN 么？
不太一樣。它更像是一個(gè)數(shù)據(jù)庫，每個(gè)人都能在上面發(fā)布代碼，也能下載上面的代碼。你可以在開發(fā)的時(shí)候?qū)⑦@些代碼下載到本地來使用，必要的時(shí)候也能上傳到 CDN。
聽起來像是 Bower！
是的，不過現(xiàn)在是 2016 年了，沒有人用 Bower 了……
好吧，我知道了，所以我應(yīng)該用 npm 來安裝依賴。
對(duì)的。我舉個(gè)例子吧，如果你要使用 React，你直接用 npm 安裝 React，然后在代碼里導(dǎo)入 React 就可以了。大部分 JS 庫都能這么安裝。
嗯，Angular 也可以。
Angular 是 2015 年的事情了。不過今年 Angular 還沒死，還有 VueJS 和 RxJS 等等，你想學(xué)一學(xué)么？
還是用 React 吧。我剛才已經(jīng)學(xué)了夠多東西了。所以我用 npm 安裝 React 然后用 Browerify 來打包就好了？
是的。
這么做看起來有點(diǎn)過于復(fù)雜啊。
確實(shí)。這就是為什么你應(yīng)該使用 Grunt、Gulp 或者 Broccoli 這樣的任務(wù)管理工具，它們能自動(dòng)運(yùn)行 Browserify。不對(duì)，你現(xiàn)在可以用 Mimosa。
你在說什么……
任務(wù)管理工具。不過我們現(xiàn)在已經(jīng)不用了。去年我們還在用，后來改成了 Makefiles，但是現(xiàn)在我們用的都是 Webpack。
我以為只有 C/C++ 項(xiàng)目才會(huì)用 Makefiles。
是的，不過顯然我們做 Web 開發(fā)的，喜歡先把事情搞復(fù)雜，然后回歸到最樸素的狀態(tài)。每年我們都是這么搞的。你就看著吧，過不了兩年，我們就可以在網(wǎng)頁上寫匯編了。
唉，你剛才說的 Webpack 是什么？
另一種模塊管理工具，同時(shí)也是一個(gè)任務(wù)管理工具。你可以認(rèn)為它是 Browserify 的加強(qiáng)版。
哦，好吧，為什么 Webpack 是加強(qiáng)版？
額，可能并沒有加強(qiáng)吧。Webpack 告訴你應(yīng)該如何管理你的依賴，Webpack 允許你使用不同的模塊管理器，不只是 CommonJS，甚至支持 ES6 模塊。
這都是哪跟哪啊，我都被繞暈了。
大家都被繞暈了，不過等 SystemJS 出來了就好了。
天吶，又一個(gè) JS 庫，這是什么鬼？
呵呵，不像 Browserify 和 Webpack 1.x，SystemJS 是一個(gè)動(dòng)態(tài)的模塊加載器。
等下，剛才不是說應(yīng)該把所有依賴打包成一個(gè)文件嗎？
話是這么說，但是等 HTTP/2 普及之后，不打包反而更好。
那為什么我們不直接在頁面里添加 React 的三個(gè)依賴文件呢？
不行。你可以從 CDN 加載這些文件，但是你還是要在本地用 Babel 轉(zhuǎn)譯。
唉，這么鹺？
是的，你不能在生產(chǎn)環(huán)境上運(yùn)行 babel，你應(yīng)該在發(fā)布到生產(chǎn)環(huán)境之前，運(yùn)行一系列的任務(wù)，包括壓縮、混淆、內(nèi)聯(lián)化CSS、延遲加載script……
我懂了我懂了。既然我不能直接用 CDN，那么我應(yīng)該怎么做？
我會(huì)考慮用 Webpack + SystemJS + Babel 來轉(zhuǎn)譯 Typescript。
Typescript？我們不是在說 JavaScript 嗎？！
Typescript 也是 JavaScript 呀，它比 JS 更好用，是 JS 的超集，它是基于 ES6 的，就是我們剛才談?wù)摰?ES6，你還記得吧。
ES2016+ 已經(jīng)是 ES6 的超集了，怎么又冒出來一個(gè) Typescript？
是這樣的，Typescript 能讓我們寫出「強(qiáng)類型」的 JS，從而減少運(yùn)行時(shí)的錯(cuò)誤。2016年，我們應(yīng)該讓 JS 支持強(qiáng)類型了。
顯然 Typescript 可以做到。
Flow 也可以做到，區(qū)別是 Typescript 需要編譯，而 Flow 只是檢查語法。
唉，F(xiàn)low 是？
是一個(gè)靜態(tài)類型檢查器，就是 Facebook 的人寫的。使用 OCaml 寫的，函數(shù)式編程很叼的。
OCaml？函數(shù)式編程？
如今大牛都用這些東西，都2016年了，你懂的，函數(shù)式編程、高階函數(shù)、柯里化、純函數(shù)這些概念。
不知道你在說什么。
一開始大家都不知道。這么說吧，你只需要知道函數(shù)式編程比面向?qū)ο缶幊虆柡Γ?016 年我們就指著函數(shù)式編程了。
等下，我大學(xué)里學(xué)過面向?qū)ο缶幊?，?dāng)時(shí)我覺得它還不錯(cuò)。
Java 在被 Oracle 買下來之前也挺不錯(cuò)啊。我的意思是，面向?qū)ο笠郧笆遣诲e(cuò)，現(xiàn)在依然有人用它，但是現(xiàn)在所有人都發(fā)覺狀態(tài)變換是很難維護(hù)的，所以大家都開始用「不可變對(duì)象」和函數(shù)式編程了。Haskell 的人已經(jīng)用這套東西用了很久了，不過幸運(yùn)的是 Web 開發(fā)領(lǐng)域里有 Ramda 這樣的庫，讓我們用 JS 就可以進(jìn)行函數(shù)式編程了。
你剛剛是不是又拋出了幾個(gè)名詞？Ramnda 又是什么？
不是 Ramnda，是 Ramda，跟 Lambda 表達(dá)式有點(diǎn)像。是 David Chambers 寫的庫。
誰？
David Chambers，大神一個(gè)。blablabla
我不得不打斷你一下了。這些東西看起來都不錯(cuò)，但是我覺得它們都太復(fù)雜，而且沒必要。我只是想獲取數(shù)據(jù)然后展示，我很確定這種情況下我不需要掌握這些知識(shí)。
回到 React 吧，用 React 我怎么從服務(wù)器獲取數(shù)據(jù)？
額，React 沒有提供這個(gè)功能，你只能用 React 展示數(shù)據(jù)。
服了啊。那我怎么獲取數(shù)據(jù)？
你用 Fetch API 就可以了。
啥玩意？這個(gè) API 的名字很爛啊。
我也覺得是啊。Fetch API 是瀏覽器提供的異步請(qǐng)求接口。
哦，那不就是 AJAX。
AJAX 只是使用 XMLHttpRequest 對(duì)象，但是 Fetch API 可以讓你用 Promise 風(fēng)格來發(fā)起異步請(qǐng)求，幫你擺脫「回調(diào)地獄」。
回調(diào)地獄？
是的，每次你發(fā)起一個(gè)異步請(qǐng)求，就得等待它響應(yīng)。這時(shí)你就得在函數(shù)里使用一個(gè)函數(shù)，這種嵌套調(diào)用就是回調(diào)地獄。
好吧。Promise 解決了這個(gè)問題么？
是的。用 Promise 來管理回調(diào)，你就可以寫出更易讀的代碼，更容易測(cè)試的代碼。甚至可以同時(shí)發(fā)起多個(gè)請(qǐng)求，然后等待它們?nèi)糠祷亍?/blockquote>
Fetch 也能做到嗎？
是的。但前提是你的用戶使用了新版的瀏覽器，不然的話你就需要加一個(gè) Fetch 的 「polyfill」，或者使用 Request、Bluebird 或者 Axios 這些庫。
天吶我到底需要多少個(gè)庫？
這是 JS，同一件事情有上千個(gè)庫在做。我們了解庫，而且我們有最好的庫，我們有海量的庫，要什么有什么。
你剛才說的幾個(gè)庫都是干什么的？
這幾個(gè)庫操作 XMLHttpRequest 然后返回 Promise 對(duì)象。
好像 jQuery 的 ajax 方法做的是同樣的事吧……
從 2016 年起我們就不用 jQuery 了。用 Fetch，大不了加個(gè) Polyfill，要不然用 Bluebird、Request 或者 Axios 都行。然后用 await 和 async 管理 Promise，這樣才能控制好異步任務(wù)。
這是你第三次說 await 了，那是什么東西？
await 能讓你攔住一個(gè)異步調(diào)用，讓你更好地控制異步返回的數(shù)據(jù)，大大增強(qiáng)了代碼的可讀性。await 非常好用，你只需要在 Babel 里添加 stage–3 配置，或者添加 syntax-async-functions 和 transform-async-to-generator 插件就可以了。
聽起來像是瘋了。
沒瘋。為了使用 await，把 Typescript 編譯之后再用 Babel 轉(zhuǎn)譯一道的人才是瘋了。
啥玩意？Typescript 不支持 await？
下個(gè)版本就支持了。
我已經(jīng)無話可說了。
你看其實(shí)很簡(jiǎn)單。用 Typescript 寫代碼，用 Fetch 發(fā)起異步請(qǐng)求，所有代碼編譯成 ES6，然后用上 Babel 的 stage–3 配置項(xiàng)，把 ES6 轉(zhuǎn)譯成 ES5。所有代碼用 SystemJS 加載。如果你用不了 Fetch，就加個(gè) polyfill，或者用 Bluebird、Request 或者 Axios，這樣你就可以用 await 來處理 Promise 了。
看了我們對(duì)于「簡(jiǎn)單」的理解是不同的。好吧，有了這些，我終于可以獲取數(shù)據(jù)然后用 React 展示數(shù)據(jù)了，對(duì)吧？
你的網(wǎng)頁需要處理狀態(tài)變更嗎？
唔，不用吧。我只是想展示數(shù)據(jù)。
那就好，不然我就得跟你解釋 Flux，以及 Flux 的一些實(shí)現(xiàn)，比如 Flummox、Alt、Fluxible。不過說真的你應(yīng)該用 Redux。
你說的這些我就當(dāng)耳旁風(fēng)了。再說一次，我只想展示數(shù)據(jù)。
這樣啊，如果你只是想展示數(shù)據(jù)，其實(shí)你不需要 React。你只需要一個(gè)模板引擎。
你逗我呢？
我只是告訴你你可以用什么技術(shù)。
別說了，真的。
我想說，即使只是用一個(gè)模板引擎，我還是會(huì)用 Typescript + SystemJS + Babel 的。
我只是想在頁面上展示數(shù)據(jù)，你就告訴我用哪個(gè)模板引擎就好了。
有很多，你用過哪一個(gè)？
額，太久沒用了，不記得了。
jTemplates、jQote 還是 PURE？
額，不記得，還有別的么？
Transparency? JSRender? MarkupJS? KnockoutJS? 這一個(gè)支持雙向綁定。
還有嗎？
PlatesJS? jQuery-tmpl? Handlebars? 還有些人在用。
有點(diǎn)像。有哪些跟最后一個(gè)比較像的？
Mustache, underscore? 我記得連 Lodash 都有一個(gè)模板引擎，不過這是 2014 年的事情了。
額，也許是再新一點(diǎn)的庫？
Jade? DustJS?
沒用過
DotJS? EJS?
沒用過。
Nunjucks? ECT?
沒用過。記不起來了，要是你的話，你用哪個(gè)？
我應(yīng)該會(huì)用 ES6 原生的模板字符串
我猜猜，只有 ES6 支持。
對(duì)的。
需要用 Babel
對(duì)的。
需要用 npm 安裝
對(duì)的。
需要用 Browserify 或者 Webpack，或者 SystemJS
對(duì)的。
如果沒用 Webpack 的話，我還需要一個(gè)任務(wù)管理工具。
對(duì)的。
但是由于我要用函數(shù)式編程和強(qiáng)類型語言，所以我首先要用上 Typescript 或者 Flow。
對(duì)的。
如果我要用 await，那我就必須用 Babel 轉(zhuǎn)譯。
對(duì)的。
然后我就能用上 Fetch、Promise 和各種炫酷的東西。
嗯，別忘了加上 Fetch 的 Polyfill，因?yàn)?Safari 不支持 Fetch。
你猜怎么著，我們就聊到這吧。我不做了，我不做 Web 了，我也不想再碰 JS 了。
沒事，過不了幾年，我們都會(huì)用 Elm 或者 WebAssembly 了。
我要回后端去了，我受不這些變動(dòng)、版本更新、編譯和轉(zhuǎn)譯了，JS 社區(qū)如果覺得有人能跟上它的腳步，那這個(gè)社區(qū)就是瘋了。
我理解你。我建議你去 Python 社區(qū)。為什么？
聽說過 Python 3 嗎？
完。
譯者注：最后一句「聽說過 Python 3 嗎？」是諷刺 Python 3 發(fā)布已經(jīng) 8 年了，Python 社區(qū)卻依然在使用 Python 2.7。而 JS 社區(qū)正好相反，把還沒有實(shí)現(xiàn)的語言特性都用到生成環(huán)境中了！
●本文編號(hào)1976，以后想閱讀這篇文章直接輸入1976即可。
●本文分類“前端”，搜索分類名可以獲得相關(guān)文章。
●輸入m可以獲取到文章目錄
聯(lián)系客服
