provider实现原理

原生angular中的provider和$injector主要作用是：

1. 注册组件（controller directive service）
2. 解决组件间的依赖关系
3. 初始化组件

接下来提供简单的实现

var Provider={

    //保存所有组件对应的工厂函数
    _providers:{},
    
    //注册组件
    _register: function(name,fn) {
      this._providers[name]=fn;
    },
    
    //要来注册service
    service: function(name,fn) {
      return this._register(name+Provider.SERVICE_SUFFIX,fn);
    },
    
    //要来注册directive　
    directive: function(name,fn) {
      return this._register(name+Provider.DIRECTIVE_SUFFIX,fn);
    },
    
    //要来注册controller
    //初始化controller缓存里保存的是工厂函数，可以多次初始化同一个controller
    controller: function(name,fn) {
      return this._register(name,function() {
        return fn;
      })
    }
}

上面实现了3种组件的注册过程，接下来实现组件初始化及解决依赖

var Provider = {
    // ...
    
   //缓存初始化后的组件
    _cache: {},
    
    //返回一个数组 数组为当前函数工厂函数的传参，也就是依赖组件的名称
    annotate: function (fn) {
        var res = fn.toString()
            .replace(/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg, '')
            .match(/\((.*?)\)/);
        if (res && res[1]) {
            return res[1].split(',').map(function (d) {
                return d.trim();
            });
        }
        return [];
    },
    
    //接下来两个函数将互相调用，调用组件的初始化工厂函数，并循环遍历解决依赖（以及依赖的依赖）
    //解决依赖的意思就是将依赖组件的名称转换成对应组件的工厂函数，传入。
    
    //传入组件名，locals为所有本地依赖的对象集合，返回初始化后的组件
    get: function(name,locals) {
    
      //如果已有缓存的初始化工厂函数，返回他
      if (this._cache[name]) {
          return this._cache[name];
      }
      var provider=this._providers[name];
      if (!provider || typeof provider !=='function') {return;}
      return (this._cache[name] = this.invoke(provider,locals));
    },
    
    //用于初始化一个组件。如果该组件依赖的组件还未初始化，则会先初始化依赖的组件
    invoke: function(fn,locals) {
      locals= locals || {};
      
        //通过依赖名找出依赖的工厂函数
      var deps=this.annotate(fn).map(function(item) {
        return locals[item] || this.get(item,locals);
      },this);
      return fn.apply(null,deps);
    }
}