在这个标题中，除了 JS 是乱入以外，别的的几个辞汇都是存在一个配合点的，那就是依靠。

那末，依靠是什么呢？

比方，如今我正在写这篇博客文，然则我得在电脑上编辑，电脑就是我完成这件事的依靠。而在代码中，最直观的体现是模块之间的依靠。如某个模块依靠别的一个模块，那末别的的谁人模块就是该模块的依靠。其实在上篇博客文章《JaVaScript中的模块》中，我们也手写了一个模块依靠管理器。

依靠这个明白起来很简单，但这不代表能够随便的依靠。在写模块的时刻，考究个高内聚低耦合，以进步模块的可拓展性和可维护性。模块依靠了谁，怎样去依靠，都关乎了终究模块的好与坏。

还好在编程界有着进步代码质量的金科玉律，我们能够用理论来指点实践，写出更好的代码。

依靠反转准绳

依靠反转准绳（Dependency inversion principle，DIP），是一种特定的解耦情势，使得高层次的模块不依靠于低层次的模块的完成细节，依靠关联被倒置（反转），从而使得低层次模块依靠于高层次模块的需求笼统。———— 维基百科

该准绳划定：

1. 高层次的模块不应当依靠与低层次的模块，二者都应当依靠于笼统接口。
2. 笼统接口不应当依靠于详细完成。而详细完成则应当依靠于笼统接口。

如今用一个例子来诠释一波。

// Ajax.js
class Ajax {
  get() {
    return this.constructor.name;
  }
}
export default Ajax;

// main.js
import Ajax from './Ajax';
class Main {
  constructor() {
    this.render()
  }
  render() {
    let content = (new Ajax()).get();
    console.log('content from', content);
  }
}
new Main();

刚开始的时刻，我们基于 XMLHttpRequest 对象，封装了 Ajax 用于要求数据。厥后 fetch 出来了，我们盘算跟上时期的脚步，封装 fetch 以庖代 Ajax。

// Fetch.js
class Fetch {
  fetch() {
    return this.constructor.name;
  }
}
export default Fetch;

// main.js
import Fetch from './Fetch';
class Main {
  constructor() {
    this.render();
  }
  render() {
    let content = (new Fetch()).fetch();
    console.log('content from', content);
  }
}
new Main();

从以上能够看出来，悉数替换历程很贫苦，我们须要找出封装要求模块（Ajax、Fetch）的一切援用，然后替换掉。又由于 Ajax、Fetch 的要领定名也是差别，所以也须要对应地做变动。

这就是传统的处置惩罚依靠关联的体式格局。在这里 Main 是高层次模块，Ajax、Fetch 是低层次模块。依靠关联竖立于高层次模块，且高层次模块直接依靠低层次模块，这类依靠关联限定了高层次模块的复用性。

依靠反转准绳则倒置这类依靠关联，并以上面提到的两个划定作为指点思想。

// Service.js
class Service {
  request(){
    throw `${this.constructor.name} 没有完成 request 要领！`
  }
}
class Ajax extends Service {
  request(){
      return this.constructor.name;
  }
}
export default Ajax;

// Main.js
import Service from './Service.js';
class Main {
  constructor() {
    this.render();
  }
  render() {
    let content = (new Service).request();
    console.log('content from', content);
  }
}
new Main();

在这里我们把配合依靠的 Service 作为笼统接口，它就是高层次模块与低层次模块须要配合恪守的左券。在高层次模块中，它会默许 Service 会有 request 要领用来要求数据。在低层次模块中，它会顺从 Service 复写应当存在的要领。这在《在JavaScript中尝试组合形式》中，不管分支对象照样恭弘=叶 恭弘对象都完成 expense() 要领的原理差不多。

纵然厥后须要封装 axios 庖代 fetch，我们也只须要在 Service.js 中修正即可。

再次回忆下传统的依靠关联。

依靠关联竖立于高层次模块，且高层次模块直接依靠低层次模块。

经由以上的折腾，我们充其量只是处理了高层次模块直接依靠低层次模块的题目。那末依靠关联竖立于高层次模块的题目呢？

掌握反转

假如说依靠反转准绳通知我们该依靠谁，那末掌握反转则通知们谁应当来掌握依靠。

像上面的 Main 模块，它依靠 Service 模块。为了取得 Service 实例的援用，Main 在内部靠本身 new 出了一个 Service 实例。如许明显地援用别的模块，无异加大了模块间的耦合。

掌握反转（Inversion of Control，IoC），经由过程掌握反转，对象在被竖立的时刻，有一个掌握系统内一切对象的外界实体，将其所依靠的对象的援用通报给它。能够说，依靠被注入到对象中。———— 维基百科

