Browserify 在多个 require 调用上只执行一次模块代码

Question

app.js

var MedicineManager = new Marionette.Application();

MedicineManager.addRegions({
    mainRegion: "#main-region"
});

MedicineManager.navigate = function (route, options) {
    options || (options = {});
    Backbone.history.navigate(route, options);
};

MedicineManager.getCurrentRoute = function () {
    return Backbone.history.fragment;
};

MedicineManager.on("start", function () {
    if (Backbone.history) {
        Backbone.history.start();
    }
});

$(function () {
    MedicineManager.start();
})

module.exports=MedicineManager;

我正在尝试将我的应用从 Marionette 模块模式转移到 Browserify。

我在多个文件中调用 require('app')，这会导致 app.js 中的代码在每次调用 require('app') 时都会执行。

因此，我收到Backbone.history has already been started 的错误。 这个问题的解决方法是代码在初始化时只被调用一次。

我该如何解决？

Answer 1

您不想将require 用于实例化对象。它可以使用，但经验表明，虽然模块导出应该被缓存，但在很多情况下它不是并且会引发错误。我发现最好将require 用于静态对象/方法。确保单例的最佳方法是在根方法中实例化，然后将实例传递给需要它的模块。

如果您想使用require 重构现有代码库，您可以将实例化对象绑定到全局对象（如window），然后在您的启动部分中检查该对象在该全局上的实例对象并返回它。

module.exports = function () {
    if (!window.__medicineManager){
        var MedicineManager = new Marionette.Application();

        MedicineManager.addRegions({
            mainRegion: "#main-region"
        });

        MedicineManager.navigate = function (route, options) {
            options || (options = {});
            Backbone.history.navigate(route, options);
        };

        MedicineManager.getCurrentRoute = function () {
            return Backbone.history.fragment;
        };

        MedicineManager.on("start", function () {
            if (Backbone.history) {
                Backbone.history.start();
            }
        });

        MedicineManager.start();
        window.__medicineManager = MedicineManager;
    }
    return window.__medicineManager;
}()

---

更新：

顺便说一句，Browerify 似乎特别有这个问题（比 CommonJS 或 WebPack 更多）。也许迁移到不同的模块系统会为您解决这个问题。最终，问题仍然是实例化模块有点滥用模式。虽然污染全局范围并不理想，但我认为它更接近您想要的单例模式，并且无论构建工具的特定模块缓存方法如何，它都将始终有效。