Angular源码解读 - setupModuleLoader函数

淩亂°似流年 2022-08-22 05:54 196阅读 0赞

`function publishExternalAPI(angular){}`  
publishExternalAPI就是将一些通用的方法挂载到全局变量angular上，然后我们就可以以API的形式进行调用  
函数首先传入一个angular的全局变量，下面将会遇到在前面定义的好的一个extend函数

function extend(dst) { 
        var h = dst.$$hashKey;
        return forEach(arguments, function(obj) { 
            obj !== dst && forEach(obj, function(value, key) { 
                dst[key] = value
            })
        }), setHashKey(dst, h), dst
    }

这里的方法就是将某些通用的方法挂到一个对象上面，extend传入和返回都是dst形参对象，里面经历了两个forEach，forEach也是angular前面定义好的函数，extend根据传入的arguments个数进行判断，dst是需要挂载的对象，arguments中除了dst外都是需要被挂载到dst中的对象  
`obj !== dst && forEach(obj, function(value, key) {})`  
上面这句就是将arguments中的dst对象排除出去，然后对dst进行对象挂载  
然后就转化成

angular['boostrap'] = boostrap;
    angular['copy'] = copy;
    angular['extend'] = extend;
    //...省略若干个通用的方法

上面就不一一列出所有方法，当然当我们对加载了angular.js的页面进入控制台进行打印就会很清晰的看出这里的全部方法  
`console.log(angular);`  
如图所示  
\[外链图片转存失败(img-hOr6YKs6-1567235827024)(https://cloud.githubusercontent.com/assets/17243165/15562024/16e25fd2-232e-11e6-9093-fad75a9fed3d.png)\]  
这些通用的工具函数在实际的项目中会经常使用到，挺方便的例如forEach，toJson和fromJson这些常用函数  
当然就如上面的extend也可以是做API调用，也写个简单的例子，同样在控制器里面输入一段代码，然后打印，这里创建一个空对象，并把该对象后面的对象拷贝并挂载到该空对象中，并赋值给wscat，那么wscat对象就有对应的这些属性  
`var wscat = angular.extend({}, {name:"wscats",skill:"none"})`  
`console.log(wscat)`  
\[外链图片转存失败(img-IDoZoX6h-1567235827026)(https://cloud.githubusercontent.com/assets/17243165/15562172/7bf9a6c2-232f-11e6-9a95-a7fc549c2cb6.png)\]

咱们继续往下看  
`angularModule = setupModuleLoader(window)`  
这里为angular对象创建和加载module()函数，这里我在[Angular源码解读setupModuleLoader函数][Angular_setupModuleLoader]有详细的分析，这里就不多说了，有需要的的可以回头看一下  
继续下面这句

try { 
        angularModule("ngLocale")
    } catch (e) { 
        angularModule("ngLocale", []).provider("$locale", $LocaleProvider)
    }

> try代码块里面首先判断是否获取到获取ngLocale模块，如果我们获取不到，则就报个异常（ngLocale默认没有创建的）  
> catch代码块接受上面的异常（也就是获取不到ngLocale模块走catch分支），然后在这个位置注册ngLocale模块

*简单的说这里angular.module在创建模块的时候，传递一个参数的时候,是获取模块；传递一个以上的是创建新模块；所以try里面是获取，catch里面就是创建了*  
那么这里就成功的创建了一个ngLocale模块，其实angularModule实际上就是angular.module  
`angularModule = angular.module`  
`angularModule("ngLocale", []) = angular.module("ngLocale", [])`  
所以我们就可以链式去调用对象moduleInstance中的directive和provider

annotate用来分析一个函数的签名，也就是函数的参数

function annotate(fn) { 
        var $inject, fnText, argDecl, last;
        return "function" == typeof fn ? ($inject = fn.$inject) || ($inject = [], fn.length && (fnText = fn.toString().replace(STRIP_COMMENTS, ""), argDecl = fnText.match(FN_ARGS), forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg) { 
            arg.replace(FN_ARG, function(all, underscore, name) { 
                $inject.push(name)
            })
        })), fn.$inject = $inject) : isArray(fn) ? (last = fn.length - 1, assertArgFn(fn[last], "fn"), $inject = fn.slice(0, last)) : assertArgFn(fn, "fn", !0), $inject
    }

> 注入器$injector的annotate方法的作用为分析函数的参数签名  
> 上面代码把它展开如下

**annotate传参的第一种情况（传函数）**  
首先判断传入的值是否函数  
`typeof fn == 'function'`  
再判断函数有没有 i n j e c t 属 性 ， 如 果 没 有 的 话 ‘ ! ( inject属性，如果没有的话 \`!( inject属性，如果没有的话‘!(inject = fn.$inject)`首先经过toString()序列化 处理转换为字符串，`fnText = fn.toString().replace(STRIP\_COMMENTS, ‘’);\`

arg.replace(FN_ARG, function(all, underscore, name){ 
        $inject.push(name);
    });

STRIP\_COMMENTS和FN\_ARG在前面定义好的正则表达式  
`STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm`  
`FN_ARG = /^\s*(_?)(\S+?)\1\s*$/`  
以上正则获取了依赖模块的名称并存入$inject数组中返回

简单演示这部分函数，走了了个类似的流程代码方便理解，如下

打印的结果如下图  
![image][]  
里面省略了forEach等angular方法，不过思路和目的是相同的，可以看到一些诸如空格等被正则正确的处理掉，然后最后返回一个数组  
**annotate传参的第二种情况（传数组）**  
那就是走了`else if (isArray(fn)) {}`的分支  
这里用了angular自定义的函数assertArgFn

function assertArg(arg, name, reason) { 
        if (!arg) throw ngMinErr("areq", "Argument '{0}' is {1}", name || "?", reason || "required");
        return arg
    }
    
    function assertArgFn(arg, name, acceptArrayAnnotation) { 
        return acceptArrayAnnotation && isArray(arg) && (arg = arg[arg.length - 1]), assertArg(isFunction(arg), name, "not a function, got " + (arg && "object" == typeof arg ? arg.constructor.name || "Object" : typeof arg)), arg
    }

其实就是处理数组中最后的元素，而最后的元素是个函数

![image][image 1]  
createInternalInjector返回一个对象如下

return { 
        invoke: invoke,
        instantiate: instantiate,
        get: getService,
        annotate: annotate,
        has: function(name) { 
            return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name)
        }
    }

里面有五个方法invoke，instantiate，get，annotate，has  
**annotate**已经详细介绍过了，就是获取函数的参数  
**instantiate**则是用来实例化一个对象  
**get**用来获得一个服务的实例对象  
**invoke**用来调用一个函数

首先分析invoke函数

首先把函数的fn的`$inject = annotate(fn);`参数用annotate以数组形式保存在$inject里面  
再验证函数的参数

for (i = 0, length = $inject.length; length > i; i++) { 
        if (key = $inject[i], "string" != typeof key) throw $injectorMinErr("itkn", "Incorrect injection token! Expected service name as string, got {0}", key);
        args.push(locals && locals.hasOwnProperty(key) ? locals[key] : getService(key))
    }

不正确注册签名，服务名称应该为字符串**Incorrect injection token! Expected service name as string**  
然后判断是否有传入locals，如果有则判断它的属性是否含有fn函数的参数，如果有并且包含这些参数然后把他们保存到args数组里面

例如angular在bootstrap方法中调用invoke函数

injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', '$animate',
        function(scope, element, compile, injector, animate) { 
            scope.$apply(function() { 
                element.data('$injector', injector);
                compile(element)(scope);
            });
        }]
    );
    return injector;

开始args.push(getService( r o o t S c o p e ) ) , a r g s . p u s h ( g e t S e r v i c e ( rootScope)),args.push(getService( rootScope)),args.push(getService(rootElement))…  
然后判断fn. i n j e c t ∣ ∣ ( f n = f n \[ l e n g t h \] ) ， 如 果 是 数 组 的 话 就 会 拿 数 组 最 后 一 个 ， 也 就 是 传 入 最 后 的 那 个 函 数 赋 给 f n 然 后 进 入 因 为 没 有 传 入 s e l f 所 以 ‘ s e l f ? − 1 : a r g s . l e n g t h ‘ s e l f 就 是 − 1 ， 就 是 走 d e f a u l t 分 支 ‘ r e t u r n f n . a p p l y ( s e l f , a r g s ) ‘ ， 如 果 s e l f 有 值 得 话 其 实 很 好 理 解 就 是 把 ‘ inject || (fn = fn\[length\])，如果是数组的话就会拿数组最后一个，也就是传入最后的那个函数赋给fn 然后进入因为没有传入self所以\`self ? -1 : args.length\`self就是-1，就是走default分支\`return fn.apply(self, args)\`，如果self有值得话其实很好理解就是把\` inject∣∣(fn=fn\[length\])，如果是数组的话就会拿数组最后一个，也就是传入最后的那个函数赋给fn然后进入因为没有传入self所以‘self?−1:args.length‘self就是−1，就是走default分支‘returnfn.apply(self,args)‘，如果self有值得话其实很好理解就是把‘inject = annotate(fn),key =  i n j e c t \[ i \] ‘ a n n o t a t e 函 数 拿 到 的 参 数 一 个 一 个 的 传 进 去 f u n c t i o n ( ) 里 面 ， 然 后 后 面 的 i n j e c t o r . i n v o k e ( \[ ′ inject\[i\]\`annotate函数拿到的参数一个一个的传进去function()\{\}里面，然后后面的injector.invoke(\[&\#x27; inject\[i\]‘annotate函数拿到的参数一个一个的传进去function()里面，然后后面的injector.invoke(\[′rootScope’, ‘ r o o t E l e m e n t ′ , ′ rootElement&\#x27;, &\#x27; rootElement′,′compile’, ‘ i n j e c t o r ′ , ′ injector&\#x27;, &\#x27; injector′,′animate’,**function(scope, element, compile, injector, animate) \{\})**’\])的回调函数就可以在执行的时候调用里面的依赖  
我写了个简单的流程来模仿invoke函数实际上做了什么如下

最后执行的打印结果是运行了闭包函数并输出apply后`'wsccat','wscats'`的两个参数  
![image][image 2]  
实际上apply会执行匿名函数一次，此时的匿名函数fn()\{\}已经有了wsccat,wscats两个参数了

get就是createInternalInjector里面的getService闭包函数  
后面是这样调用的`var provider = providerInjector.get(servicename + providerSuffix);`  
也就是相当于var provider = providerInjector.get(servicename + ‘Provider’);

function getService(serviceName) { 
        if (cache.hasOwnProperty(serviceName)) { 
            if (cache[serviceName] === INSTANTIATING) throw $injectorMinErr("cdep", "Circular dependency found: {0}", path.join(" <- "));
            return cache[serviceName]
        }
        try { 
            return path.unshift(serviceName), cache[serviceName] = INSTANTIATING, cache[serviceName] = factory(serviceName)
        } finally { 
            path.shift()
        }
    }

先看看在执行getService时候，createInternalInjector函数体里有个path = \[\]，path的数组  
首先执行这个函数前要用到createInternalInjector函数传入的参数createInternalInjector(cache, factory)，cache和factory，比如下面的这句

createInternalInjector(providerCache, function() { 
        throw $injectorMinErr("unpr", "Unknown provider: {0}", path.join(" <- "))
    }),

providerCache对象是下面这个

这些参数再放到闭包函数getService里面执行

createInjector方法里面，其实是通过createInternalInjector方法来创建注入器的。

var INSTANTIATING = { }, providerSuffix = "Provider",
    path = [],
    loadedModules = new HashMap,
    providerCache = { 
        $provide: { 
            provider: supportObject(provider),
            factory: supportObject(factory),
            service: supportObject(service),
            value: supportObject(value),
            constant: supportObject(constant),
            decorator: decorator
        }
    }, providerInjector = providerCache.$injector = createInternalInjector(providerCache, function() { 
        throw $injectorMinErr("unpr", "Unknown provider: {0}", path.join(" <- "))
    }),
    instanceCache = { }, instanceInjector = instanceCache.$injector = createInternalInjector(instanceCache, function(servicename) { 
        var provider = providerInjector.get(servicename + providerSuffix);
        return instanceInjector.invoke(provider.$get, provider)
    });

这里会用createInternalInjector方法创建两个$injector对象  
**providerInjector是用来创建provider的，instanceInjector是用来创建一个对象实例的。**  
第一个创建providerInjector对象

providerInjector = providerCache.$injector = createInternalInjector(providerCache, function() { 
        throw $injectorMinErr("unpr", "Unknown provider: {0}", path.join(" <- "))
    })

实际上providerCache就变成了这样

providerCache = { 
        $provide: { 
                provider: supportObject(provider),
                factory: supportObject(factory),
                service: supportObject(service),
                value: supportObject(value),
                constant: supportObject(constant),
                decorator: decorator
              }
        },
        $injector:{ 
              get:getService,
              annotate:annotate,
              instantiate:instantiate,
              invoke:invoke,
              has:has
        }
    }

而providerInjector变成了这样

providerInjector：{ 
          nvoke: invoke,
          instantiate: instantiate,
          get: getService,
          annotate: annotate,
          has: has
    }

第二个创建instanceInjector对象

instanceInjector = instanceCache.$injector = createInternalInjector(instanceCache, function(servicename) { 
        var provider = providerInjector.get(servicename + providerSuffix);
        return instanceInjector.invoke(provider.$get, provider)
    })

实际上instanceCache就变成了这样

instanceCache：{ 
          $injector:{ 
              invoke: invoke,
              instantiate: instantiate,
              get: getService,
              annotate: annotate,
              has: has
          }
    }

而instanceInjector变成了这样

instanceInjector = { 
          invoke: invoke,
          instantiate: instantiate,
          get: getService,
          annotate: annotate,
          has: has
    }

从angular源码可以知道，创建provider的这几种方式：provider/factory/service/constant/value，左往右灵活性越低，provider方法是基础，其他都是调用provider方法实现的，只是的参数不一样而已

[Angular_setupModuleLoader]: https://github.com/Wscats/Good-text-Share/issues/25
[image]: /images/20220722/2193525f64c24f2a8d4203215ae61706.png
[image 1]: /images/20220722/f0f1f5e1f2e445268c23b4f7d0595354.png
[image 2]: /images/20220722/382e29e31cdb40fca64ed281907759de.png