本文作者：言墨儿 原文出处：简书，csdn 未经同意，禁止转载

本人在研究前端自动化时，开始深入学习设计模式，由此引发了对依赖注入的学习，站在巨人的肩膀上参考了很多文章，在这里对这些作者表示敬仰，并赋予相关博客链接。

前端需要知道的 依赖注入(Dependency Injection, DI)-IMWeb 黎清龙
JavaScript里的依赖注入
ralph_zhu-细数Javascript技术栈中的四种依赖注入
AngularJS中文官网-AngularJS入门教程05：XHR和依赖注入
依赖注入那些事儿

前言

熟悉AngularJS的同学很快就能联想到，在injector注入之前，我们在定义module时还可以调用config方法来配置随后会被注入的对象。典型的例子就是在使用路由时对$routeProvider的配置。
可是，你真的了解 依赖注入(Dependency Injection, DI) 吗？
本文将详细解释什么是依赖注入，并简单明了的解释属于前端的依赖注入

注意：本文专门为前端同学解释什么是依赖注入，文中例子也是js

1.什么是 依赖注入

1.1它是设计模式

首先，依赖注入是一个设计模式，因为它解决的是一类问题。这类问题是什么呢？这类问题和依赖有关系。

1.2依赖倒转原则

要知道依赖注入是解决什么问题，最好先了解一个原则：依赖倒转原则。

依赖倒转原则(Dependence Inversion Priciple, DIP)提倡：

. 高层模块不应该依赖低层模块。两个都应该依赖抽象
. 抽象不应该依赖细节，细节应该依赖抽象
. 针对接口编程，不要针对实现编程

要想讲明白这个设计模式得先给大家说一个现实场景的案例：主板和内存条

大家都知道内存条依赖主板，内存条坏了和主板无关，主板坏了也和内存条无关，可以把电脑理解成是大的软件系统，任何部件相互依赖，但又彼此独立，即这些部件就是电脑中封装的类或程序集，在电脑里这叫易插拔，在编程中这叫强内聚低耦合。

内存模块（高层模块）不依赖主板模块（低层模块），它们依赖的是被抽象的接口（模块依赖都应该依赖抽象），抽象不应该依赖细节，细节应该依赖抽象这句话说白了，就是要针对借口编程，不要对实现编程。无论主板、cpu、内存都是针对接口设计的，都是标准的接口，如果针对实现来设计，内存要对应到具体的厂商主板，内存坏了主板也得换。

内存和主板的依赖关系

这也就是说：在编程时，我们对系统进行模块化，它们之间有依赖，比如模块A依赖模块B
那么依据依赖倒转原则，模块A应该依赖模块B的接口，而不应该依赖模块B的实现。

模块A依赖模块B示例

虽然模块A只依赖接口编程，但在运行的时候，它还是需要有一个具体的模块来负责模块A需要的功能的，所以模块A在【运行时】是需要一个【真的】模块B，而不是它的接口。即模块A在【运行时】需要有一个接口的实现模块作为它的属性。

那么这个实现模块怎么来？它是怎么初始化，然后怎么传给模块A的？

解决这个问题的就是依赖注入。

1.3前端的依赖注入

依赖注入更多的是后端的概念，对于前端来说，很少有抽象，更别说有接口了。但是，依赖注入却是一直都存在，只是许多人没有认出来而已。

比如用过vue的都应该知道main.js，其实他就是一个依赖注入，我们见过有这样一段代码。

import ElementUI from 'element-ui' // vue的ui组件-（饿了么-ui）element-ui
Vue.use(ElementUI)

其实就是我们的需要的模块依赖vue模块，main.js就是vue模块抽象出来的接口，这里使用Vue.use()，把我们需要的模块vue注入进来，然后我们就可以用它了。

这是个很普通的代码，太正常了，我们每天都会写这些代码。

其实依赖注入它只做两件事：

. 初始化被依赖的模块
. 注入到依赖模块中

