angularjs源码笔记(2)--loader modules

最新推荐文章于 2024-05-27 09:45:03 发布

weixin_33736048

最新推荐文章于 2024-05-27 09:45:03 发布

阅读量297

点赞数

文章标签： javascript python 数据结构与算法 ViewUI

原文链接：https://my.oschina.net/alexqdjay/blog/734151

版权

2019独角兽企业重金招聘Python工程师标准>>>

简介

ng提供模块管理，所有的service、ctrl等都是挂在模块上，没有依赖该模块那么这个模块的所有service、ctrl等都不能注入使用。

ng内置一个名为'ng'的模块，一些基础的服务如$http、$filter等都挂上面，默认所有的模块都依赖这个模块。

而实现那些依赖关系、加载先后顺序都是由loader这个模块完成。

源码分析

1. 全部源码

function setupModuleLoader(window) {

  var $injectorMinErr = minErr('$injector');
  var ngMinErr = minErr('ng');

  function ensure(obj, name, factory) {
    return obj[name] || (obj[name] = factory());
  }

  var angular = ensure(window, 'angular', Object);

  angular.$$minErr = angular.$$minErr || minErr;

  return ensure(angular, 'module', function() {
    var modules = {};

    return function module(name, requires, configFn) {
      var assertNotHasOwnProperty = function(name, context) {
        if (name === 'hasOwnProperty') {
          throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context);
        }
      };

      assertNotHasOwnProperty(name, 'module');
      if (requires && modules.hasOwnProperty(name)) {
        modules[name] = null;
      }
      return ensure(modules, name, function() {
        if (!requires) {
          throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " +
             "the module name or forgot to load it. If registering a module ensure that you " +
             "specify the dependencies as the second argument.", name);
        }

        var invokeQueue = [];

        var configBlocks = [];

        var runBlocks = [];

        var config = invokeLater('$injector', 'invoke', 'push', configBlocks);

        var moduleInstance = {
          _invokeQueue: invokeQueue,
          _configBlocks: configBlocks,
          _runBlocks: runBlocks,
          requires: requires,
          name: name,
          provider: invokeLater('$provide', 'provider'),
          factory: invokeLater('$provide', 'factory'),
          service: invokeLater('$provide', 'service'),
          value: invokeLater('$provide', 'value'),
          constant: invokeLater('$provide', 'constant', 'unshift'),
          animation: invokeLater('$animateProvider', 'register'),
          filter: invokeLater('$filterProvider', 'register'),
          controller: invokeLater('$controllerProvider', 'register'),
          directive: invokeLater('$compileProvider', 'directive'),
          config: config,
          run: function(block) {
            runBlocks.push(block);
            return this;
          }
        };

        if (configFn) {
          config(configFn);
        }

        return  moduleInstance;

        function invokeLater(provider, method, insertMethod, queue) {
          if (!queue) queue = invokeQueue;
          return function() {
            queue[insertMethod || 'push']([provider, method, arguments]);
            return moduleInstance;
          };
        }
      });
    };
  });

}

2. 分步解析

2.1 ensure使用

// 如果存在即返回，不存在使用factory创建，并保存
// 多次调用时保证不重复创建，返回同一个对象
function ensure(obj, name, factory) {
  return obj[name] || (obj[name] = factory());
}

// 创建angular实例，为后续angular.module、angular.element等api调用准备
var angular = ensure(window, 'angular', Object);

// 为angular实例创建module属性
ensure(angular, 'module', function() {
  
  // ...

});

2.2 module

function() {
  if (!requires) {
    throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " +
       "the module name or forgot to load it. If registering a module ensure that you " +
       "specify the dependencies as the second argument.", name);
  }

  var invokeQueue = [];

  var configBlocks = [];

  var runBlocks = [];

  var config = invokeLater('$injector', 'invoke', 'push', configBlocks);

  // 返回的实体
  // 对外提供了如factory、service、value等api
  // 然后都调用invokeLater这个方法
  var moduleInstance = {
    _invokeQueue: invokeQueue,
    _configBlocks: configBlocks,
    _runBlocks: runBlocks,
    requires: requires,
    name: name,
    provider: invokeLater('$provide', 'provider'),
    factory: invokeLater('$provide', 'factory'),
    service: invokeLater('$provide', 'service'),
    value: invokeLater('$provide', 'value'),
    constant: invokeLater('$provide', 'constant', 'unshift'),
    animation: invokeLater('$animateProvider', 'register'),
    filter: invokeLater('$filterProvider', 'register'),
    controller: invokeLater('$controllerProvider', 'register'),
    directive: invokeLater('$compileProvider', 'directive'),
    config: config,
    run: function(block) {
      runBlocks.push(block);
      return this;
    }
  };

  if (configFn) {
    config(configFn);
  }

  return  moduleInstance;
}

