当前位置：首页 > news >正文

前端IOC控制反转与DI依赖注入并以didi JS DI库以及diagramJS插件机制（基于DI实现）

news 来源：原创 2025/5/23 14:07:19

先回顾一下Java SpringBoot中涉及的IOC与DI：

SpringBoot中IOC&DI

在这里插入图片描述

Why:

以SpringMVC的web的Service与DAO层代码为例，依赖耦合程度过高。
在这里插入图片描述

How:

常见的解耦方式就是有个中间层，将信息交给中间层管。

IOC（Inversion of Control）控制反转

业务层要用数据层的类对象，以前是自己new的
现在自己不new了，交给别人[外部]来创建对象
别人[外部]就反转控制了数据层对象的创建权
这种思想就是控制反转

依赖关系如何保注入？

DI（Dependence Injection）:依赖注入
在这里插入图片描述

前端中IOC与DI

DI实现库—— didid库

在这里插入图片描述

什么是依赖注入？

依赖注入是一种设计模式，它将对象的创建和依赖关系的管理从业务逻辑中分离出来。它有两个核心概念：

依赖注入模式：通过构造函数或方法参数显式传递依赖关系
依赖注入框架：自动管理对象创建和依赖关系

为什么要使用依赖注入？

显式依赖：通过构造函数参数明确依赖关系，便于理解
代码复用：解耦具体实现，更容易在不同环境中重用
易于测试：可以单独测试对象，无需整个环境

示例

var Car = function(engine) {this.start = function() {engine.start();};
};var module = {'car': ['type', Car],'engine': ['factory', createEngine]
};var injector = new di.Injector([module]);
injector.invoke(function(car) {car.start();
});

在这里插入图片描述

核心概念

模块：定义如何创建对象的配置对象
注入器：根据模块配置创建和管理对象（IOC容器）
类型注册：
- type：通过构造函数创建实例
- factory：通过工厂函数创建实例
- value：直接使用固定值

使用场景

Web 应用：使用数组表示法避免压缩问题
大型应用：管理复杂的依赖关系
测试环境：轻松mock依赖

与其他框架的区别

node-di：增加了数组表示法和ES6支持
Angular DI：更轻量，没有全局模块注册

依赖注入是构建可维护、可测试应用的重要模式，didi 是一个轻量级的实现，适合各种JavaScript应用。

DiagramJS中的依赖注入

在 diagram-js 中，插件（或模块）是通过依赖注入（Dependency Injection, DI）机制进行管理的。 didi 是一个轻量级的 JavaScript DI 框架，负责解析模块之间的依赖关系并进行实例化。

每个模块可以定义以下属性：

depends：声明该模块依赖的其他模块。
init：指定在初始化时需要执行的服务名称。

服务名称: 以 [ 'type', 构造函数 ] 的形式注册服务
在这里插入图片描述

插件化架构

bpmn-js 是一个基于 diagram-js 构建的 BPMN 2.0 渲染和建模工具，它通过 didi 实现了插件机制，提供了灵活的模块化扩展能力。(GitHub)

🧩 插件机制概览

在 diagram-js 中，插件（或模块）是通过依赖注入（Dependency Injection, DI）机制进行管理的。 didi 是一个轻量级的 JavaScript DI 框架，负责解析模块之间的依赖关系并进行实例化。

每个模块可以定义以下属性：

__depends__：声明该模块依赖的其他模块。
__init__：指定在初始化时需要执行的服务名称。
服务名称: 以 [ 'type', 构造函数 ] 的形式注册服务。(bpmn.io Forum)

例如，创建一个简单的日志插件：

const MyLoggingPlugin = function(eventBus) {eventBus.on('element.changed', function(event) {console.log('Element changed:', event.element);});
};MyLoggingPlugin.$inject = ['eventBus'];export default {__init__: ['myLoggingPlugin'],myLoggingPlugin: ['type', MyLoggingPlugin]
};

在上述代码中，$inject 是 didi 用于指定依赖项的方式，确保在代码压缩后依赖关系仍然正确。 (bpmn.io Forum)

🔌 在 bpmn-js 中集成插件

要将自定义插件集成到 bpmn-js 中，可以在创建 BpmnJS 实例时，通过 additionalModules 选项添加插件模块：(bpmn.io Forum)

import BpmnJS from 'bpmn-js/lib/Modeler';
import MyLoggingModule from './my-logging-module';const bpmnModeler = new BpmnJS({container: '#canvas',additionalModules: [MyLoggingModule]
});

这样，bpmn-js 会在初始化时加载并执行你的插件模块。

🧪 示例：监听元素更改事件

以下是一个完整的插件示例，它监听元素的更改事件并在控制台输出相关信息：

// my-logging-plugin.js
export default function MyLoggingPlugin(eventBus) {eventBus.on('element.changed', function(event) {console.log('Element changed:', event.element);});
}MyLoggingPlugin.$inject = ['eventBus'];export default {__init__: ['myLoggingPlugin'],myLoggingPlugin: ['type', MyLoggingPlugin]
};