我有一个有三个页面的应用程序(单页界面)。页面具有相似但不相同的功能。
所以我想拥有提供常用功能的javascript模块。然后,每个页面可以自定义/覆盖部分常用功能。
我正在使用backbone.js,所以我所做的是:
目前我将模块存储在类似于此的模块容器中:https://stackoverflow.com/a/9426071 每个模块都有一个可选的init()函数,由我的主init()函数执行。
示例:
我有一个名为results.js的文件。它定义了搜索结果的通用模型/集合/视图。在它的init()函数中,一切都是实例化的,但是这个函数还没有被调用:
var resultView = new ResultView()
然后我包含myApp.js,并覆盖部分视图。
现在我想切换到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所有的模块?
或者我错过了什么,我应该以不同的方式构建我的代码吗?
欢迎任何提示/想法,
迈克尔
答案 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太棒了! :)