簡單的依賴注入（控制反轉）實現

前言

依賴注入，即控制反轉，這最先是出如今後端開發的定義。在前端框架大行其道的今天，各個框架也引入了相似的實現模式。如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模式的插件。

博客地址 gitbook小冊