2016年學習JavaScript是怎樣的一種體驗（轉）

轉自：http://www.zcfy.cc/article/how-it-feels-to-learn-javascript-in-2016-hacker-noon-1871.html

在這篇文章的寫做過程當中沒有JavaScript框架被建立出來。

下面這篇文章是受Circle CI的《這就是將來》激發而寫的。你能夠在這裏讀到原始版本。這篇文章只是表明一種觀點，就像任何JavaScript框架同樣，沒必要嚴肅對待。

嗨，我最近得到了一個web項目，可是說實話，我已經有幾年沒有寫web代碼了，並且我也據說web領域發生了一些變化。你算是最跟得上時代潮流的web開發者了，對吧？

-確切的說應該是前端工程師，可是是的，你算是找對人了。2016年我作web開發，可視化、音樂播放器、踢足球的無人機，你隨便問，來者不拒。我剛剛參加完JS大會和React大會，因此我知道構建web應用的最新技術。

牛掰啊。我須要建立一個展現用戶最近活動的頁面，因此我須要從RESTful API獲取數據，而後在可過濾的表格上展現出來。我在想是否是能夠用jQuery來獲取並展現數據？

-Word天吶，不能夠，如今已經沒有人用jQuery了。你應該學習下React，如今但是2016年了啊。

額，好吧。React是什麼呢？

-它是一個Facebook出品的超級酷炫的庫，它容許你很是簡單地操控視圖的變化，而且能使你的應用具備可控性和高性能。

聽起來不錯哦。那我能夠用React展示從服務器上獲取的數據麼？

-必須的，可是首先你須要在你的頁面上添加React庫和React DOM庫。

哎，等會兒，怎麼是兩個庫呢？

-是這樣的，一個庫是我剛說的那個，另外一個庫是用來操做JSX寫的DOM的。

JSX？JSX是個啥玩意？

-JSX是JavaScript的語法擴展，看起來特別像XML。它是另外一種寫DOM的方式，你能夠認爲它是一種更好的寫HTML的方式。

HTML有什麼問題麼？

-如今是2016年了好嘛。已經木有人直接寫HTML了。

好吧，無論怎麼樣，若是我添加了這兩個庫我是否是就可使用React了？

-不徹底是。你須要添加Babel，而後你就能夠用React了。

另外一個庫？Babel是嘛玩意？

-哦，Babel是個轉義工具，能夠將任意版本的JavaScript轉義成特定版本的JavaScript。使用React並非必須用Babel，可是若是你不用Babel的話，你就只能用ES5了。現實點吧哥們，如今但是2016年了啊，你應該像其餘牛掰的同窗那樣用ES2016+來碼代碼。

ES5？ES2016+？我又蒙了。ES5和ES2016+又是什麼鬼？

-ES5就是ECMAScript 5。大部分人都會用ES5，由於如今大部分瀏覽器都支持ES5。

ECMAScript？

-是的，你知道的，JavaScript是1995誕生的，ECMAScript是在1999年制定出來的JavaScript標準，那會兒JavaScript還叫Livescript，並且只能跑在網景瀏覽器裏面。那會兒很是混亂，可是如今好了，並且有7個版本的JavaScript。

我了個去，7個版本。那ES5和ES2016+是啥？

-分別是第五版和第七版。

等會兒，第六版擱哪了，不是要雨露均沾？

-你是說ES6？我是說，每個版本是前一個版本的超集，因此若是你正在使用ES2016+，那麼你就可使用以前版本的全部特性。

哦，這樣啊。那爲啥不用ES2016+而是用ES6呢？

-哦，你能夠用ES6，可是爲了使用一些像async和await這樣炫酷十足的特性，你就得用ES2016+了。不然，你就只能用ES6的generator來控制異步流程了。

我真心不懂你剛剛說了什麼，這名字都把我搞暈了。是這樣的，我就是想從服務器上獲取數據，我以前是從CDN引入jQuery，而後使用AJAX來獲取數據，爲啥我如今不能這樣作了呢？

-大哥，這都2016年了好伐，沒有人再用jQuery了。每一個人都知道，使用jQuery的最終下場就是碼出一堆意大利麪條同樣的代碼。

哦，那我如今就須要加載三個庫來獲取數據並用HTML表格來展示。

