使用jQuery，AMD和require.js进行事件处理

Question

我对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);});

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

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

Answer 1

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

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