如何使用RequireJS进行跨模块回调/事件处理

How do I go about cross-module callback/event handling with RequireJS

本文关键字：模块 回调 事件处理 何使用 RequireJS      更新时间：2024-01-19

我很喜欢RequireJS，终于在Javascript中实现了一些模块化/封装，但在将回调传递给另一个模块时遇到了障碍。

具体来说，我已经为我的应用程序创建了一个菜单模块。它可以由另一个模块加载，您可以使用所述菜单模块中的公开功能添加菜单。

现在，这个菜单项可以有处理程序，例如表单提交或点击。此外，回调通常会访问调用模块中私人/内部定义的函数，即使用菜单函数的函数。

我试过：

  • 在将事件传递给菜单函数之前将其绑定到元素，但这并不起作用
  • 将回调函数作为第二个参数传递，并将其绑定到菜单模块中

这两种方法都不起作用。

有什么想法吗？

有关更多详细信息的一些代码

菜单模块功能 

function addMenuItem(jqObj, evtHandler) {
    console.log("Adding menu " + jqObj);
    jqObj.click(evtHandler);
    menuList.append($("<li>").append(jqObj));
}



使用模块调用菜单中的功能

function addSelectionMenuItem() {
    satInput = $("<input type=search placeholder='search' />");
    menuModule.addMenuItem(satInput, function() {
        this.loadCzml(satInput.val());
        console.log("Checking execution...");
    });
}

谢谢！

我怀疑this是否是事件处理程序中所需的值。将您的呼叫更改为addMenuItem，使其显示为：

var self = this;
menuModule.addMenuItem(satInput, function() {
    self.loadCzml(satInput.val());
    console.log("Checking execution...");
});

我在调用之前向self添加了一个赋值，并在回调中使用self而不是this。jQuery文档关于这个的价值：

当jQuery调用处理程序时，this关键字是对传递事件的元素的引用；对于直接绑定的事件，这是附加事件的元素，而对于委托事件，这则是与selector匹配的元素。

使用.bind（）更改事件处理程序的上下文

jqObj.click(evtHandler.bind(this);

好吧，这毕竟不是回调的模块化作用域问题。

菜单模块中使用的插件使用jquery克隆方法克隆html元素。但是，它没有将参数传递给clone方法，因此它默认不克隆任何处理程序。

这意味着调用模块传递的输入不再是页面上可见的，克隆的版本没有处理程序！

至少这个插件是开源的，所以我可以看到代码。

无论如何都要感谢：）

相关文章：