一统江湖的大前端（10）——inversify.js控制反转开发者社区

一统江湖的大前端（10）——inversify.js控制反转

import B from ‘../def/B’;
import createC from ‘../def/C’;
class A{
    constructor(paramB, paramC){
       this.b = new B(paramB);
       this.c = createC(paramC);
actionA(){
  this.b.actionB();
}

class A{
    constructor(bInstance, cInstance){
       this.b = bInstance;
       this.c = cInstance;
actionA(){
  this.b.actionB();
}

// IOC成员属性
interface iIOCMember {
  factory: Function;
  singleton: boolean;
  instance?: {}
// 定义IOC容器
Class IOC {
  private container: Map<PropertyKey, iIOCMember>;
  constructor() {
    this.container = new Map<string, iIOCMember>();
}

// 构造函数泛型
interface iClass<T> {
  new(...args: any[]): T
// 定义IOC容器
class IOC {
  private container: Map<PropertyKey, iIOCMember>;
  constructor() {
    this.container = new Map<string, iIOCMember>();
  bind<T>(key: string, Fn: iClass<T>) {
    const factory = () => new Fn();
    this.container.set(key, { factory, singleton: true });
}

  use(namespace: string) {
    let item = this.container.get(namespace);
    if (item !== undefined) {
      if (item.singleton && !item.instance) {
        item.instance = item.factory();
      return item.singleton ? item.instance : item.factory();
    } else {
      throw new Error('未找到构造方法');
  }

class UserService {
  constructor() {}
  test(name: string) {
    console.log(`my name is ${name}`);
const container = new IOC();
container.bind<UserService>('UserService', UserService);
const userService = container.use('UserService');
userService.test('大史不说话');

var app = angular.module(“myApp”, []);  
//编写页面控制器
app.controller(“mainPageCtrl”,function($scope，userService) {  
     // 控制器函数操作部分 ,主要进行数据的初始化操作和事件函数的定义 
    $scope.title = ‘大史住在大前端’;
userService.showUserInfo();
// 编写自定义服务
app.service(‘userService’,function(){
this.showUserInfo = function(){
    Console.log(‘call the method to show user information’);
})

// 内联注入
app.controller(“mainPageCtrl”,[‘$scope’, ’userService’, function($scope，userService) {  
     // 控制器函数操作部分 ,主要进行数据的初始化操作和事件函数的定义 
    $scope.title = ‘大史住在大前端’;
userService.showUserInfo();
// 声明注入
var mainPageCtrl =  function($scope，userService) {  
     // 控制器函数操作部分 ,主要进行数据的初始化操作和事件函数的定义 
    $scope.title = ‘大史住在大前端’;
userService.showUserInfo();
mainPageCtrl.$inject = [‘$scope’,’userService’];
app.controller(“mainPageCtrl”, mainPageCtrl);

import { getToken } from ‘./utils’;
axios.get(‘/api/report/get_list’,{
    headers:{
        ‘X-Token’:getToken()
});

axios.interceptors.request.use(function (config) {
    // 在config配置中添加自定义信息
    config.headers = {
      ...config.headers,
       ‘X-Token’:getToken()
    return config;
  }, function (error) {
    // 请求发生错误时的处理函数
    return Promise.reject(error);
  });

function testable(target){
    target.prototype._testable = false;
// 在类名上一行编写装饰器
@testable
Class Person{
    constructor(name){
      this.name = name;
}

// Angular中的组件定义
@Component({
    selector: ‘hero-detail’,
    templateUrl: ‘hero-detail.html’,
    styleUrls: [‘style.css’]
Class MyComponent{
   //......
//@Component装饰器的定义大致符合如下的形式
function Component(params){
    return function(target){
       // target可以访问到params中的内容
       target.prototype._meta = params;
}

function log(target, key, descriptor){
    const originMethod = target[key];
    const decoratedMethod = ()=>{
        console.log(‘方法执行前’);
        const result = originMethod();
        console.log(‘方法执行后’);
        return result;
//返回新方法
target[key] = decoratedMethod;
}

// file interfaces.ts
export interface Warrior {
    fight(): string;
    sneak(): string;
export interface Weapon {
    hit(): string;
export interface ThrowableWeapon {
    throw(): string;
}

// file types.ts
const TYPES = {
    Warrior: Symbol.for("Warrior"),
    Weapon: Symbol.for("Weapon"),
    ThrowableWeapon: Symbol.for("ThrowableWeapon")
export { TYPES };

import { injectable, inject } from "inversify";
import "reflect-metadata";
import { Weapon, ThrowableWeapon, Warrior } from "./interfaces";
import { TYPES } from "./types";
@injectable()
class Katana implements Weapon {
    public hit() {
        return "cut!";
@injectable()
class Shuriken implements ThrowableWeapon {
    public throw() {
        return "hit!";
@injectable()
class Ninja implements Warrior {
    private _katana: Weapon;
    private _shuriken: ThrowableWeapon;
    public constructor(
	    @inject(TYPES.Weapon) katana: Weapon,
	    @inject(TYPES.ThrowableWeapon) shuriken: ThrowableWeapon
        this._katana = katana;
        this._shuriken = shuriken;
    public fight() { return this._katana.hit(); }
    public sneak() { return this._shuriken.throw(); }
export { Ninja, Katana, Shuriken };

// file inversify.config.ts
import { Container } from "inversify";
import { TYPES } from "./types";
import { Warrior, Weapon, ThrowableWeapon } from "./interfaces";
import { Ninja, Katana, Shuriken } from "./entities";
const myContainer = new Container();
myContainer.bind<Warrior>(TYPES.Warrior).to(Ninja);
myContainer.bind<Weapon>(TYPES.Weapon).to(Katana);
myContainer.bind<ThrowableWeapon>(TYPES.ThrowableWeapon).to(Shuriken);
export { myContainer };

import { myContainer } from "./inversify.config";
import { TYPES } from "./types";
import { Warrior } from "./interfaces";
const ninja = myContainer.get<Warrior>(TYPES.Warrior);
expect(ninja.fight()).eql("cut!"); // true
expect(ninja.sneak()).eql("hit!"); // true

import * as ERRORS_MSGS from "../constants/error_msgs";
import * as METADATA_KEY from "../constants/metadata_keys";
function injectable() {
    return function (target) {
        if (Reflect.hasOwnMetadata(METADATA_KEY.PARAM_TYPES, target)) {
            throw new Error(ERRORS_MSGS.DUPLICATED_INJECTABLE_DECORATOR);
        var types = Reflect.getMetadata(METADATA_KEY.DESIGN_PARAM_TYPES, target) || [];
        Reflect.defineMetadata(METADATA_KEY.PARAM_TYPES, types, target);
        return target;
export { injectable };

// 为类添加元信息
Reflect.defineMetadata(metadataKey, metadataValue, target);
// 为类的属性添加元信息
Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey);

function injectable() {
    return function (target) {
        if (Reflect.hasOwnMetadata(‘inversify:paramtypes’, target)) {
            throw new Error(/*...*/);
        var types = Reflect.getMetadata(‘design:paramtypes’, target) || [];
        Reflect.defineMetadata(‘inversify:paramtypes’, types, target);
        return target;
}

function inject(serviceIdentifier) {
    return function (target, targetKey, index) {
        if (serviceIdentifier === undefined) {
            throw new Error(UNDEFINED_INJECT_ANNOTATION(target.name));
        var metadata = new Metadata(METADATA_KEY.INJECT_TAG, serviceIdentifier);
        if (typeof index === "number") {
            tagParameter(target, targetKey, index, metadata);

一统江湖的大前端（10）——inversify.js控制反转

一统江湖的大前端（10）——inversify.js控制反转

依赖为什么需要注入

IOC容器的实现

手动实现IOC容器

AngularJS中的依赖注入

AOP和装饰器

用inversify.js实现依赖注入

基本使用

源码浅析