angular源码分析5-－provider实现原理

发表于

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

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

    接下来提供简单的实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    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种组件的注册过程，接下来实现组件初始化及解决依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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);
    }
}