didi 使用解析
在 bpmnjs 核心全部使用了didi。想要理解源码,了解didi的使用在所难免。
理解下来,感觉这是一种全新的程序组织方式
优点:
- 使用didi模块声明方式
- didi 管理全局模块
- new 一个带模块的didi实例即使程序入口
- 可以实现程序的低耦合高内聚,通过$inject注入需要的依赖
缺点:
- 模块注册的多了,寻找起来就比较困难,你都不知道你需要的依赖在哪里注册过
didi
didi 是一个js使用的依赖注入、控制翻转的容器。
参考文档- didi实例创建后,可以传递性的解决依赖,并缓存实例实现复用。
使用
声明组件示例
import { Injector } from 'didi';
function Car(engine) {
this.start = function() {
engine.start();
};
}
function createPetrolEngine(power) {
return {
start: function() {
console.log('Starting engine with ' + power + 'hp');
}
};
}
// 定义 (didi) 模块
// 通过name声明可用的组件,并指定他们如何被提供
const carModule = {
// 请求 'car', injector 将通过调用 new Car(...) 产生一个car
'car': ['type', Car],
// asked for 'engine', the injector will call createPetrolEngine(...) to produce it
'engine': ['factory', createPetrolEngine],
// asked for 'power', the injector will give it number 1184
'power': ['value', 1184] // probably Bugatti Veyron
};
// instantiate an injector with a set of (didi) modules
const injector = new Injector([
carModule
]);
// use the injector API to retrieve components
injector.get('car').start();
// ...or invoke a function, injecting the arguments
injector.invoke(function(car) {
console.log('started', car);
});
注入组件
injector容器通过注解、注释、函数参数名 查找依赖
参数名
如果没有提供更详细的指定,容器将从函数参数名解析依赖
function Car(engine, license) {
// 将注入名为 'engine' 和 'license' 的组件
}
函数注释
function Car(/* engine */ e, /* x._weird */ x) {
// 将注入名为 'engine' 和 'x._weird' 的组件
}
$inject 注解
function Car(e, license) {
// 将注入名为 'engine' 和 'license' 的组件
}
Car.$inject = [ 'engine', 'license' ];
数组符号
const Car = [ 'engine', 'trunk', function(e, t) {
//将注入 'engine' and 'trunk'
}];
部分注入
有时只注入一个对象的部分属性是非常有帮助的。
function Engine(/* config.engine.power */ power) {
// will inject 1184 (config.engine.power),
// assuming there is no direct binding for 'config.engine.power' token
}
const engineModule = {
'config': ['value', {engine: {power: 1184}, other : {}}]
};
初始化组件
模块(module)可以用 __init__
钩子去声明那些急需加载或者调用的函数、组件
import { Injector } from 'didi';
function HifiComponent(events) {
events.on('toggleHifi', this.toggle.bind(this));
this.toggle = function(mode) {
console.log(`Toggled Hifi ${mode ? 'ON' : 'OFF'}`);
};
}
const injector = new Injector([
{
__init__: [ 'hifiComponent' ],
hifiComponent: [ 'type', HifiComponent ]
},
...
]);
// initializes all modules as defined
injector.init();
组件重写
可以通过name重写组件。 在需要自定义、测试的时候很有用
import { Injector } from 'didi';
import coreModule from './core';
import HttpBackend from './test/mocks';
const injector = new Injector([
coreModule,
{
// overrides already declared `httpBackend`
httpBackend: [ 'type', HttpBackend ]
}
]);
15 声望
0 粉丝
推荐阅读
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...
乌柏木赞 175阅读 14k评论 10
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...
寒青赞 56阅读 8.5k评论 11
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...
jenemy赞 49阅读 7.2k评论 12
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 75阅读 7.1k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 42阅读 6.8k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 45阅读 8.6k评论 6
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...
乌柏木赞 35阅读 6.7k评论 10
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。