我有一个有三个页面的应用程序(它们是单页面接口)。这些页面具有相似但不完全相同的功能。
因此,我希望拥有提供通用功能的javascript模块。然后,每个页面可以自定义/覆盖通用功能的部分。
我正在使用backbone.js,所以我所做的是:
- 加载包含常见模型、视图、集合等的文件
- 加载自定义/覆盖步骤1部分的应用程序特定文件
- 调用一个init()函数,该函数用于实例化所有必需的模型/视图/集合
目前,我将模块存储在类似于以下内容的模块容器中:https://stackoverflow.com/a/9426071每个模块都有一个可选的init()函数,由我的主init()功能执行。
示例:
-
我有一个名为results.js的文件。它定义了搜索结果的通用模型/集合/视图。在它的init()函数中,所有东西都被实例化,但这个函数还没有被调用:
var resultView = new ResultView()
-
然后我包括myApp.js,并且视图的部分内容被覆盖。
- main init()函数调用results.js init(),以初始化新视图。一切都很好,光滑,干燥
现在我想切换到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个模块加上一些库来说,这是不好的,而且很枯燥。有什么方法可以访问(循环)require.js持有的所有模块吗?
或者我遗漏了什么,我应该用不同的方式构建代码吗?
欢迎任何提示/想法,
Michael
正如上面的注释中所讨论的,通过使用函数体内的arguments
对象对函数的参数进行循环,可以避免显式引用函数的参数。因此:
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};
});
我在for in
循环中添加了hasOwnProperty()
检查,因为出于多种原因,这是一种很好的做法。此外,在尝试调用init
之前,您会看到它是一个函数的显式检查
var args = arguments
的原因是,您可以从内部函数引用它——否则,您将引用传递给init()
的参数,这不是您想要的。
顺便说一句,在建筑层面上,我认为你所描述的项目结构非常好——我在很多非常大的项目中都使用了它,它从未让我失望。Require.js太棒了!:)