前端框架千千万，抓住两条主线成一半

作者：大漠穷秋

百花齐放的前端框架

2007 年的时候我刚毕业，当时最火的前端框架是 jQuery 和 Ext JS，那时候大家纠结的问题是：我到底是用 jQuery 呢还是用 Ext JS 呢？

后来又出现了：Adobe Flex、Microsoft SilverLight、Dojo、Ember、Backbone、RequireJS…一大堆框架。

从 2008 年到现在，大家能在市面上看到的前端框架不下 10 种，真心让人目不暇接。

在这个发展过程中，框架的规模和体积也在不断的增大，最远古的 prototype.js 和 mootools，都只有几千行 JS 代码，压缩之后的体积也只有 10 K 左右。到 2006 年 jQuery 出现的时候，体积已经扩大 10 倍到 100 K 左右，最庞大、最完善的是 Ext JS，目前的 6.x 版本中，光 JS 代码就已经高达 24 万行代码了（含注释）！

Word 天！老子真的学不动了！

朋友，你还是太年轻，这里面实际上并没有你想得辣么复杂，在纷繁缭乱的表象背后，隐藏着简单的规律。实际上，市面上所有前端框架都在解决两个大问题：组件化和模块化。

共同问题一：如何实现组件化

组件化有两个好处：

• 功能封装
• 跨项目复用

所有框架，无论用什么语言来实现，都有一些基本的问题需要解决。

• 如何设计组件的生命周期？

如你所知，前端的特点是带有 UI 界面的，是需要跟用户直接交互的东西。

因此，你必须为这些 UI 组件设计完善的生命周期，从远古的 Java Swing 到 QT，一直到 jQueryUI、Angular、React，大家都设计了自己的生命周期机制。虽然技术细节有差异，但是基本的结构是类似的，都需要经历几个基本的阶段：初始化、渲染、存活期、销毁。请看图示：

请注意，所有 UI 组件几乎都是这样设计的，怎么样，还需要去强记那些内容吗？哈哈哈。

• 组件之间如何通讯？

OK，无论什么 UI 框架，有了 UI 组件之后，紧接着就需要解决组件间通讯的问题。

你只要能解决以下 3 种情况就能解决绝大部分的问题了：父子间如何通讯？兄弟间如何通讯？远房亲戚之间如何通讯？

无论哪种框架，典型的解决方案有 3 种：父子之间通过事件或者直接调用