[譯]學習如何去學習 JavaScript - 5 個你應該如何花在學習 JS 上時間的建議

原文地址：Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend your time when learning JavaScript

在現代 JavaScript 巨大的生態系統中遨遊可謂是一項十分艱鉅的任務。且不提衆多能在你的機器或服務器上運行起來的 Node.js 模塊，現在大堆的前端框架、各類模塊打包工具以及成千上萬的工具庫早已使人眼花繚亂。如何才能肯定我要從哪裏開始學起？以及把時間花費在哪些主題上才能避免作無用功？

就我我的而言，學過可是最終卻從未用過的知識不計其數，可是又有一些東西是我想要投入更多時間在上面的。我想用我 7 年職業生涯中得來的深入教訓，來建議你們應該如何學習 JavaScript。

1. 擁抱 JavaScript 異步編程

縱觀 JavaScript 發展史(也能夠說成 web 開發的發展史)，你會發現異步 JavaScript 完全改變了這場遊戲。網站從原來的僅僅在客戶端作靜態頁面展現發展到如今運行在你瀏覽器中的完整應用程序。絕不誇張的說，瀏覽器發起 HTTP 請求，在不用刷新整個頁面的狀況下等待服務器的響應這一行爲改變了整個萬維網。

能夠這麼說，異步編程已成爲 web 開發的根基。這也是你應儘早在 JavaScript 上投入大量時間的一處核心知識點，這其中包含 callbacks、promises、async/await和 fetch 等重要概念。

2. 掌握 TypeScript 基礎

關於要不要把這條建議寫出來，我糾結了差很少有一個小時！由於這是一篇有關如何學習 JavaScript 的博文，而 TypeScript 並非 JavaScript，它是 JavaScript 的一個超集，在使用以前還須要一個 build 的步驟，然而我對 TypeScript 的強烈信仰讓我下決心必需要把它寫在這兒。

這條建議準確的來講更像是一個最佳編程實踐。JavaScript 是一種鬆散的、動態的編程語言。在沒有類型約束和不可變性原則的狀況下，你在傳遞變量和數據對象時很容易寫出具備反作用的脆弱的代碼。TypeScript 經過增長強類型特性和建立只讀屬性的能力(還有不少其餘好用的特性)來減小這一問題的發生。

記住上面說到的，我建議你儘快掌握 TypeScript 基礎，我說的「基礎」是指：如何爲你的變量添加類型註解(type annotations)、類屬性、函數參數、函數返回值。TypeScript 的強大毫不僅僅是學這點兒就夠了，可是這第一步能防止你常常絆本身的腳。每當 TypeScript 編譯器捕獲到個人某個起初沒注意到的錯誤都會令我爲之着迷。

是的，編譯器會常常找你的茬。這是能夠接受的，它是你的朋友，想讓你成爲更棒的程序員。花點時間去思考一下 TypeScript 給出的錯誤信息，我保證你的代碼質量能獲得顯著提高。

3. 理解 JavaScript 框架存在的意義

JavaScript 框架從我 2012 年底進入 web 開發這行就一直存在了。回到那時候，AngularJS 還處於霸主地位，Backbone.js 在業界的地位也很高，Ember 是當時的後起之秀。有趣的是，儘管它們在當今已成爲過去時(幾乎被 React 和 Vue取代)，這些前端框架所解決的問題並無太大區別。好比說：

• view 和controller的數據綁定。 這是最爲重要的一點。各類前端框架保持 UI 視圖與前端應用狀態的同步還是首要任務。不管這些框架的設計是基於 MVC、MVVM 仍是僅僅設計視圖層，它們都有本身綁定狀態到視圖層並保持同步的方式。
• 可複用的組件。 這也是 AngularJS 最突出的一項貢獻。前端視圖基於組件的組合，使用 JS 把模板編譯成 HTML 一樣是 React、Vue 等現代框架的核心理念，都是從 AngularJS 開始興起的。若是沒有現存的前端框架或者說你本身建立一個框架的話，建立動態的、可複用組件基本上不太可能，由於 web 組件的 API 十分有限，且不能處理數據綁定。

若是你仔細看看這些花裏胡哨的扳手，螺絲刀和其餘工具的本質，其螺母和螺栓都是相同的。你看到的是工具的變革和技術的發展，可是若是你理解了 web 開發的核心痛點(爲啥這些工具位居榜首)，你就會站在一個更好的角度去理解和正確的使用任何現存的、將來的或者那些已成爲歷史的框架。

4. 同時學習兩個類似的框架

就好比 React 和 Vue。

在重度使用某個框架時，咱們很容易會把框架的語法和模式當成底層語言的一部分(在這裏能夠說成是 JavaScript 的一部分)。老話兒說的好：「手裏有把錘子，看啥都像釘子」。意思就是說，若是你一直使用某個框架，你就會基於你使用的那個框架固化的去思考你的解決方案，這樣框架就成了你的柺棍而不是前進的動力。

同時掌握或瞭解兩個框架能夠扭轉你的這種思惟方式，同時能給與你對該框架助你解決問題的更深層次的理解。這就像是學習一門外語能幫你更瞭解你的母語同樣。你能看到二者的異同，去思考究竟是什麼樣的語言結構產生了這樣的差別。掌握兩種框架的使用也能達到一樣的效果。同一問題的兩種解決方式有助於追溯到問題的根源。

5. 去揭祕構建過程

最後一條涉及學習原生 JS。無論你喜不喜歡這種方式，寫現代 JavaScript 時可選的工具備太多工具和框架，而將它們緊密鏈接在一塊兒的就是「構建過程」。

在個人職業生涯中，構建工具是變化最大的一個方向。而最大的收穫在於性能的提升以及資源體積的減小。基於 Web 的公司和開源社區都在不斷的嘗試從構建過程當中榨取每個微小的進展，這也造就了突飛猛進的一系列工具和程序。

我不得不認可，理解 Webpack 這種工具着實花費了我很長時間。只需簡單的設置一個配置項，運行一條命令，而後你就有了一個結構優化過、體積壓縮過且適用於瀏覽器運行的代碼文件。構建工具能夠被視做黑魔法，由於全部的相似工具都在力爭向零配置或極少配置方向努力。這對於初學者來講固然是個好事兒，可一旦你想要進行一些自定義配置的時候就會變的很是難。

理解這些工具爲你作了什麼是很是重要的一件事。試着去理解你的代碼以怎樣的順序經歷了怎樣的改變。試着去理解你的模塊是如何被打包的，由此你才能更好的優化它們。試着去理解每個配置項，由於這對你的代碼性能和文件體積有很大的影響。