什么是IoC

IoC 的全称叫做 Inversion of Control，可翻译为为「控制反转」或「依赖倒置」，它主要包含了三个准则：

1、高层次的模块不应该依赖于低层次的模块，它们都应该依赖于抽象

2、抽象不应该依赖于具体实现，具体实现应该依赖于抽象

3、面向接口编程而不要面向实现编程

概念总是抽象的，所以下面将以一个例子来解释上述的概念：

假设需要构建一款应用叫 App，它包含一个路由模块 Router 和一个页面监控模块 Track，一开始可能会这么实现：

// app.js

import Router from './modules/Router';

import Track from './modules/Track';

class App {

constructor(options) {

this.options = options;

this.router = new Router();

this.track = new Track();

this.init();

}

init() {

window.addEventListener('DOMContentLoaded', () => {

this.router.to('home');

this.track.tracking();

this.options.onReady();

});

}

}

// index.js

import App from 'path/to/App';

ew App({

onReady() {

// do something here...

},

});

嗯，看起来没什么问题，但是实际应用中需求是非常多变的，可能需要给路由新增功能(比如实现 history 模式)或者更新配置(启用 history, ew Router({ mode: 'history' }))。这就不得不在 App 内部去修改这两个模块，这是一个 INNER BREAKING 的操作，而对于之前测试通过了的 App 来说，也*重新测试。

很明显，这不是一个好的应用结构，高层次的模块 App 依赖了两个低层次的模块 Router 和 Track，对低层次模块的修改都会影响高层次的模块 App。那么如何解决这个问题呢，解决方案就是接下来要讲述的依赖注入(Dependency Injection)。