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

【问题标题】：How do I go about cross-module callback/event handling with RequireJS如何使用 RequireJS 进行跨模块回调/事件处理
【发布时间】：2013-12-04 23:55:51
【问题描述】：

我很喜欢 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...");
    });
}

谢谢！

【问题讨论】：

标签： javascript jquery callback requirejs

【解决方案1】：

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

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

我在调用之前添加了一个赋值给self，并在回调中使用self 而不是this。 jQuery documentation 上的这个值：

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

【讨论】：

【解决方案2】：

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

jqObj.click(evtHandler.bind(this);

【讨论】：

【解决方案3】：

好的，毕竟这不是回调的模块化范围问题。

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

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

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

还是谢谢:)

【讨论】：