简单的依赖注入（控制反转）实现

前言

依赖注入，即控制反转，这最早是出现在后端开发的定义。在前端框架大行其道的今天，各个框架也引入了类似的实现模式。如Angular，Vue等。以Vue举例，Vue的plugins插件就是通过这种方式来扩展的。下面让我们来简单实现一个依赖注入。

手写一个简单的依赖注入插件

/**
 * @description 依赖注入实现（Ioc）
 * @author halapro.liu
 * @class App
 */
class App {
  static modules = []
  constructor (options) {
    this.options = options
    this.init()
  }
  init () {
    window.addEventListener('DOMContentLoaded', () => {
      this.initModules()
      this.options.onReady(this)
    })
  }
  static use (module) {
    Array.isArray(module) ? module.map(item => App.use(item)) : App.modules.push(module)
  }
  initModules () {
    App.modules.map(item => module.init && typeof module.init === 'function' && module.init(this))
  }
}

那么如何扩展插件呢？

下面我们简单写一个Router的结构

class Router {
  init (app) {
    app.router = new Router(app.options.router)
  }
}

当App实例化的时候调用init方法，并传入自身，从而把Router（插件）挂载到App实例上，这就实现了插件机制。

import Router from 'Router'
App.use(Router)
new App({
  router: {
    mode: 'history'
  },
  onReady (app) {
    console.log(app)
  }
})

以上为插件使用方式，这就简单实现了一个Vue模式的插件。