这些话的意义就是将依靠对象的竖立和绑定转移到被依靠对象类的外部来完成。完成掌握反转最常见的体式格局是依靠注入，另有一种体式格局依靠查找。

依靠注入

依靠注入（Dependency Injection，DI），在软件工程中，依靠注入是种完成掌握反转用于处理依靠性设想形式。一个依靠关联指的是可被应用的一种对象（即效劳供应端）。依靠注入是将所依靠的通报给将运用的隶属对象（即客户端）。该效劳将会变成客户端的状况的一部分。通报效劳给客户端，而非许可客户端来竖立或寻觅效劳，是本设想形式的基本要求。

没看懂？没紧要。这句话讲的是，把历程放在表面，将效果带入内部。在《JaVaScript中的模块》中，我们已用到过依靠注入，就是关于依靠模块的模块，则把依靠作为参数运用。

所以我们再次革新下，

// Service.js
class Service {
  request() {
    throw `${this.constructor.name} 没有完成 request 要领！`
  }
}
class Ajax extends Service {
  request() {
    return this.constructor.name;
  }
}
export default Ajax;
// Main.js
class Main {
  constructor(options) {
    this.Service = options.Service;
    this.render();
  }
  render() {
    let content = this.Service.request();
    console.log('content from', content);
  }
}
export default Main;
// index.js
import Service from './Service.js';
import Main from './Main.js';
new Main({
  Service: new Service()
})

在 Main 模块中, Service 的实例化是在外部完成，并在 index.js 中注入。相比上一次，修改后的代码并没有看出带来多大的优点。假如我们再增添一个模块呢？

class Router {
  constructor() {
    this.init();
  }
  init() {
    console.log('Router::init')
  }
}
export default Router;

# Main.js
+   this.Service = options.Router;

# index.js
+   import Router from './Router.js'
    new Main({
+        Router: new Service()
    })

如果内部实例化就不优点置惩罚了。可换成依靠注入后，这个题目就很优点理了。

// utils.js
export const toOptions = params =>
  Object.entries(params).reduce((accumulator, currentValue) => {
    accumulator[currentValue[0]] = new currentValue[1]()
    return accumulator;
  }, {});

// Main.js
class Main {
  constructor(options) {
    Object.assign(this, options);
    this.render();
  }
  render() {
    let content = this.Service.request();
    console.log('content from', content);
  }
}
export default Main;

// index.js
import Service from './Service.js';
import Router from './Router.js';
import Main from './Main.js';
import { toOptions } from './utils.js'
/**
 * toOptions 转换成参数情势
 * @params {Object} 类
 * @return {Object} {Service: Service实例, Router: Router实例}
 */
const options = toOptions({Service, Router});
new Main(options);

由于依靠注入把依靠的援用从外部引入，所以这里运用 Object.assign(this, options) 体式格局，把依靠悉数加到了 this 上。纵然再增添模块，也只须要在 index.js 中引入即可。

到了这里，DIP、IoC、DI 的观点应当有个清楚的认识了。然后我们再结合实际，加个功用再次稳固以下。作为一功用个自力的模块，平常都有个初始化的历程。

如今我们要做的是恪守一个初始化的商定，定义一个笼统接口，

// Interface.js
export class Service {
  request() {
    throw `${this.constructor.name} 没有完成 request 要领！`
  }
}
export class Init {
  init() {
    throw `${this.constructor.name} 没有完成 init 要领！`
  }
}
// Service.js
import { Init, Service } from './Interface.js';
import { mix } from './utils.js'
class Ajax extends mix(Init, Service) {
  constructor() {
    super();
  }
  init() {
    console.log('Service::init')
  }
  request() {
    return this.constructor.name;
  }
}
export default Ajax;

Main、Service、Router 都依靠 Init 接口（在这里就是一种协议），Service 模块比较特别，所以做了 Mixin 处置惩罚。要做到一致初始化，Main 还须要做些事。

// Main.js
import { Init } from './Interface.js'
class Main extends Init {
  constructor(options) {
    super();
    Object.assign(this, options);
    this.options = options;
    this.render();
  }
  init() {
    (Object.values(this.options)).map(item => item.init());
    console.log('Main::init');
  }
  render() {
    let content = this.Service.request();
    console.log('content from', content);
  }
}
export default Main;

至此，完毕

// index.js
import Service from './Service.js';
import Router from './Router.js';
import Main from './Main.js';
import { toOptions } from './utils.js'

/**
 * toOptions
 * 转换成参数情势
 * @params {Object} 类
 * @return {Object}
 * {
 *    Service: Service实例,
 *    Router: Router实例
 * }
 */
const options = toOptions({ Service, Router });

(new Main(options)).init();

//  content from Ajax
//  Service::init
//  Router::init
//  Main::init

（以上一切示例可见GitHub）