用中间件进行依赖注入（DI）

如果你不熟悉依赖注入，我建议您阅读这篇文章。

依赖注入是一种设计模式，其中一个或者多个依赖(或服务)被注入或者通过引用传递到依赖对象中。

DI 删除了硬编码引入依赖，但却产生了一个新的问题。用户不得不去了解如何配置和注入所有的依赖。大多数的客户端框架都会有 DI 容器代替用户来做这件事。

一个依赖注入容器是一个知道如何实例化和配置对象的对象。

另一项技术是中间件依赖注入模式（middleware DI pattern），它被广泛应用于后端（Express, Koa）。这里的窍门在于所有的可注入依赖（中间件）拥有一致的接口，并且可以以同样的方式被注入。在这种情况下，是不需要 DI 容器的。

我采用这个解决方案是为了保持简单。如果你用过 Express，下面的代码会非常熟悉。

  1. component()
  2.   .use(paint) // 注入画图中间件
  3.   .use(resize) // 注入重调大小中间件
  4.   .register('comp-name')
  6.   function paint(elem, state, next) {
  7.     elem.style.color = 'red'
  8.     next()
  9.   }
  11.   function resize(elem, state, next) {
  12.     elem.style.width = '100px'
  13.     next()
  14.   }

当新的组件实例挂载到 DOM 的时候，运行中间件然后为组件实例扩展新的功能。用其它不同的库来扩展相同的对象会导致命名冲突。私有变量的暴露会让这个问题复杂化，并且可能会导致被其它人的不经意间所引用而导致事故。

解决这个问题的办法是利用一个公共的 API 来暴露公共变量然后隐藏掉其它的变量是一个好的实践。