使用requireJS时如何监听全局事件答案

【问题标题】：How to listen to global events when using requireJS使用requireJS时如何监听全局事件
【发布时间】：2014-05-20 07:07:58
【问题描述】：

假设我的脚本中有以下内容。

document.addEventListener('DOMContentLoaded', function() {
  alert("DOM loaded!");
});

我把上面的定义函数附在requirejs里面。

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone) {
  document.addEventListener('DOMContentLoaded', function() {
    alert("DOM loaded!"); // I AM NEVER CALLED :(
  });
});

在 requireJS 加载脚本中定义的模块时，似乎 DOM 内容已经加载。当我必须听像youtubeIframeAPIReady 这样的其他全局事件时，同样的问题仍然存在。使用 requireJS 时解决此类问题的约定是什么？

【问题讨论】：

标签： javascript jquery requirejs

【解决方案1】：

处理DOMContentLoaded 的标准方法是使用jQuery 的$.ready，如果你不使用jQuery，则使用RequireJS 的domReady 插件。（好吧，即使您正在使用 jQuery，您也可以使用 domReady，但我看不出有什么意义。）jQuery 和 domReady 都能够处理在使用这些方法之前发生 DOMContentLoaded 的情况。

使用 jQuery，您的代码将变为：

define([
  'jquery',
  'underscore',
  'backbone',
], function($, _, Backbone) {
  $(function() {
    alert("DOM loaded!");
  });
});

上面的代码使用一个函数调用$，这是使用$.ready 的一种缩写方式。使用domReady，您可以这样做：

define([
  'jquery',
  'underscore',
  'backbone',
  'domReady!',
], function($, _, Backbone) {
    alert("DOM loaded!");
});

使用这种方式，define 的回调中的代码在 DOM 加载之前不会执行。

我不知道 youtubeIframeAPIReady 的等价物。

【讨论】：