如何從零開始學習一個框架

最近我本人也在學習一些新技術：webpack + vue全家桶。實際上它倆從去年就開始很流行了，今年已經不算新了。但我以前並無在項目中使用。

前端框架更新頻率快如瘋狗，有時候會給咱們前端er帶來心理上的恐慌：艾瑪，又出新框架了，要不要開始學呀！我對此的見解是，知其存在、保持關注、沒必要跟風。因此我到如今纔開始學習vue也不以爲丟人，敢講出來。今天跟你們分享一下，我是如何從零開始學習一個框架的，但願能給你們帶來一點收穫。

平時留意相關新技術

先說一點題外的，對於新技術，我不會立馬跟風去上手，可是會關注一些關於它的動態，好比說新版本發佈啦，有配套框架啦等等。好比vue最近發佈了2.0版本，餓了麼團隊打造出了一套基於vue2.0的UI框架。

保持一個關注便可，這樣等你須要上手的時候，起碼知道目前的大環境是怎樣，哪裏有好的資源。我主要經過微博來獲取這些信息，我關注了不少圈內大牛，基本上業界消息不會遺漏。

搜索中文資料

對於新框架，我仍是習慣先搜一下國內的資料，目的是對框架先有一個總體概覽。這個階段主要是先在腦中造成一幅藍圖，知道這個框架是如何從頭至尾搭建的，有哪些坑須要注意，以及國內的使用者都是如何評價它的。

我不介意用百度，有時候也google中文，總之，能獲得中文參考資料就行，畢竟讀中文要比讀英文快不少。由於這個階段的目的就是快速有一個總體把握。因此通常會搜「教程」「入門」這樣的關鍵字。

這個時候我也不着急動手寫，再進行下一步。

通讀官網文檔

官方文檔是必定要讀的，不然你不知道遺漏了什麼重要東西，也不知道國內的做者是否是寫錯了什麼。這是原汁原味的一手資料，官方文檔通常都會分guide和api兩類。guide是引導你從頭開始一步步使用框架的主要功能，api則是全部功能的一個彙總文檔。

guide必定是通讀，從how to install開始，不要嫌麻煩。緣由很簡單，你要知道如何「標準」的使用框架。在上一步搜到的中文資料中，可能有一些做者對框架的理解有出入，寫的demo代碼不是官方推薦的寫法，若是你直接copy走，那就永遠沒法知道使用框架的正確姿式，原做者哭暈在廁所了。

api的話，文檔量通常會不少，大概掃一掃就行，等使用的時候具體查閱。

動手搭建小項目

對民間的教程以及官方的文檔瞭然於胸以後，就能夠開始動手搭建一個小項目了，或者是小demo（看具體框架）。

若是官方的guide說的比較具體，我會參照官方的步驟來。或者此時再動手找一些資料，參照別人的操做步驟來，有一些質量高的文章會解釋的很清楚，比官方的全。

說到高質量的資料，就不得不看一些英文的了。咱們最熟悉的兩個國外網站應該是github和stackoverflow了。對照谷歌翻譯，閱讀上面的文章仍是沒什麼壓力的。若是有，那就逐字翻譯...

告訴你們一個祕密，github上不光只是代碼倉庫，還有不少資源收集類型的項目，想必有些同窗是看過的。後來這些項目搞了一個不成文的規矩，統一都叫awesome-xxx，好比awesome-vue、awesome-webpack、awesome-react等等，上面的資料又全又質量。你要搜任何框架的資源，均可以在github上搜awesome加它的名字。

至於搭建什麼樣的小項目，我通常是把公司的項目抽出一個小模塊來，做爲一個單獨項目來實踐新框架。這樣最省事，並且之後這個新框架說不定還能借機上位。

去QQ羣、論壇吧

實踐新框架的過程當中，不免會遇到一些問題，須要請教有經驗的大牛。這個時候能夠找一些QQ羣，好比vue交流羣之類的「專科醫院"，或者能夠找相應的論壇，只不過如今國內沒幾個高質量的前端論壇，其實我通常也不去。能在QQ羣找到答案固然是好的，若是沒有的話，本身用google各類搜吧，或者是在github上的issue裏面找關鍵字，據個人經驗，總能找到解決辦法。

實在不行，就找個大牛的博客，給他留言吧。或者，關注個人微信公衆號：doctor_programmer，給我留言。（心裏戲：瓜熟蒂落的就打廣告了，厲害）

視頻教程有必要看嗎？

有些同窗是喜歡看視頻教程的，手把手嘛，更容易理解。可是缺點就是看視頻耗時太長了，而你的時間也有限，畢竟不是念書的時候了。

我我的的話，除了剛開始學編程的時候看過馬士兵的java教程，後來就基本沒看過視頻了。除了學cocos2d-js的時候，緣由是遊戲開發這塊沒怎麼涉及過，這個框架又太複雜，我本身都無法寫出個hello world，官方文檔那叫一個爛啊。只得跟着視頻一步步來。

因此個人建議就是，若是你對學的框架一無所知，並且沒法下手，能夠看視頻教程。其餘的話，能看文檔解決的就儘可能節省時間吧。

談談看源碼

有些同窗會以爲看了源碼就很厲害的趕腳，因此火燒眉毛想看框架的源碼。這個我是不反對的，閱讀源碼確實能學到不少知識，關於框架的，以及框架以外的js技巧。

可是我本人來說，看的源碼並很少，主要仍是時間精力分配問題。比如是你買了一輛車，剛開始確定是先開，熟悉車的各類性能和功能。然後出問題了或者是想深刻研究了，再拆。因此我通常是用過一段時間後纔看源碼，這「一段時間」多是兩個月，也多是半年。

我看源碼也不是通讀，通常是帶着疑問看的，好比想看看某個功能是如何實現的，就crtl + f一路搜索關鍵詞。

有時候若是對框架的某個功能感到奇怪，也會去打開源碼看看。好比：用js原生的innerHTML嵌入<script>標籤的時候，裏面的代碼不執行，可是用jquery的html()方法，嵌入的<script>卻能執行。打開源碼才知道，html()方法最終會正則匹配到<script>標籤，並用eval()執行裏面的代碼。

關於新框架的學習，大概就說這麼多吧，讀者有疑問能夠留言討論。