没有天生的高手,更没有永远的菜鸟求知若饥, 虚心若愚

前端框架多?学不动?


原文 https://juejin.im/post/5d799e7f6fb9a06aeb10e99d

在纷繁缭乱的表象背后,隐藏着简单的规律。实际上,市面上所有前端框架都在解决两个大问题:组件化和模块化

共同问题一:如何实现组件化
组件化有两个好处:

功能封装
跨项目复用
所有框架,无论用什么语言来时间,都有一些基本的问题需要解决:

如何设计组件的生命周期?
如你所知,前端的特点是带有 UI 界面,是需要跟用户直接交互的东西。 因此,你必须为这些 UI 组件设计完善的生命周期,从远古的 Java Swing,到 QT,一直到 jQueryUI、Angular、React,大家都设计了自己的生命周期机制。虽然技术细节有差异,但是基本的结构是类似的,都需要经历几个基本的阶段:初始化、渲染、存活期、销毁。 请注意,所有 UI 组件几乎都是这样设计的,怎么样,还需要去强记那些内容吗?

组件之间如何通讯?
OK,无论什么 UI 框架,有了 UI 组件之后,紧接着就需要解决组件通讯的问题: 你只要能解决以下3种情况就能解决大部分问题了:父子见如何通讯?兄弟间如何通讯?远房亲戚之间如何通讯? 无论哪种框架,典型的解决方案有3种:父子之间通过事件或者直接调用进行通讯;兄弟、远房亲戚之间利用事件总线进行通讯;利用 cookie、localstorage、甚至服务端 Session 进行通讯。

如何管理组件的状态?
UI 组件不仅仅有外观,外观只是一张画皮。里面要有数据才行,既然有数据,就有状态管理的问题。 在状态管理这块,需要仔细设计这些问题:是否需要双向绑定?如何配合路由保持组件状态?

组件样式怎么做?
因为是前端框架, 所以没关的问题也不能放松。所幸的是,在移动互联网时代,用户都已经习惯了"扁平化"、"极简主义"这些设计风格,我们可以利用市面上现有的 css 样式库来给我们的组件"化妆"

共同问题二:如何实现模块化
如你所知,在 Java 里面,我们有完善的 Class/Package/Jar/ClassLoader 这些机制的支持。当 JVM 发现所需要的.class 文件没有加载的时候,它自己会使用 ClassLoader 去加载,不需要程序员自己操心。

但是在 JS 里面不行,由于 JavaScript 这门语言本身的缺陷,它没有提供完善的模块化支持,这就导致了所有前端框架必须自己解决自己解决模块化的问题。

但是,值得庆幸的是,我们有了 NodeJS,有了 Webpack,再也不用像前几年那样自己搞 RequireJS 了!这就是为什么市面上主流的前端框架都用 Webpack 来做自己的 CLI 的原因。

总结:无论你目前在使用什么前端框架,无论你以后想学哪些前端框架,只要紧紧扣住"组件化"和"模块化"这两条主线,就不会迷失在技术细节里面。

文章评论已关闭!