-恩，你須要把這三個庫引進來，而後用模塊管理器把它們打包成一個文件。

好吧，那什麼是模塊管理器呢？

-具體的定義是依賴於環境的，可是在web開發中通常意味着支持AMD或者CommonJS模塊的東西。

好吧。。。AMD和CommonJS又是個啥玩意？

-有多種方式來描述多個JavaScript庫和類之間如何交互。你知道exports和require不？你能夠寫多個定義AMD或者COmmonJS API的JavaScript文件，而後使用像Browserify同樣的東西來打包。

好吧，聽起來好像頗有道理的樣子。那Browserify是什麼呢？

-它是一個工具，容許你將符合CommonJS的依賴打包成能夠運行在瀏覽器中的文件，它之因此會誕生，是由於大多數開發者都把依賴放到npm倉庫中。

npm倉庫？

-它是一個龐大的公共倉庫，開發者把代碼和依賴做爲模塊放到這裏。

就像CDN同樣？

-不太準確。它更像是一個集中式的數據庫，在這裏任何人均可以發佈、下載倉庫，你能夠用來本地開發，若是你想的話也能夠把它們上傳到CDN上。

哦，就像Bower同樣！哈哈，終於遇到我會的了~~

-恩，是的，可是如今可都是2016年了，已經木有人使用Bower了。

哦，我懂了。。。因此我須要從npm上面下載那些庫咯？

-恩，是的。舉個栗子，若是你要使用React，你就下載React模塊，而後把它導入到你的代碼中。幾乎每個流行的JavaScript庫均可以這樣作。

哦，就像Angular同樣！

-Angular已是2015年的了。可是，你說的挺對的。Angular依舊堅挺着，可是並肩的還有VueJS、RxJS和其餘炫酷十足的庫。你想學不？

咱們仍是接着用React吧，我如今已經學了太多的東西了。因此，若是我要用React的話，我就得用npm安裝React，而後使用 Browserify ？

-恩，是的。

獲取一堆依賴，而後把它們打包，這貌似有點複雜啊。

-是的，這就是咱們爲何使用Grunt、GUlp或者Broccoli來自動化運行Browserify的緣由。哦，見鬼，你如今甚至能夠用Mimosa了。

Grunt？Gulp？Broccoli？Mimosa？咱們到底在討論什麼鬼東西？

-任務管理器呀。可是它們已經不像以前那麼炫酷了。咱們在2015年使用那些東西，而後咱們使用Makefiles，可是如今咱們用Webpack來打包全部東西。

Makefiles？我覺得那隻用在C或C++項目裏。

-是的，可是在web開發中，咱們喜歡先把事情搞複雜，而後再回歸本源。咱們每一年都是這麼作的，你就等着吧，一年或者兩年內咱們都能在web裏寫彙編了。

哎，你剛說到了什麼Webpack東東？

-它是另外一個瀏覽器模塊管理器，也是一個任務管理器。它就像一個更牛的Browserify。

哦，好吧，那它牛在哪裏呢？

-恩，也許不是很牛，他只是告訴你如何更好的綁定你的依賴。Webpack容許你使用不一樣的模塊管理器，不只僅是CommonJS，ES6支持的模塊均可以。

我都已經徹底被CommonJS/ES6搞糊塗了。

-你們都被搞糊塗了，可是伴隨着SystemJS，那些東西你都不用關心了。

Word天吶，又一個什麼JS。SystemJS又是什麼？

-恩，不像Browserify和Webpack 1.x版本，SystemJS是一個動態模塊加載器，它容許你把多個模塊打包成多個文件，而不是打包成一個文件。

等會兒，我原覺得咱們要把咱們的庫打包成一個大文件，而後加載就好了！

-是的，可是由於HTTP/2立刻就要來了，多個HTTP請求其實更好。

等會兒，因此爲了使用React咱們不能僅僅添加三個庫？

-是的。我是說，你能夠把它們當作腳本從CDN引進來，可是你依然須要引入Babel。

哎，這樣就好了嗎？

-是的，你須要引入整個babel-core，並且不該該用於生產環境。發佈到生產環境以前，你須要運行一些任務來確保你的項目一切正常，就像把召喚撒旦的儀式整成一個煎蛋配方同樣。你須要壓縮、混淆、樣式內聯、延遲加載腳本。

