知识共享许可协议

前端 IoC 理念入门

背景

近几年,前端应用(WebApp)正朝着大规模方向发展,在这个过程中我们会对项目拆解成多个模块/组件来组合使用,以此提高我们代码的复用性,最终提高研发效率。

在编写一个复杂组件的时候,总会依赖其他组件来协同完成某个逻辑功能。组件越复杂,依赖越多,可复用性就越差,我们可以借助软件工程中优秀的编程理念来提高复杂组件的可复用性,以下将详述其中之一的依赖倒置理念。

什么是 IoC

IoC 全称 Inversion of Control,中文术语为依赖倒置(反转),包含两个准则:

  1. 高层次的模块不应该依赖于低层次的模块,他们都应该依赖于抽象。

  2. 抽象不应该依赖于具体实现,具体实现应该依赖于抽象

其背后的核心思想还是:面向接口编程。

我们用一个例子来说明:我们要实现一个列表 A,能够加载一系列的信息并展示,

于是很自然的我们遵守职责单一功能,将展示和加载两个逻辑拆分成2个类:

阅读全部

IoC 在前端模块化中的实践应用

前端模块化背景

在大部分单页式应用中,前端代码都是以 MV* 的结构来组织的,好处自然不必多说。在开始一个项目时,我们往往会将项目的业务功能纵向切分成多个子业务功能, 以模块的形式分配给团队各个开发人员,以达到最大的并行开发。随着业务的发展,新的项目也越来越多,我们会发现很多新的项目和现有的项目是有不少功能交集的。

从业务角度来看,一个项目就是由各个模块组合而成:A 项目由 m1, m2, m3 组合而成, B 项目则可能由 m1, m3, m4 组合而成。

在业务上将各个功能拆分明确后,很明显的 m1, m3 两个功能在 A 项目都是存在的,从工程角度来说,开发 B 项目的时候如果能够直接将A项目已经开发完毕的 m1, m3 直接复用, 那么必然是能够带来很明显的人力节约。

接下来就是从技术上去实现功能的复用,对于后端来说,通常的做法是服务化接口,而对于前端来说,我们目前的方案正是前端模块化:将功能打包为模块,发布至内部中央仓库, 使用方通过自己的方式(如:npm, bower, link[import], 百度的 edp, fis 等)导入模块包使用。

按照前端模块化的思路,开发新项目时,开发人员的工作从原来的开发所有功能变为:接入已有的功能模块,开发不存在的功能模块。

阅读全部