Javascript 具有require.js的多个小部件实例

我们用主干和require.js构建了一个小部件应用程序。它在页面上的一个应用程序实例上运行很酷。现在我们有了新的要求。我们需要在同一页面上运行多个小部件实例。每个应用程序都有自己的配置

以下测试代码未按预期工作：

for(var i=0;i<3;i++){

    require([ "app" ], function(app) {
        var bootstrap = {};
        jQueryPB(function() {

            app.testData = i;
            app.startup();
        });
    });
}

/app.js

define([ "jQueryPB", "backbone", "underscore", "models/app", "views/app" ], function($jpb,
        Backbone, _, appModel, appView) {

    var appInfo = new appModel();
    var app = new appView({
        model : appInfo
    });

    return app;
});

/模型/app.js

/视图/app.js

/view/bags.js

/查看/打包（它通过var app=require（“app”）引用app，以便访问app.color）

/收集/袋

/型号/袋

我使用r.js将所有js编译成一个

节点r.js-o build.js optimize=none

完全下载main.js后，它将开始初始化不同的应用程序实例

========================================================================================更新的代码

酷。我用类似的方法尝试过：

main.js

require(["app"], function(app){ 
var instance = new app({
        testData : 1
});
   instance.testData = "1"; 
   instance.startup();

})

app.js

define([ "jQueryPB", "backbone", "underscore", "models/app", "views/app" ], function($jpb,
        Backbone, _, appModel, appView) {

    return function app(color) {
        var appInfo = new appModel();
        var app = new appView({
            model : appInfo
        });
        console.log(">>"+color.testData);
        app.testData = color.testData;
        return app;
    };

});

bag.js中存在一个问题，它需要访问应用程序中的自定义变量。我使用var app=require（“app”）；console.log（app.testData）；但是输出是未定义的。是否有其他方式访问应用程序实例

---

此外，如果require（“app”），如果有多个app实例，是否会导致问题？

问题是，

require

作为一个异步函数，不会立即执行，当它最终执行时，

i

的值将发生变化。最终，您的所有实例都将共享相同的

i

，因为循环将在执行第一个

require

回调之前完成

您可以通过围绕循环的每个迭代创建一个闭包来解决这个问题。这样，

i

的原始值将保留在require回调的范围内

for (var i = 0; i < 3; i++) {
    (function (i) {
        require(["app"], function (app) {
          // etc  
        });
    })(i);
}

for（变量i=0；i<3；i++）{
（职能（一）{
要求（[“应用程序”]，功能（应用程序）{
//等
});
})（i） )；
}

hi Levi，你的方法很有效。但我注意到了另一个问题。现在的问题是，我们通过以下方式引用其他模块中的应用程序：var app=require（“app”）。因此，在其他模块中检索到的所有应用程序对象都是最后创建的（i=2）。我们需要的是创建一个可以在同一页面上多次使用的应用程序。每个应用程序都将设置不同的参数。例如，页面上有多个选项卡，每个选项卡都有自己的应用程序和自己的自定义数据。思想？谢谢，听起来你的应用程序模块正在返回一个对象文本。您希望返回一个构造函数，然后可以在需要时对其进行实例化，并向其传递必要的参数。类似于

require（[“app”]，function（app）{var instance=new app（myParams）；}）

这样，各个实例将不会共享状态。请为您的进一步问题创建一个新问题，因为它超出了当前问题的范围。谢谢levi，我打开了一个新问题

for (var i = 0; i < 3; i++) {
    (function (i) {
        require(["app"], function (app) {
          // etc  
        });
    })(i);
}