我懂了，我懂了。若是我不能直接從CDN中引入這些庫，那我該這麼作？

-我會使用使用Webpack、SystemJS和Babel來轉義Typescript。

Typescript？我原覺得咱們是用JavaScript在碼代碼！

-Typescript也是JavaScript，或者更好的一種說法是，Typescript是JavaScript的超集，是基於ES6的更屌的JavaScript。你還記得吧，就是咱們剛纔講到的第六版。

我覺得ES2016+已是ES6的一個超集了！爲何咱們如今使用的這個東東叫Typescript？

-哦，由於它容許咱們像使用類型化語言同樣使用JavaScript，而且可以減小運行時錯誤。2016年了，你應該在你的JavaScript代碼中增長些類型。

Typescript很明顯作到了這些。

-Flow也作到了這些，儘管它只是作輸入檢測，而做爲JavaScript的超集，它須要編譯。

額，Flow是。。。？

-它是一個靜態類型檢查器，也是Facebook出品的。它是用OCaml寫的，由於函數式編程炫酷得不要不要的。

OCaml？函數式編程？

_-年輕人，如今牛逼的程序員都會用的，你要知道，如今但是2016年了。函數式編程？高階函數？柯里化？純函數？

我不知道你在說啥。

-剛開始誰都會這樣的。你只要知道函數式編程比面向對象編程（OOP）更屌就好了，2016年咱們就都應該用函數式編程。

等下，我在大學學過面向對象編程，我以爲挺好啊。

-Java在被Oracle買下以前也挺不錯的啊。個人意思是說，面向對象編程在過去是挺好，而且在如今也仍然有它的用武之地，可是如今你們正意識到修改狀態是很難的，因此如今你們都趨向於使用不可變對象和函數式編程。haskell那夥人已經整了好多年了，-就不說Eml那幫人了-可是幸運的是，在web開發中咱們可使用像Ramda這樣的庫來實現純JavaScript進行函數式編程了。

爲了討論方便，你剛纔是否是又提到了幾個名詞？Ramnda是個什麼東西？

-不是Ramnda。就像Lambda。你不知道嗎，David Chambers的那個庫？

David誰？

-David Chambers。一個很酷的傢伙，想要完全顛覆 JavaScript 編程方式。Ramda的貢獻者之一。若是你想學習函數式編程的話，你應該瞭解下Erik Meijer。

Erik Meijer是何方神聖？

-也是函數式編程一哥們兒，很牛。他在一堆演講裏面批評了Agile。你也應該看看下面這些人的東西：Tj，Jash Kenas，Sindre Sorhus，Paul Irish，Addy Osmani。-

好吧。如今我必須打斷你了。全部這一切都很好，可是我只是要獲取數據並展示出來，這些東西一會兒就搞複雜了，並且是沒必要要的。我很肯定，我沒有必要爲了建立一個動態數據表格而去了解這些人，或者學習這些東西。讓我回到React。我怎麼才能用React從服務器獲取數據呢？

-是這樣的，你不能用React來獲取數據，你只能用React來展現數據。

我了個去。那你用什麼來獲取數據？

-你可使用Fetch從服務器上fetch(獲取)數據。

啥？你用Fetch來fetch(獲取)數據？起名兒的這位是否是沒上學啊。

-恩，我也知道。Fetch是服務器完成XHR請求的本地實現。

哦，那就是AJAX。

-AJAX只是使用XHR。可是Fetch容許你使用promise來實現ajax請求，這樣的話你就能夠擺脫回調地獄了。

回調地獄是什麼毛線？

-是這樣的。每次你完成一個異步請求，你就須要等待服務器的響應，這樣的話你就會在一個函數裏面增長一個函數，這就叫作回調金字塔，也就是回調地獄。

哦，好吧。Promise能夠解決這個問題？

-必須的。經過promise來寫回調，你能夠寫出更優雅更容易理解的代碼，你能夠去模擬數據並測試代碼，你也能夠同時發起多個請求並等待它們所有加載完成。

這些均可以用Fetch來實現？

