使用jQuery、AMD和require.js处理事件

Event handling with jQuery, AMD and require.js

本文关键字：require js 处理事件 AMD jQuery 使用      更新时间：2023-09-26

我是AMD和require.js的新手，并且几乎在一天多的时间里一直在努力解决一个小问题。我试过不同的方法，但不确定什么是正确的方法。我希望能从所有JavaScript大师那里得到一些反馈。

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

自定义模块如下:

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

另外，如果我使用这样的结构，我如何管理变量和在所有闭包之间传递数据?内部闭包似乎不能访问外部闭包或函数中的变量。

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

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

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

相关文章：