处理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 。 在浏览器中运行时，控制台将显示以下内容：

为什么在renderer.js undefined CONTAINER ，而在app.js却定义了CONTAINER呢？

Answer 1

容器和渲染器之间的循环参考。

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

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

CONTAINER.init(RENDERER)

...从App内...

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