require.js + backbone.js:如何构造具有初始化函数的模块?

时间:2012-07-31 12:54:00

标签: javascript backbone.js requirejs js-amd

我有一个有三个页面的应用程序(单页界面)。页面具有相似但不相同的功能。

所以我想拥有提供常用功能的javascript模块。然后,每个页面可以自定义/覆盖部分常用功能。

我正在使用backbone.js,所以我所做的是:

  1. 加载包含常见模型,视图,集合等的文件。
  2. 加载自定义/覆盖步骤1部分的特定于应用程序的文件
  3. 调用init()函数,该函数实例化所有必需的模型/视图/集合
  4. 目前我将模块存储在类似于此的模块容器中:https://stackoverflow.com/a/9426071 每个模块都有一个可选的init()函数,由我的主init()函数执行。

    示例:

    1. 我有一个名为results.js的文件。它定义了搜索结果的通用模型/集合/视图。在它的init()函数中,一切都是实例化的,但是这个函数还没有被调用:

      var resultView = new ResultView()
      
    2. 然后我包含myApp.js,并覆盖部分视图。

    3. 主init()函数调用results.js init(),它会实现新的View。一切都很好,流畅,干燥。
    4. 现在我想切换到require.js而不是我自己的模块容器,并想知道如何组织我的代码。

      我可以在myApp.js中实例化所有模型/视图等,而不是每个模块的init()函数。这意味着有很多重复的代码。

      或者我可以坚持使用其init()函数的每个模块,并在myApp.js中调用那些init()函数。我不喜欢这个,因为我必须为我的三个页面中的每个页面明确写下我的模块三次:

      require(['module1', 'module2', 'module3', ...],
        function(module1, module2, module3, ...) {
          var init = function() {
            module1.init();
            module2.init();
            module3.init();
            ...
          }
          return {init: init};
        }
      );
      

      对于10个模块加上许多库,这是不好的和DRY。有没有办法访问(循环)require.js所有的模块?

      或者我错过了什么,我应该以不同的方式构建我的代码吗?

      欢迎任何提示/想法,

      迈克尔

1 个答案:

答案 0 :(得分:4)

正如上面的注释中所讨论的,您可以通过使用函数体内的arguments object循环遍历它们来避免显式引用函数的参数。所以:

require(['module1', 'module2', 'module3', ..., 'moduleN'],
  function(module1, module2, module3, ..., moduleN) {
    var init = function() {
        module1.init();
        module2.init();
        module3.init();
        ...
        moduleN.init();
    };
    return {init: init};
});

变为:

require(['module1', 'module2', 'module3', ..., 'moduleN'],
  function() {
    var args = arguments;
    var init = function() {
        var module;
        for (module in args) {
            if (args.hasOwnProperty(module) && typeof module.init === 'function') {
                module.init.call(this);
            }
        }
    };
    return {init: init};
});

我在hasOwnProperty()循环内添加for in项检查,原因有很多,原因是good practice。此外,在尝试调用init之前,您会看到显式检查var args = arguments

init()的原因是你可以从内部函数引用它 - 否则你会引用传递给{{1}}的参数,这不是你想要的。

除了建筑层面之外,我认为你所描述的项目结构非常好 - 我在许多非常大的项目中使用它并且永远不会让我失望。 Require.js太棒了! :)