[ AngularJS ] 自己实现一个简单的依赖注入

摘要：我们开始使用的时候，它的双向数据绑定是最让我们印象深刻的，那第二个就应该算是它的那神奇的依赖注入的功能了。来实现依赖注入现在大部分的框架都提供依赖注入机制的模块，可能会叫做。

  
我们开始使用AngularJS的时候，它的双向数据绑定是最让我们印象深刻的，那第二个就应该算是它的那神奇的依赖注入的功能了。

function myController = ($scope, $http){
    $http.get("users/users.json").success(function(data){
        $scope.users = data;
    })
}

这是一个典型的angularjs的控制器，他发送了一个http请求，从后台获取json数据，然后把他传递给当前作用域。你会发现，我们并没有执行这个myController函数(我们没有机会给它传递参数)，其实，是angular这个框架帮我们做了；那么，$scope, $http这些变量从哪里来的呢？ 这是angular的一个非常酷的特性，我们一步步来实现一个简单的注入器，从而知道它是怎么实现的。

现在，我们有一个js函数去把用户列表展示在网页上，那么这个函数就需要从ajax获取过来的数据和用于展示数据的DOM元素。为了简单点，我们直接用静态数据了来代替ajax的http请求：

var data = ["John", "Steve", "David"];
var body = document.querySelector("body");
var ajaxFn = {
  get: function(path, cb) {
    console.log(path + " requested");
    cb(data);
  }
}

我们把body标签作为列表的容器，ajaxFn是模拟ajax请求的对象，data是一个包含所有用户的数组。下面来使用：

var displayUsers = function(domEl, ajax) {
  ajax.get("/api/users", function(users) {
    var html = "";
    for(var i=0; i < users.length; i++) {
      html += "
" + users[i] + "
";
    }
    domEl.innerHTML = html;
  });
}

很明显，我们运行displayUsers(body, ajaxFn),我们将会看到三个用户名显示在网页上，同时控制台输出了/api/users requested。那这样的话，我们可以认为我们的displayUsers函数有两个依赖，body和ajaxFn.

那么现在，我们的目的是使displayUsers这个函数在不传参数的情况下照样工作，即，运行displayUsers()要得到和上面一样的结果，如果我们直接运行，你会发现报错了：

Uncaught TypeError: Cannot read property "get" of undefined

很明显是因为ajax这个参数没有定义。

现在大部分的框架都提供依赖注入机制的模块，可能会叫做：injector。为了在某个地方使用一个依赖，我们需要在那个地方注册那个依赖：

来创建我们的injector：

var injector = {
  storage: {},
  register: function(name, resource) {
    this.storage[name] = resource;
  },
  resolve: function(target) {

  }
};

我们只需要两个方法，第一个是register， 接收我们的依赖并将它存储起来。第二个方法是resolve，这个方法接收的参数是我们我们要注入依赖的对象，这里的关键的点就是这个注入器不应该调用我们的函数，所以我们在resolve方法中返回一个闭包来包裹我们的target,然后再调用它：

resolve: function(target) {
  return function() {
    target();
  };
}

那么到现在呢，我们的注入器依然是不可用的：

displayUsers = injector.resolve(displayUsers);
displayUsers();

我们依然得到同样的错误，你觉得少了什么呢？绝壁就是依赖项了，所以我们下一步就是要找出这个函数的依赖项，如何找？ 这是比较棘手的问题，不过我们可以参考angularjs的方式：

var FN_ARGS = /^functions*[^(]*(s*([^)]*))/m;
var STRIP_COMMENTS = /((//.*$)|(/*[sS]*?*/))/mg;
...
function annotate(fn) {
  ...
  fnText = fn.toString().replace(STRIP_COMMENTS, "");
  argDecl = fnText.match(FN_ARGS);
  ...
}
We purpo

这里省略了一些细节部分，我们需要注意的就是annotate这个函数，它负责将目标函数转换为一个字符串，删除它的注释(如果有)，然后提取他的参数(依赖项)：

resolve: function(target) {
  var FN_ARGS = /^functions*[^(]*(s*([^)]*))/m;
  var STRIP_COMMENTS = /((//.*$)|(/*[sS]*?*/))/mg;
  fnText = target.toString().replace(STRIP_COMMENTS, "");
  argDecl = fnText.match(FN_ARGS);
  console.log(argDecl);
  return function() {
    target();
  }
}

上面主要是通过正则表达式来找到依赖项，来看看结果：

你会看到返回的数组中包含了我们需要的依赖项，我们找到它们并用注入器注册和存储：

resolve: function(target) {
  var FN_ARGS = /^functions*[^(]*(s*([^)]*))/m;
  var STRIP_COMMENTS = /((//.*$)|(/*[sS]*?*/))/mg;
  fnText = target.toString().replace(STRIP_COMMENTS, "");
  argDecl = fnText.match(FN_ARGS)[1].split(/, ?/g);
  var args = [];
  for(var i=0; i

现在，我们可以使用我们的注入器了：

injector.register("domEl", body);
injector.register("ajax", ajaxFn);

displayUsers = injector.resolve(displayUsers);
displayUsers();


你会发现得到了和刚开始一样的结果。

这样做有什么优点呢？有点就是我们可以把DOM元素和ajaxFn注入到任何一个函数中，我们甚至可以将我们的应用程序配置成这样的方式，那我们就不用通过继承来传递这些对象了。这仅仅是injector的register和resolve方法而已，我们的注入器还不够完美，还有扩展空间，比如定义作用域scope.

而angularjs中的依赖注入更加强大：

displayUsers = injector.resolve(["domEl", "ajax", displayUsers]);


和displayUsers 不同，它传递的是真实的依赖名称。

译自：http://www.sitepoint.com/revealing-magic-javascript/

有错误还请指正！