使用前初始化RequireJS模块

时间:2017-04-19 19:24:53

标签: javascript dependency-injection module initialization requirejs

假设我有三个模块和一个主模块,如下所示:

//Module A
define([''], function(){
   function initialize(param1, param2){
      //initialize stuff
   }
   //other stuff

   return {
      initialize: initialize,
      //whatever else
   };
});

//Module B
define(['ModuleA'], function(ModuleA){
   function initialize(param2, param3){
      //initialize stuff using ModuleA
   }
   //other stuff

   return {
      initialize: initialize,
      //whatever else
   };
});

//Module C
define(['ModuleB'], function(ModuleB){
   function initialize(param4, param5){
      //initialize stuff using ModuleB
   }
   //other stuff

   return {
      initialize: initialize,
      //whatever else
   };
});

//main module
require(['ModuleA', 'ModuleB', 'ModuleC'], function(ModuleA, ModuleB, ModuleC){
   ModuleA.initialize(arg1, arg2);
   ModuleB.initialize(arg3, arg4);
   ModuleC.initialize(arg5, arg6);
});

这里的问题是主模块中所有初始化调用之间存在时间耦合。作为程序员,我必须记住,模块必须按什么顺序进行初始化。如果在ModuleA之前初始化ModuleB,那么它基本上将使用未初始化的模块,因为ModuleA尚未初始化。现在,我可以使用依赖注入,其中我实际上通过initialize方法中的参数传递ModuleB和ModuleC它们的依赖项,但这将破坏处理依赖项的requirejs的目的。我不妨只使用脚本标记并手动传递依赖项,确保每个脚本都是独立的。我有兴趣知道是否有某种其他解决方案。谢谢!

1 个答案:

答案 0 :(得分:0)

您可以在define函数中进行模块初始化,并在define([..]中指定它的依赖项:

//Module A
define(['SomeModule'], function(SomeModule){
  // initialization of the module

  return {
    //initializedModuleInterface..
  };
});

如果您遇到模块之间的循环依赖关系,那么您在模块中返回的界面中可能会遇到第二个模块的需要,直到模块的使用提供了功能,例如,要求它不在define([..]但是当模块本身被使用时:require("a").doSomething();

//Inside b.js:
define(["require", "a"],
    function(require, a) {
        //"a" in this case will be null if "a" also asked for "b",
        //a circular dependency.
        return function(title) {
            return require("a").doSomething();
        }
    }
);

http://requirejs.org/docs/api.html#circular

How to handle circular dependencies with RequireJS/AMD?

初始化参数本身可以是另一个提供配置参数的模块。

编辑1:添加requirejs作为动态模块定义器和加载器的用法

如果需要动态依赖注入机制的结构,您仍然可以使用requirejs。不确定它是否是为它而设计的:

1。如果手头有必要的config var,则通过requirejs

进行动态模块定义

例如:

angular.module('myModule')
.run(function () {
  define('myConf', [], function() {
    return {
      confA: 1,
      confB: 2
    };
  });
});

2。在依赖于myConf模块的模块中,照常执行:

// Module: ModuleA
define(['myConf', function(myConf) {
  // initialization with myConf values.
  console.log(myConf.confA);

  return some_interface;
});

define(function(require) {
  var myConf = require('myConf');
  console.log(myConf.confA);

  // initialization with myConf values.

  return some_interface;
});

3。在应用的生命周期中,当需要ModuleAModuleB ..时:

var moduleReq = 'moduleA';
require([moduleReq], function (moduleA) {
  // doSomething with moduleA
});

这里的诀窍是dynamic defining of a module with a specific name来自define('myConf', [], function() {..})。它允许您在应用程序的生命周期中随时动态地定义模块而无需文件。据我所知,它主要用于requirejs捆绑解决方案。

编辑2:第二种方法 - 在requirejs模块中使用promises作为内部依赖关系管理。

可以使用的另一种方法是在requirejs模块中使用Promise来指定要等待的依赖项。

我们可以将模块主构造定义为promise,并在我们拥有必要的数据时通过接口init函数解析它。

1。我们像往常一样将每个模块指定为系统中的文件。 2。在我们想要动态初始化的confModule中,我们以这种模式构建它:

// confModule
define([], function () {
   var resolveMain;
   var rejectMain;

   var promise = new Promise(resolve, reject) {
       resolveMain = resolve;
       rejectMain = reject;
   }

   return {
       init: function (confVarA, confVarB) {
           try {
             var moduleInitialized = {
               // some preparation of confModule
               confVarA: confVarA,
               confVarB: confVarB
             };
             resolve(moduleInitialized);
           } 
           catch (e) {
              rejectMain(e);
           } 
       },

       then: function (successFn, errorFn) {
          return promise.then(successFn, errorFn);
       } 
   }
});

我们解决了承诺outside of the constructor。附加链接提供了有关该模式的好处和缺陷的更多信息。

3。在依赖模块中,我们以相同的模式定义它们,而不需要init功能,并添加等待confModule的承诺:

// moduleA
define(['confModule'], function (confModule) {
   var resolveMain;
   var rejectMain;

   var promise = confModule.then(function(confModuleData) {
      var moduleBInterface = {
        // prepare module b 
      };

      return moduleBInterface; // this make the promise return another promise to wait on for moduleBInterface return;
   };

   return {
       then: function (successFn, errorFn) {
          return promise.then(successFn, errorFn);
       } 
   }
});

4。在我们的代码中,当我们获得所需的数据时,我们可以将confModule初始化:

define(['confModule', function (confModule) {
   // some async get of confData
   $.get(url, function (data) {
     confModule.init(data.a, data.b);
   });
});

<强> 5。在使用moduleA时的代码中,我们需要将其用作承诺:

define(['moduleA'], fucntion (moduleA) {
  moduleA.then(function (moduleAInteface) {
    // do something with moduleA.
  });
});