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

【问题标题】：Dealing with undefined dependencies in require.js处理 require.js 中未定义的依赖项
【发布时间】：2016-02-15 16:20:42
【问题描述】：

我正在尝试修改我的代码，使其与 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 中定义得很好？

【问题讨论】：

避免循环依赖:) stackoverflow.com/questions/4881059/…

标签： javascript requirejs

【解决方案1】：

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

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

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

CONTAINER.init(RENDERER)

...从应用内...

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

【讨论】：