在 AMD 模块中将 JavaScript 事件放在哪里？

Posted 2023-02-24

【中文标题】在 AMD 模块中将 JavaScript 事件放在哪里？

【英文标题】：Where to put javascript events in AMD modules?

【发布时间】：2013-07-07 18:05:06

【问题描述】：

我正在使用 requirejs

将大量 .js 文件转换为 AMD 模块

我实现了返回函数等很多链接类的概念，但是，我如何处理诸如：

$('blah blah').onClick( ...

$('blah blah 2').onChange( ...

我是否只是创建一个不返回任何内容的模块？处理这类事情的最佳方法是什么？

【问题讨论】：

我发布了一个包含一些一般性想法的答案，但如果您描述了您为模块使用的组织方案类型（例如每个模块将要做什么），这将有助于缩小建议范围

【参考方案1】：

如果您只想执行一次，在应用程序初始化时，只需将其放入模块的主体中​​，不要返回任何内容：

define([...], function() 
  // All code here will be executed once at initialization.
);

只要您导入该模块，所有主体代码都将执行一次。这对 jQuery 选择器来说是个坏主意，因为无法保证 DOM 在评估时会正确加载。

如果你需要手动调用你的代码一次或多次，把它封装在一个对象中，你可以在需要的时候导入并调用它：

define([...], function() 
  return 
    registerEvents : function () 
      // All code here will be executed when `module.registerEvents()` is called.
    
  ;
);

这将是注册 DOM 事件的正确方法，因为它可以让您更好地控制何时评估它。

【参考方案2】：

由于选择一个元素并使用 jQuery 选择器附加一个处理程序发生在整个文档上，因此从技术上讲，它可以放在任何地方。

我想说这在很大程度上取决于您如何组织模块。

如果您将它们拆分为 MV* 组件，则交互处理程序将进入 V* 部分（例如 Backbone 视图）。

如果您使用其他一些组织方案，通常我会说将处理程序放在它们最紧密绑定的地方。例如，如果模块已经引用了要绑定到的 DOM 元素，则将处理程序放入其中（并使用该特定引用，而不是调用 $() 来遍历文档，可能会拾取不需要的元素）这样您就可以在元素生命周期结束时取消绑定处理程序。