使用 jQuery、AMD 和 require.js 进行事件处理答案

【问题标题】：Event handling with jQuery, AMD and require.js使用 jQuery、AMD 和 require.js 进行事件处理
【发布时间】：2014-06-17 06:46:50
【问题描述】：

我对 AMD 和 require.js 非常陌生，并且几乎一天多来一直在努力解决一个小问题。我尝试了不同的方法，但不确定什么是正确的方法/正确的方法。我会感谢所有 JavaScript 专家的反馈。

我正在尝试为将侦听任何输入/更改的文本框实现事件处理程序。在事件处理程序中，我想更新当前显示在地图上的标记。因此，我定义了两个模块 - 为 openlayers 开放，一个包含用于显示地图、更新标记等的自定义代码。

自定义模块如下所示：

define('mymodule', [ 'open-layers', 'jquery', 'openstreetmaps','t5/core/console' ], function(
    openLayers, $,openStreetMaps ,console) {

    var init = function() {

    }
    var listenForChange = function(clientId) {
        clientId = clientId;
        var textBox = $(document.getElementById(clientId));
        console.debug(textBox);

        $('#addressLineTwo').on('change paste keypress input', function() {
            console.debug(textBox);
            console.debug('OnChange');
            console.debug($(this));
            console.debug($(textBox).val());
            openstreetmaps.clearMarkersAndShowAddress();
        });
    }
    return {
        init: init,
        listenForChange: listenForChange
    };
});

问题是，当事件处理程序因文本字段中的输入而被调用时，定义为“on”方法处理程序的函数中的openstreetmaps 变量是undefined。

我能解决这个问题的唯一方法就是将该行更改为这样的：

  require(['openstreetmaps'], function(openstreetmaps) { openstreetmaps.clearMarkersAndShowAddress(newAddress);});

另外，如果我使用这样的构造，我如何管理变量并在所有这些闭包之间传递数据？似乎内部闭包无法访问外部闭包或函数中的变量。

非常感谢您的帮助和反馈。

【问题讨论】：

标签： javascript jquery requirejs openstreetmap js-amd

【解决方案1】：

您的其他模块中的变量可以从事件处理程序中访问，您只需将openStreetMaps 的define 函数参数更改为openstreetmaps。这就是为什么额外的require 调用有效的原因；您只需要将变量命名与所需模块匹配即可。

为了管理变量，只需通过从模块中返回它们来公开所有公共变量，这些公共变量可以访问模块中定义的任何内容，从而创建一个闭包。每个模块只注册一次，因此您可以在每个模块中保留您想要的任何状态。

【讨论】：