《如何快速掌握一种框架》送给初学框架者

这篇文章是我在慕课网看到的，我遇到了和提问者一样的问题，我学习CSS+DIV 学习了二个月后，同事叫我用框架，我开始用的bootstrap 做了一个响应式网站，我开始以为bootstrap就是前端框架，后来发现前端三大框架angularjs  vuejs  react并不包括bootstrap,才知道学了一个月的bootstrap 只是相当于vant这样的组件库，响应式布局CSS的组件库这是我自己的定义。比较了一下三大框架 ，我选择了VUEJS，因为我现在用的开发工具Hbuilder-x 推荐的VUEJS，代码提示功能很强大。下面是转载的干货，感觉对我很有用，我安装

最近开始自学Vue.js2.0，无奈看到官方文档的进阶部分之后就看的很吃力了，文档中讲得很多术语和名词都无法理解。总觉得自己在学习过程中肯定缺少了前端技能树上的某些知识（知识链断裂）。

我发现在学习各种前端框架的时候都不可避免的接触到了ECMAScript2015，bable，webpack，我现在大致知道这些东西起什么作用，但是不知道除了学习这些以外还需要学习什么，或者明白什么概念？（比如说前端模块化这个概念是不是需要去学一学CommonJS或者sea.js这些东西？）

如果从STAR面试法则上来看的话，这些技术的场景，要解决的问题是什么，如何去解决的，解决完之后的结果（带来的好处）是什么？

另外我们平时在学校以及各种书籍上学的js是哪个版本的ECMAScript？我们该如何从这个版本的ECMAScript过渡到ECMAScript2015？

看了大家的回答，感觉很多人都没说到点子上
大概大家对如何有效的掌握一门新的框架也是一头雾水吧
为了给题主解惑，以及各位如此耐心回答问题的朋友提供一个学习思路，所以我决定要抖点干货。
主题就是《如何快速掌握一种框架》，方法适用于目前所有的流行框架

最近前端比较流行的几类框架，包括Vue，weex，react, react native, 以及小程序
他们有一个共性，就是，组件化的思维非常非常非常重要

组件如何创建？
在组件中，数据如何传递？
组件与组件之间如何交互？
如何合理的划分与组合组件？
这些问题你搞明白了，你就会发现，其实掌握一个框架，还是没有想象中那么难的。

我并不愿意一上来就说别人基础不好，其实大多数所谓的基础不好，只不过是有的知识没记住嘛。
但是有一个基础，那一定是要牢牢的刻在脑子里的，那就是题主自己提到的模块化思维。

因为组件是基于模块化思维的。

而关于模块化，这几年就有好多个模块化的规范。
CMD，AMD，commonjs，以及最新的ES6的模块思维。
我们抛开他们的具体原理不谈，单从使用者的角度来说的话，其实道理都是一样的。
所以，只需要掌握其中一种，另外的，也只是语法表现不一样而已。
既然最新的是ES6，那么干脆就建议大家按照ES6的来吧，现在很多文档教程也是基于ES6来写的。
那么总要我们自己去搞明白import，export这些是来干嘛的对吧。
基础语法不多说，耐心花一个小时认真了解一下就基本OK了。

但是想要凭空了解模块化也是没那么容易的。因为模块化，恰恰是基于js的面向对象思维。
啊，这个时候，终于和基础知识扯上关系了。学习面向对象，推荐前面有同学提到的《JavaScript高级编程》

所以你至少需要了解常规的创建对象是怎么玩的，单例模式是怎么玩的，订阅-通知模式是怎么玩的。

订阅-通知模式涉及到数据的管理与组件的交互，因此异常重要，具体实现与重要性可参考redux。

所以我给题主的学习路线建议如下

1. 面向对象，设计模式中的单例模式与订阅-通知模式，这里建议通过ES5的语法进行学习
2. 搞明白为什么要模块化
3. 模块化，这里开始，可以结合ES6的语法来学习ES6的模块化思维，如果你没有ES6的开发环境，就建议通过require.js来学习模块化。     
4. 组件化5. 以及需要支撑这条学习路径的所有基础知识。

尽管这里面涉及到的内容很多，但是当你真正完成此路径之后，你就已经掌握了ECMAScript在使用角度上的核心了。
你将不会畏惧去重新学习任何新的框架

就比如大家都在说小程序入门简单，其实是建立在你的这整套思维都完善的情况下的，否则你仍然只能最多按照官方文档写写小例子，并没有什么卵用

至于解决了什么问题，这个等你把组件化搞清楚再来考虑吧，简单的篇幅还真讲不清楚。 
这里你可以给自己留2个思考题，在模块化思维下，如何实现

1.在一个app中，设置切换皮肤，整个app的皮肤就自动切换了
2.点击了一个组件的按钮，另一个组件的颜色大小都发生指定的变化

另外为了减轻学习压力，我有几条额外的建议

• 做好脱离jquery的思想准备，也就是多数框架的组件化中，我们不再需要获取DOM元素

• 和数据处理有关的方法都要重点关注

• 暂时不要考虑动画与交互如何实现

• 不要被各种语法的变化吓到，比如ES6与ES5相比，只是同样的功能，换了一种语法而已。语法永远都是没有学习障碍的，记住：只要是语法的问题，都不是问题

最后我再此感谢大神的分享