javascript依赖注入详解

本文作者：言墨儿 原文出处：简书，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只依赖接口编程，但在运行的时候，它还是需要有一个具体的模块来负责模块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注入进来，然后我们就可以用它了。

这是个很普通的代码，太正