require.js + Backbone.js的：如何构建有一个初始化功能模块？ [英] require.js + backbone.js: How to structure modules that have an initialize function?

问题描述

我有三个页面（这是单页界面）的应用程序。该网页有相似但不完全相同的功能。

I have an application with three pages (which are single-page interfaces). The pages have similar but not identical functionality.

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

So I want to have javascript-modules that provide the common functionality. Then each page may customize/overwrite parts of the common functionality.

我使用Backbone.js的，所以我做的是：

I'm using backbone.js, so what I do is:

1. 加载包含常见的模型文件，浏览，收藏等。


2. 加载应用程序特定的文件定义的步骤1 /覆盖部分


3. 调用instanciates所有必要的模型/查看/收藏的init（）函数

目前，我存储我的模块，类似于这样一个模块容器： http://stackoverflow.com/a/9426071
每个模块都有由我的主要init（）函数中执行一个可选的init（）函数。

At the moment I store my modules in a module-container similar to this: http://stackoverflow.com/a/9426071 Each module has an optional init() function that is executed by my main init() function.

例如：

1. 我有一个名为results.js文件。它定义了常见的型号/系列/搜索结果观。在它的init（）函数一切都实例化，但这个功能尚未名为：

1. I have a file called results.js. It defines the common Model/Collection/View of search-results. In its init() function everything is instanciated, but this function is not yet called:

var resultView = new ResultView()

然后我有myApp.js，并覆盖查看的部分。

Then I include myApp.js, and parts of the View are overwritten.

现在我想切换到require.js，而不是我自己的模块容器，并想知道如何安排我的code。

Now I want to switch to require.js instead of my own module-container, and wonder how to organize my code.

我既可以实例化的所有模型/视图等。myApp.js，而不是每个模块的init（）函数。这意味着有大量的重复code的。

I could either instanciate all models/views etc. in myApp.js instead of the init() function of each module. This would mean to have a lot of repetitive code.

或者，我可以坚持到每个模块有它的init（）函数，调用这些的init（）函数myApp.js。我不喜欢这一点，因为我会到我的模块明确地写下来三次，每次我的三个页面：

Or I could stick to each module having its init() function, and call those init() functions in myApp.js. I don't like this because I would have to explicitly write down my modules three times for each of my three pages:

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

有关10个模块加上一个数字图书馆，这不是很干爽。有没有什么办法来访问（通过循环）的require.js所有模块持有？

For 10 modules plus a number of libraries this is not nice and DRY. Is there any way to access (loop over) all modules that require.js holds?

还是我失去了一些东西，我应该构建我的code以不同的方式？

Or am I missing something, should I structure my code in a different way?

任何提示/想法是受欢迎的，

Any hints/thoughts are welcome,

迈克尔

推荐答案

正如上述评论的讨论，你可以避免使用的 参数对象。所以：

As discussed in the comments above, you can avoid having to explicitly reference the parameters of the function by looping over them using the arguments object inside the function body. So:

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加（）检查里面的在循环，因为，对于一些原因，这是好的做法。此外，您会看到的init 明确检查试图调用它之前是一个功能。

I added in a hasOwnProperty() check inside the for in loop because, for a number of reasons, it's good practice. Also, you'll see the explicit check for init being a function before attempting to call it.

原因变参=参数是这样你就可以从内部函数引用它 - 否则你会被引用传递给初始化参数（），这是不是你想要的。

The reason for var args = arguments is so you can reference it from the inner function - otherwise you would be referencing the arguments passed to init(), which is not what you want.

由于和一边，在一个建筑的水平，我想你所描述的项目结构的成效斐然， - 我把它用在了很多非常大的项目，它从来没有让我失望。 Require.js是真棒！ ：）

As and aside, on an architectural level, I think the project structure you've described works incredibly well - I use it on a lot of very big projects and it's never let me down. Require.js is awesome! :)

这篇关于require.js + Backbone.js的：如何构建有一个初始化功能模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！