还有值得一提的是，runBlocks和configFn明确地将过程分为config过程和run过程

2.3 invokeLater

// 延迟执行，现将执行的任务放入queue中，等待需要执行时再从queue中获取执行
// 调用invokeLater完成预注册的功能，等后续get特定module的时候再进行该module及依赖的module上的注册
function invokeLater(provider, method, insertMethod, queue) {
  // 除config外其他所有都放入invokeQueue，config放入configBlocks
  if (!queue) queue = invokeQueue;
  
  return function() {
    // 绝大多数是push，constant是unshift
    // 因为constant是可以在config阶段注入到provider中，所以需要优先处理，故全部unshift到队列头
    queue[insertMethod || 'push']([provider, method, arguments]);
    return moduleInstance;
  };
}

2.4 bootstrap

ng通过bootstrap进行启动

angular.bootstrap('#main', ['mainModule']);

通过bootstrap中加载配置的启动模块并根据注册module的依赖关系进行加载依赖module

// 将ng及$provide放入modules，顺序是 ng -> [$provide,fn] -> mainModule
modules = modules || [];
modules.unshift(['$provide', function($provide) {
  $provide.value('$rootElement', element);
}]);
modules.unshift('ng');

// 主要的加载依赖的逻辑在createInjector，在inject章节中分析
var injector = createInjector(modules, config.strictDi);

// 注入器(injector)执行页面的compile
injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
   function(scope, element, compile, injector) {
    scope.$apply(function() {
      element.data('$injector', injector);
      compile(element)(scope);
    });
  }]
);

2.5 loadModules

通过调用createInjector完成模块加载及处理，那么主要的加载逻辑就在createInjector中，选出其中相关代码 (ps: 本来这部分内容准备在inject中写，想了想还是移到这边)

function loadModules(modulesToLoad){
  var runBlocks = [], moduleFn, invokeQueue;
  forEach(modulesToLoad, function(module) {
    // 判断是否已经加载过，防止重复加载
    if (loadedModules.get(module)) return;
    // 记录加载module
    loadedModules.put(module, true);

    function runInvokeQueue(queue) {
      var i, ii;
      for(i = 0, ii = queue.length; i < ii; i++) {
        // invokeArgs结构例如 [$provider, 'factory', arguments]
        var invokeArgs = queue[i],
            provider = providerInjector.get(invokeArgs[0]);
        // 例如 $provide.factory.apply($provide, arguments);
        provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
      }
    }

    try {
      if (isString(module)) {
        // 获取注册的module实例
        moduleFn = angularModule(module);
        // 递归调用loadModules, 将返回的runBlocks合并起来
        runBlocks = runBlocks.concat(loadModules(moduleFn.requires)).concat(moduleFn._runBlocks);
        // 执行之前需要延迟执行的方法
        runInvokeQueue(moduleFn._invokeQueue);
        runInvokeQueue(moduleFn._configBlocks);
      } 
      // 如果是function或者array都作为runBlock处理
      else if (isFunction(module)) {
          runBlocks.push(providerInjector.invoke(module));
      } else if (isArray(module)) {
          runBlocks.push(providerInjector.invoke(module));
      } else {
        assertArgFn(module, 'module');
      }
    } catch (e) {
      if (isArray(module)) {
        module = module[module.length - 1];
      }
      if (e.message && e.stack && e.stack.indexOf(e.message) == -1) {
        // Safari & FF's stack traces don't contain error.message content
        // unlike those of Chrome and IE
        // So if stack doesn't contain message, we create a new string that contains both.
        // Since error.stack is read-only in Safari, I'm overriding e and not e.stack here.
        /* jshint -W022 */
        e = e.message + '\n' + e.stack;
      }
      throw $injectorMinErr('modulerr', "Failed to instantiate module {0} due to:\n{1}",
                module, e.stack || e.message || e);
    }
  });
  return runBlocks;
}

加载流程

执行 setupModuleLoader() ，准备好angular.module
用户调用 angular.module(moduleName, [], configFn)，创建 module 并且声明依赖关系，返回module的实例，包含 requires 存放依赖，service\factory等方法
用户调用 module.factory 、module.provider 等创建服务，其实这时并没有真正创建，而是将创建的Fn和参数放入queue做了一个预注册连注册都不算，等待后续调用进行注册provider
用户调用 angular.bootstrap('#main', ['mainModule']); 或者 ng-init 中声明启动的入口模块
bootstrap方法中调用 createInjector，createInjector 中通过调用 loadModules 进行模块初始化及加载依赖模块，深度优先策略
先执行各种 provider 的注册，再执行 configFn，返回出收集齐的 runBlocks
这些 runBlocks 将在 createInjector 中执行，有个细节 runBlocks 收集时自己的 runBlocks 永远接在依赖模块的 runBlocks 后面，所以先执行依赖模块的，再执行自己的。