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

Question

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

以下测试代码没有像我们预期的那样工作：

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

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

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

我想知道如何实例化多个应用并为它们设置不同的配置？

项目结构类似于：

/main.js

require.config({
    ....
});

/*code to create multiple instances*/

      require(["app"], function(app){ 
    var instance = new app(color:"yellow"); 
    var instance2 = new app(color:"red"); 

       instance.render();
       instance2.render();
       /*want to create multiple instances here to same page*/
    })
/*above code is not working, TypeError: app is not a constructor*/

/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;
});

/models/app.js

/views/app.js

/view/bags.js

/view/bag（通过 var app = require("app") 引用 app，以便访问 app.color）

/收藏/包

/模型/包

我用r.js把所有的js编译成一个

node 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 有问题，它需要访问 app 中的自定义变量。我使用 var app = require("app");控制台.log(app.testData);但是输出是未定义的。是否有其他方式访问应用实例？

另外，如果require("app")，如果有多个app实例会不会出问题？

Answer 1

问题是，require 是一个异步函数，不会立即执行，当它最终执行时，i 的值会发生变化。最终，您的所有实例将共享相同的 i 值，因为循环将在第一个 require 回调执行之前完成。 See here.

您可以通过围绕循环的每次迭代创建闭包来解决此问题。这样i 的原始值就会保留在 require 回调的范围内。

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