这个时候应该知道了，import ElementUI from 'element-ui'，初始化了被依赖的模块；而Vue.use(ElementUI)是把我们依赖的模块注入到依赖模块中。

我们不依赖element-ui的具体实现，我们只是使用他这个库的抽象接口而已，比如它的button组件。

1.4依赖注入的的作用

看了上面我们常用的引入是依赖注入，是不是有点吃惊？不用觉得这是什么很屌的是，关于这个我们仔细深究她的作用:

初始化被依赖的模块
注入到依赖模块中

我们为什么需要依赖注入呢？

1.初始化被依赖的模块

如果不通过依赖注入模式来初始化被依赖的模块，那么就要依赖模块自己去初始化了
那么问题来了：依赖模块就耦合了被依赖模块的初始化信息了

2. 注入到依赖模块中

被依赖模块已经被其他管理器初始化了，那么依赖模块要怎么获取这个模块呢？

有两种方式：

. 自己去问
. 别人主动给你

没用依赖注入模式的话是1，用了之后就是2

想想，你需要某个东西的时候，你去找别人要，你需要提供别人什么信息？最简单的就是那个东西叫什么，即你需要提供一个名称。
所以，方式1的问题是：依赖模块耦合了被依赖模块的【名称】还有那个【别人】
而方式2解决了这个问题，让依赖模块只依赖需要的模块的接口。

2.代码说明一切

让我们写下一些我们的依赖注入解决办法应该达到的目标：

1. 我们首先得为模块依赖提供抽象的接口
2. 下来应该能够注册依赖关系
3. 在注册这个依赖关系后有地方存储它
4. 存储后，我们应该把被依赖的模块注入依赖模块中
5. 注入应该保持被传递函数的作用域
6. 被传递的函数应该能够接受自定义参数，而不仅仅是依赖描述

基于Injector、dependencies和函数参数名的依赖注入

设想我们有1个模块Student，它依赖3个模块Notebook、Pencil、School

function Notebook() {}
Notebook.prototype.notebookName = function () {
  return 'this is a notebook'
}

function Pencil() {}
Pencil.prototype.printName = function () {
  return 'this is a pencil'
}

function School() {}
School.prototype.schoolName = function () {
  return '清华'
}

function Student() {}
Student.prototype.write = function (notebook, pencil, school) {
  if (!notebook || !pencil || !school) {
    throw new Error('Dependencies not provided!')
  }
  console.log('writing...')
  console.log(notebook)
  console.log(pencil)
  console.log(school)
  return '我拥有School、Pencil和Notebook'
}

我们需要在Student中用到，它依赖的3个模块Notebook、Pencil、School，记得依赖注入的功能：初始化被依赖的模块，注入到依赖模块中。

知道这些根据我们的目标，下面开始我们的injector接口，第一种方法：从方法中解析出参数的依赖注入

var injector = { // 依赖注入的抽象接口
  dependencies: {}, // 存储被依赖的模块
  register: function (key, value) { // 注册初始化被依赖的模块
    this.dependencies[key] = value
  },
  resolve: function (deps, func, scope) { // 注入到依赖的模块中，注入应该接受一个函数，并返回一个我们需要的函数
    var paramNames = this.getParamNames(func) // 取得参数名
    var params = []
    for (var i = 0; i < paramNames.length; i++) { // 通过参数名在dependencies中取出相应的依赖
      let d = paramNames[i]
      let depen = this.dependencies[d] || deps[i]
      if (depen) {
        params.push(depen)
      } else {
        throw new Error('缺失的依赖：' + d)
      }
    }
    // 注入依赖,执行,并返回一个我们需要的函数
    return func.apply(scope || {}, params) // 将func作用域中的this关键字绑定到bind对象上，bind对象可以为空
  },
  getParamNames: function (func) { // 获取方法的参数名字
    var paramNames = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1]
    paramNames = paramNames.replace(/ /g, '')
    paramNames = paramNames.split(',')
    return paramNames // Array
  }
}

