在2016年如何學習JavaScript？
作者：Vincent O
譯者：相信有不少人已經讀過在 2016 年學 JavaScript 是一種什麼樣的體驗？這篇神文，那麼假如你真的要在2016年開始學習JavaScript，你應該怎麼辦呢？
下面介紹的是我這一年來學習JavaScript的經曆。我當初給自己定下的目标是通過學習能夠找到一份以JS開發為主的工作。
首先我得承認我自己的經曆并不像我接下來描述的這麼一帆風順，之是以這麼寫隻是為了讓你少走一些彎路。最近被好多人要求了分享成長經驗，我才寫下了這篇文章。（我現在是一名在 英國天空廣播公司供職的JS開發者）
在我剛入門的時候要是能有一份指南為我指明相關的資訊和資料就再好不過了。而最難的部分其實是徘徊在中等水準的時候。JS相關的進階和入門的資料都特别多，而中級的資料卻很難找到，在文章裡我會把我當時的解決辦法介紹給大家。
在正文開始之前我還是要強調一下，我并不是什麼大神，我自己也處于學習的階段。在程式設計這個領域沒有人是最棒的，假若你真的愛它，就應該保持不斷地學習和進步。
1.
在開始學習JS之前，一定不要帶着先入為主的觀念，也不要打算沿用你在其他程式設計語言上習得的經驗。
我自己并沒有很豐富的程式設計經驗。在這之前我很長一段時間都是隻會用WordPress做網站的碼農。是以我隻了解一點點PHP/CSS/HTML5的知識。但有些打算學習JavaScript的同學可能經驗比較豐富，他們總會試着把對其他程式設計語言的了解套用在JS上。而這麼做就很難利用起JS真正強大擅長的地方。
2.
現在來開始學習點基礎知識吧，我們采用互動式學習的方法。（當然如果你經驗豐富也可以直接跳過，讀讀JavaScript語言精粹，不過這對于剛剛上手的人來說确實不太友好）。我當時也嘗試了一些線上的互動式課程：Codecademy
線上互動式課程就是允許你在浏覽器裡打開一個代碼編輯器，通過完成一個個的小任務來到達下一關。
你可以在這兒學到很多的基礎知識，不過更重要的是你可以直接上手實踐編寫代碼并運作檢視結果。學習程式設計正是“紙上得來終覺淺，絕知此事要躬行”。（閱讀書籍和教程當然是必不可少的，但真正想要掌握程式設計必須動手實踐）
另外值得一提的是很多人向我推薦的Freecodecamp。這也是線上互動式學習的典範，并且它也有學習社群，對我的幫助很大。
3.
Kyle Simpson 撰寫的《你不知道的JS》系列對學習了解JS的作用真的非常大。整套書你都可以在Github上免費看到。開源這套書讓社群能夠參與其中。目前為止已經有了102名貢獻者，253個解決的issues，本書的内容品質也越來越有保障。
因為我經常會讀它是以購買了本書的紙質版。也謹表我對Kyle的支援。
你最好從Up & Going開始閱讀這個系列。這本書最棒的一點就是裡面提到的所有内容都會有詳細的解釋。而不是簡單粗暴地告訴你該怎麼寫怎麼做。每個主題都有非常深入的講解。讀完之後也能給你一種透徹掌握知識的自信。
整套書會介紹JS的變量/類型，對象，數組，函數，内置方法，強制多态，Truthy & Falsy（JS邏輯值）等等……
《你不知道的JS》也有更複雜的部分，讓你深入了解JS的全部，尤其是“The Tough Parts”部分的内容。
4.
之後你可以再讀讀《你不知道的JS》中的作用域&閉包部分。
就像我之前強調過的，在讀書的同時，上手實踐也非常重要，作者也在書中給了許多實踐的例子。
我當時使用了JsBin這個線上寫代碼的網站。網站界面分為HTML, CSS, JavaScript, Console and Output五個面闆。我給出的連結可以隻打開JS和控制台面闆。
這樣你就能直接在浏覽器裡編碼并檢視運作的結果。
5.
現在你已經掌握了很多知識，也有了些實踐經驗。我當時自己試着開始參與到JavaScript的社群中。注冊了Twitter和Github.
我在Twitter上關注了一些比較有影響力的JS開發者，部落格，新聞站點: @getify, @BrendanEich, @holtbt, @jhusain, @andrestaltz, @drboolean 當然你要是願意也可以關注我 @cmdv
Github是閱覽代碼示例、擁有無數天才創造的工具/架構/類庫的絕佳所在。你同樣也可以在上面分享你的項目或與他人合作。不管你是用什麼什麼語言，開源對整個程式設計圈都意義非凡。有些人可能不這麼想，但我十分樂意分享我的知識，與他人合作做出一些貢獻。
6.
到了這裡我大概就達到了我在文章開頭提到的中級階段了。我有一種已經掌握了基礎但就此止步不前的感覺。
這也正是各式各樣的架構層出不窮的時候，各種炒作，說他們的架構有多好用多強大。那個時候Angular看起來很不錯，也有很強大的社群支援。通過運用這些架構我也真的能開發出來點東西了，我當時也嘗試過Ampersand.js（Ampersand.js是一個所謂去架構化的架構，其實就是把架構的各個功能拆分成獨立子產品，在使用的時候你可以隻載入自己需要的部分）
選擇學習架構是我對生命的嚴重浪費。并不是說這些架構爛，而是因為JS的架構日新月異，層出不窮，你很難選到對的那個。然後我才意識到，我的目标應該是學習了解這些架構背後到底是怎麼運作的。據我所知，從長遠來講，學習掌握深入的原生JS要比你把所有精力都投入到架構裡更有前途。
這段時間裡我有很深的挫敗感，變得焦躁不安，達不到我想要的目标。我開始看一些有關失敗的心靈雞湯。在你學習JS這種充滿無限可能的語言時，你就要做好面對無數選擇的準備。眼光放長遠一些，一定不要放棄。（我知道這是說起來容易，做起來難）
7.
你需要記住這個階段，現在你已經通過閱讀《你不知道的JS》掌握了一些技巧，也有了一些實踐經驗。接下來學什麼呢？我自己當時開始看一些視訊教程。
《你不知道的JS》的作者Kyle Simpson同樣也在Frontendmasters.com上提供了很多JS相關的教程。尤其推薦Advanced JavaScript，你也可以在Pluralsight找到這個教程。
當然你也可以找到一些免費的學習資料，比如繼續閱讀《你不知道的JS》系列，但是看一個人對你講授并帶你過一遍代碼對消化知識确實很有幫助。Frontendmasters的視訊教程比較棒的一點是它鼓勵你在觀看同時也自己動手寫一些代碼。要是中途遇到困難也可以倒回反複觀看。
你需要明确的一點是那些有豐富經驗和知識的人教授這些課程制作視訊都需要相當的付出。為這些知識和勞動付費也是理所應當的。
Advanced JavaScript這一套視訊教程涵蓋了《你不知道的JS》之前提到的兩本以及This & Object Prototypes的内容。看視訊的同時你也可以翻翻書。This & Object Prototypes這本書提供的内容非常實用。例如對象連接配接模式OLOO(objects linking to other objects).這就是我之前提到的JS所獨有的特性，而不是像其他語言中使用Class。當然，這裡也有一篇關于ES6 Class的介紹。不過要知道人們對Class的應用也一直争論不休，這并不是唯一的方法，全看個人選擇。
8.
Eric Elliott 在Github有一個很棒的收集清單Essential JavaScript Links.我推薦你去看看，因為裡面收集的内容确實非常棒。這裡面同樣包括新聞站點、Twitter、視訊等内容，我從這裡面摘出了一些符合你現階段所需了解的内容：
- The Two Pillars of JavaScript Part 1: Prototypal OO
- The Two Pillars of JavaScript Part 2: Functional Programming
現在我們開始結合線上視訊學習了解更深入的内容，這也正是我度過中級階段的方法。
Eric Elliott總是提供相當多非常棒的内容，包括原創和分享他人的。（譯者之前也翻譯過Eric Elliott的文章）
這個階段的我對函數式程式設計特别感興趣，而事實上我都沒意識到自己當時學的就是函數式程式設計。函數式程式設計聽起來可能有些太深奧了，可随着你的深入了解，你會發現它其實是非常實用的。不過你要是真的不感興趣，也有别的學習方向可以選擇。
來自Jafar Husain在http://egghead.io上的教程Asynchronous Programming: The End of The Loop是對函數式程式設計更底層的一個介紹。不過首先還是讓我們了解些别的内容再回來深入這個主題吧。
9.
也許你還不了解，或者你可能多少注意到了。大多數的JS類庫、插件、架構都在一個叫做NPM的包管理軟體上（譯者：是是是，我知道最近有一個叫Yarn的包管理器火了，不過還是不展開講以免混淆視聽），這就好像Ruby有Gems，PHP有Composer一樣。想要使用NPM你必須先安裝一個叫做NodeJS的東西：
Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運作環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生态系統。——Node.js中文網
通過Node你可以在伺服器端運作JS，這又給了JS無限的可能。
如果你想進一步了解Node，這裡有兩個不錯的付費教程： Plurasight + Frontendmasters.
- Node.js 教程
- NodeSchool
10.
這個階段你應該已經可以很熟練的運用原生JS開發應用了。我之前确實說過我刻意避開了架構，但并不代表架構不是一種好的東西。是以我開始試着了解有關架構的知識。
我随後了解到React成為了最火的架構，它并不是一個功能全面的架構，隻是解決了應用視圖的部分。
它提供了很多有價值的解決方案，例如子產品化元件如何處理狀态（大概講就是用一個全局的state通過props傳入應用）。你并不局限于隻用React，你可以用任何方式處理你的資料層、後端、API……
同樣的你也可以通過一些很棒的視訊教程來學習React：
最開始我在ReactWeek參加了一個為期5天的課程。但其間遇到了很多問題和困難。Ryan在FrontendMasters提供了一個更簡明的教程。
- React 入門執行個體教程
- React 教程
11.
現在開始你可以選擇繼續鞏固或者學習新的知識了。我本人對函數式程式設計比較感興趣，是以學習了一個由Matt Podwysocki開發叫做RxJS的Reactive程式設計的解決方案。
我之前也參加了一個Rx.js的教程，另外在Egghead.io上也有許多RxJS的相關教程。
同樣你也可以在gitter上參與RxJS的讨論，直接用Github賬号登入就可以。
- 使用 RxJS 實作 JavaScript 的 Reactive 程式設計
- RxJs 介紹
- RxJS入門
12.
這篇文章到這裡差不多就要結束了。因為在這個階段你已經可以自由選擇自己想要發展的方向了。
在這裡推薦一本非常棒的講解函數式程式設計的書Mostly Adequate Guide，作者是Brian Lonsdorf，他同樣在這裡提供了相關的教程。
函數式程式設計是一個非常有趣的主題，我想我肯定要在這個上面花費相當一段時間，而且可能永遠都學不完。
André Staltz 建立了一個很有趣的叫做Cycle.js的項目，它結合了函數式程式設計和RxJS。雖然我對它的了解還不深，但假如你喜歡React的話，學習它也是相當不錯的一個選擇。