requirejs 两次加载相同的模块

Question

我正在使用 https://github.com/volojs/create-template

中的单页应用程序模板

我试着在下面做了一个简单的例子。

问题

ModuleA.js 被加载两次，一次是直接从 main.js 加载，另一次是从 simulator.js 加载，这也取决于该模块。这导致了对一个对象的两个不同引用（我认为这只会是一个，就像一个单例）。我认为 requirejs 不会加载同一个模块两次。作为 JavaScript 的（相对）新手，我意识到这对我来说可能很天真。我正在尝试遵循模板。

这是演示问题的简化版本：

www/index.html

<head>
...
    <script data-main="app" src="lib/require.js"></script>
</head>
...

www/app.js

// For any third party dependencies, like jQuery, place them in the lib folder.
// Configure loading modules from the lib directory,
// except for 'app' ones, which are in a sibling
// directory.

requirejs.config({
    baseUrl: 'lib',
    paths: {
        app: '../app'
    }
});

// Start loading the main app file. Put all of
// your application logic in there.
requirejs(['app/main']);

www/app/main.js

define(function (require) {
    var simulator = require('./simulator.js');
    var ModuleA = require('./ModuleA.js');

    ModuleA.init();
    ModuleA.displayList();
    ModuleA.update("joe", 99);
    ModuleA.displayList();

    simulator.start(); // should display the same list
});

www/app/ModuleA.js

define(function () {
    var theList = {};
    console.log("loading ModuleA");
    return {
        displayList: function () {
            console.log(Object.keys(theList));
        },
        init : function () {
            theList["fred"] = 10;
        },
        update : function (k, v) {
            theList[k] = v;
        }
    }
});

www/app/simulator.js

define(["./ModuleA"], function (ModuleA) {
  return {
    start: function () {
      ModuleA.displayList();
    }
  };
});

控制台输出：

loading ModuleA
loading ModuleA
["fred"]
["fred", "joe"]
[]

由于 ModuleA.

的第二次加载，最后一行显示的空 []（可能）是列表的第二个副本

Answer 1

如果你想使用 requireJS 共享一个实例化的单例对象，你可以为 ModuleA 做这样的事情：

define(function () {
  console.log("loading ModuleA");
  function myList(){
    this.theList = {}
  } 
  myList.prototype.displayList = function () { 
      console.log(Object.keys(this.theList));
  } 
  myList.prototype.init = function () { 
      this.theList["fred"] = 10;
  } 
  myList.prototype.update = function (k, v) { 
      this.theList[k] = v;
  } 
  return new myList();
});

Answer 2

问题是模块引用不一致。在 main.js 中，它需要 ./ModuleA.js，而在 simulator.js 中，它定义了 ./ModuleA（没有 .js 文件类型）。

使这些引用相同可以更正该模块仅加载一次的行为。

我想我混合了样式，因为网络上有很多示例。以这种方式工作似乎有点像错误，但也许这是一个功能？

requirejs 两次加载相同的模块

requirejs loading same module twice

javascript

singleton

requirejs

问题