javascript依赖注入详解

作者: 侬姝沁儿 | 来源:发表于2017-10-21 17:22 被阅读321次

本文作者：言墨儿原文出处：简书，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.代码说明一切

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

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

基于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前端。如有意见可以进行评论，每一条评论我都会认真对待。

javascript依赖注入详解

前言

1.什么是依赖注入

1.1它是设计模式

1.2依赖倒转原则

1.3前端的依赖注入

1.4依赖注入的的作用

1.`初始化被依赖的模块`

2. `注入到依赖模块中`

2.代码说明一切

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

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

web前端

Web前端之路

让前端飞

javascript依赖注入详解

前言

1.什么是 依赖注入

1.1它是设计模式

1.2依赖倒转原则

1.3前端的依赖注入

1.4依赖注入的的作用

1.初始化被依赖的模块

2. 注入到依赖模块中

2.代码说明一切

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

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

web前端

Web前端之路

让前端飞

1.什么是依赖注入

1.`初始化被依赖的模块`

2. `注入到依赖模块中`