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 ]
  }
]);