如何从零开始学习一个框架

最近我本人也在学习一些新技术：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()执行里面的代码。

关于新框架的学习，大概就说这么多吧，读者有疑问能够留言讨论。