RequireJS：如何在模块之间传递更新的数据

Question

这是我第一次研究 requirejs。我一直在通过移植我的一个旧项目来做到这一点。到目前为止，进展顺利。到现在为止。

我一直在做的是保留一个站点设置对象，其中包含系统设置，例如窗口高度、窗口宽度、文档高度、滚动顶部等。在那里我使用调整大小和滚动事件更新了这些值。这些总是我可以访问的全局变量。

例如（使用 jQuery）

var mySettingsObject = {};
mySettingsObject.Init = function() {
  this.winWidth = $(window).width();

  $(window).resize(function(e) {
    mySettingsObject.winWidth = $(window).width();
  });
};

$(document).ready(function) {
  mySettingsObject.Init();
});

现在我可以随时从任何函数调用 mySettingsObject.winWidth 来访问该变量，并且它始终是最新的。

我想了解的是如何在 requirejs 中使用模块依赖项来获得相同的行为？

这是我的两个示例模块

define('system', function() {
  // Window settings 
  var winWidth = $(window).width();
  $(window).resize(function(e) {
    winWidth = $(window).width();
  }

  return {
    winWidth: winWidth
  };
		
});


// (is run on dom load)
define('myModule', ['system'], function(system) {
  $(window).on('resize', function() {
    if (system.winHeight === xyz) {
      // do something
    }
  });
});

system.winHeight 按预期工作，并在 dom 加载时为我提供窗口高度。现在，如果我调整浏览器的大小，如何在 myModule 中让该变量自行更新，即如何让两个模块进行通信。

Answer 1

您可以将要导出的值分配给一个对象，这里称为exports，并通过更新该对象上的相应字段来更新新值：

define('system', function() {
  // Window settings 
  var exports = {};
  exports.winWidth = $(window).width();
  $(window).resize(function(e) {
    exports.winWidth = $(window).width();
  }

  return exports;       
});