看了大家的回答,感觉很多人都没说到点子上

大概大家对如何有效的掌握一门新的框架也是一头雾水吧

为了给题主解惑,以及各位如此耐心回答问题的朋友提供一个学习思路,所以我决定要抖点干货。

主题就是《如何快速掌握一种框架》,方法适用于目前所有的流行框架

最近前端比较流行的几类框架,包括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相比,只是同样的功能,换了一种语法而已。语法永远都是没有学习障碍的,记住:只要是语法的问题,都不是问题

最后分享一点小干货,多种方式实现拖拽

看懂了此例子将会对你学习进步的帮助非常大

Logo

前往低代码交流专区

更多推荐