处理require.js中未定义的依赖项

Question

我正在尝试修改我的代码，使其适用于Require.js，但我遇到了一些问题，其中某些依赖项未定义，我相信它们应该是。

以下文件给出了一个最小的工作示例：

main.js：

// Configure require.js
requirejs.config({
  baseUrl: "js/app",
});

require(["app"], function(app) {
  app.init();
});

app.js：

define( ["container", "renderer"], function ( CONTAINER, RENDERER) {
  return {
    init: function () {
      CONTAINER.init();
      RENDERER.init();
      console.log(CONTAINER, RENDERER)
    },
  }
});

container.js：

define( ["renderer"], function ( RENDERER ) {
  // define container
  var container = new Object();
  return {
    container: container,
    init: function() {
      console.log(RENDERER)
    },
  }
});

renderer.js：

define( ["container"], function ( CONTAINER ) {
  var renderer = new Object();
  return {
    renderer: renderer,
    init: function() {
      console.log(CONTAINER);
    },
  }
});

问题在于renderer.js CONTAINER是undefined。控制台在浏览器中运行时显示：

CONTAINER为什么undefined renderer.js在app.js中定义得很好？

Answer 1

容器和渲染器之间的循环引用。

我记得require.js特别不允许这样的循环引用，其中容器需要渲染器和渲染器需要容器。

如果您希望通过让app在渲染器或容器中设置属性（例如，通过调用类似...的函数）来解决对象之间的循环引用，则需要限制它们。

CONTAINER.init(RENDERER)

...来自App ......

为简洁起见，省略了关于循环引用的弊端的强制性详细警告。