为什么使用 JavaScript 闭包实现回调和事件处理程序附件

why to implement callbacks and event handler attachment using javascript closures?

本文关键字：事件处理 程序 回调 实现 JavaScript 闭包 为什么      更新时间：2023-09-26

通过在 JavaScript 中使用闭包来实现回调和事件处理程序附件，我们得到什么值？我知道jQuery广泛使用这种模式，但想了解为什么？

将闭包指定为回调使您可以访问在其中定义的范围。它还有助于保持命名空间干净。其他库允许您将对象方法绑定为事件处理程序，使事件访问对象，这是一个非常优雅的替代解决方案。例如，可能是这样的：

// an object definition
var Accordion = function () {
   this.clickCounter = 0;
};
Accordion.prototype.click = function () {
   this.clickCounter += 1;
   alert( this.clickCounter );
};
// create object
var myAccordion = new Accordion();
// function to bind DOM element events to javascript object methods
function methodBind ( element, eventType, myObject, myMethod ) {
   $( element ).bind( eventType, function(e) {
      e.preventDefault();
      myObject[myMethod ].call(myObject);
   } );
}
// bind buttons on an element to activate a correlating object method
$( '.Accordion' ).find( '.button' ).each( function() {
   methodBind( this, 'click', myAccordion, 'click' );
} );

虽然我的实现也使用闭包哈哈。

是的，你可能会得到Esailija描述的，但你也可以拯救一些小猫。闭包中的事件处理程序允许您访问本地范围。所以而不是

var uselessMap = {};
function myListener(e) {
    alert(uselessMap[e.target.id].foo);    
}
items.forEach(function(item) {
    var el = document.createElement('div');
    el.innerText = item.name;
    el.id = item.id;
    el.addEventListener('click', myListener, false);
})

你只需要这个：

items.forEach(function(item) {
    var el = document.createElement('div');
    el.innerText = item.name;
    el.addEventListener('click', function(e) {
        alert(item.foo);
    }, false);
})

我不确定是否真正了解您的需求。闭包不是jQuery系统，它是主要的核心或Javascript。

问题是Javascript是一种基于语言事件的语言。当你进行 ajax 调用时，你的 javascript 将继续运行，而不是停止期待结果。因此，您需要有一个回调方法才能在完成后执行某些操作。

我知道当来自像 PHP 这样的阻塞语言时可能会令人沮丧，您调用一个函数并在操作完成后执行下面的行。但这是Javascript的哲学。不要等待，而你可以做其他事情，只要能够在调用这个或这个事件时弹出。

通常，对于单击/更改输入/提交表单等事件，您不能等待并阻止所有代码，直到弹出某些操作。因此，在您想收听的每个事件上附加一个听众并继续您的方式。

相关文章：