这里我们使用register方法来注册初始化被依赖的模块，使用dependencies来存储被依赖的模块，resolve来进行注入，getParamNames来获取我们的传递方法的参数，注入依赖，执行，并返回一个我们需要的函数。

调用代码：

injector.register('notebook', new Notebook()) // 注册notebook
injector.register('pencil', new Pencil()) // 注册pencil
var school = new School()
var student = new Student()
// 以参数的形式传入school
var studentWrite = injector.resolve([, , school], student.write, student)
console.log(studentWrite) // "我拥有School、Pencil和Notebook"

执行结果：

执行结果

上面我们通过injector（注入器、注射器）向write方法提供它所需要的依赖。通过依赖注入，函数的执行和其所依赖对象的创建逻辑就被解耦开来了。这里我们初始化的方式有两种：一种是通过injector.register来注册，一种是直接使用injector.resolve中的deps来注册其依赖的。

这种方法我们是从方法中解析出参数她的参数得知他所依赖的模块。下面来说说另外一种方法：从方法中解析出参数及参数声明的依赖注入。

var injector = { // 依赖注入的抽象接口
  dependencies: {}, // 存储被依赖的模块
  isDeclare: false, // 是否为参数声明
  param: [], // 声明参数存储
  paramDeclare: function (param) { // 依赖注入参数声明
    if (Object.prototype.toString.call(param) !== '[object Array]') {
      try {
        throw new Error('接受的是一个数组,但是却得到一个' + typeof filterArray)
      } catch (e) {
        console.error(e)
      }
    }
    this.param = param.concat()
    console.log(this.param)
    this.isDeclare = true
  },
  register: function (key, value) { // 注册初始化被依赖的模块
    this.dependencies[key] = value
  },
  resolve: function (deps, func, scope) { // 注入到依赖的模块中，注入应该接受一个函数，并返回一个我们需要的函数
    console.log(deps)
    var paramNames = this.isDeclare ? this.param : this.getParamNames(func) // 取得参数名
    if (paramNames.length === 0 && this.isDeclare) {
      throw new Error('缺失的参数声明')
    }
    if (paramNames.length === 0 && !this.isDeclare) {
      throw new Error('该方法没有参数依赖')
    }
    var params = []
    for (var i = 0; i < paramNames.length; i++) { // 通过参数名在dependencies中取出相应的依赖
      let d = paramNames[i]
      let depen = this.dependencies[d] || deps[i]
      if (depen) {
        params.push(depen)
      } else {
        throw new Error('缺失的依赖：' + d)
      }
    }
    // 注入依赖,执行,并返回一个我们需要的函数
    return func.apply(scope || {}, params) // 将func作用域中的this关键字绑定到bind对象上，bind对象可以为空
  },
  getParamNames: function (func) { // 获取方法的参数名字
    var paramNames = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1]
    paramNames = paramNames.replace(/ /g, '')
    paramNames = paramNames.split(',')
    return paramNames // Array
  }
}

调用代码1：

injector.register('notebook', new Notebook()) // 注册notebook
injector.register('pencil', new Pencil()) // 注册pencil
var school = new School()
var student = new Student()
// 以参数的形式传入school
var studentWrite = injector.resolve([, , school], student.write, student)
console.log(studentWrite) // "我拥有School、Pencil和Notebook"

调用代码2：

injector.register('notebook', new Notebook())
injector.register('pencil', new Pencil())
injector.paramDeclare(['notebook', 'pencil', 'school']) // injector.paramDeclare-依赖注入参数声明
var school = new School()
var student = new Student()
var studentWrite = injector.resolve([, , school], student.write, student)
console.log(studentWrite) // "我拥有School、Pencil和Notebook"

结语

其实我们大部分人都用过依赖注入，只是我们没有意识到。即使你不知道这个术语，你可能在你的代码里用到它百万次了。希望这篇文章能加深你对它的了解。

提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。