-是的，可是前提是用戶使用了徹底兼容的常青瀏覽器(evergreen browser)，不然你須要引入一個Fetch polyfill或者使用Request、Bluebird或Axios。

我須要知道多少個庫？到底有多少個庫啊？

-這就是JavaScript。有成千上萬個庫能夠實現一樣的事情。實際上，咱們知道js庫，咱們也擁有最好的js庫。咱們的庫很龐大，有時候咱們也會引入Guy Fieri的字符畫。

你剛剛說到了Guy Fieri？咱們不說他了。Bluebird、Request和Axios庫是用來幹什麼？

-這些庫用來操做XHR，而後返回promise。

jQuery的AJAX方法也能夠返回promise了吧？

-2016年咱們再也不使用jQuery了。就用Fetch，若是瀏覽器沒有的話就添加個polyfill，或者用Bluebird、Request、Axios代替均可以。而後在async函數裏使用await來管理promise，這樣你就能夠很好的控制整個流了。

這是你第三次提到await了，可是我還不知道它是個啥。

-Await容許你攔截一個異步回調，這樣當獲取到數據的時候你就能夠更好的去控制，而且代碼也會具備更好的可讀性。這很酷，而你只須要在Babel裏設置stage-3配置，或者使用syntax-async-functions插件和transform-async-to-generator插件。

瘋了吧。

-沒有，我來告訴你什麼纔是瘋：想用await你須要先預編譯Typescript代碼，而後用Babel來轉義。

啥？Typescript不包含await？

-下個版本就會包含了，可是1.7版本只是針對ES6，因此若是你想在瀏覽器裏使用await，首先你須要把Typescript代碼預編譯成ES6，而後再用Babel轉義成ES5。

如今我已經無語了。

-其實很簡單的。用Typescript來寫代碼。全部使用Fetch的模塊編譯成ES6，而後設置Babel的stage-3的配置，再用SystemJS來加載。若是你沒有Fetch，就添加個polyfill，或者使用Bluebird、Request、Axios，使用await來處理全部的promise。

咱們對於簡單的定義不同。好了，有了那個東東我最終獲取了數據，如今我能夠用React來展現數據了吧？

-你的應用須要處理狀態變化嗎？

額，不須要吧。我只是要展現數據。

-哦，謝天謝地。不然我就必須向你解釋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？

不是。

-恩，已經沒人喜歡Coffeescript語法了。Jade？

不是，你已經說過Jade了。

-我是說Pug。我個人意思是說Jade。個人意思是，Jade如今的名字是Pug。

哎，不是。我想不起來了。你用哪一個？

-我可能只用ES6原生模板字符串。

讓我猜下。這個須要ES6。

-是的。

爲了適應不一樣的瀏覽器，得使用Babel轉義。

-是的。

若是我不想添加整個核心庫，我須要使用npm來做爲模塊加載。

-是的。

須要Browserify或者Wepback，或者相似SystemJS的東西。

-是的。

若是不用Webpack，最好使用一個任務管理器。

-是的。

可是，由於我應該使用函數式編程和類型化語言，因此我須要預編譯Typescript或者添加一個Flow。

-是的。

而後，若是我想使用await的話，還必須使用Babel。

-是的。

這樣我就可使用Fetch、promise、控制流和各類吊炸天的東西。

-別忘了，若是不支持Fetch的話，給Fetch添加一個polyfill，Sarafi就不支持。

行了，我以爲咱們就說到這吧。實際上，我以爲我也就這樣了，我是作不了web開發了，我是寫不了JavaScript了。

-沒事，再過幾年，咱們會用Elm或者WebAssembly來寫代碼。

我想回去作後端。我受不了這麼多的變化、版本、編譯器和轉義工具。JavaScript社區若是認爲有人能跟上這種節奏，那這社區必定是瘋了。

-我明白了。你應該去Python社區。

爲何？

-據說過Python3嗎？

更新：感謝指出排版和其餘錯誤，我會持續更新這篇文章。討論區請移步 HackerNews 和Reddit。

版權聲明

本譯文僅用於學習、研究和交流目的，歡迎非商業轉載。轉載請註明出處、譯者和衆成翻譯的完整連接。要獲取包含以上信息的本文Markdown源文本，請點擊這裏。

 感謝幫助咱們改進翻譯質量