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

时间:2012-06-12 11:24:06

标签: javascript jquery closures

通过在JavaScript中使用闭包实现回调和事件处理程序附件,我们可以获得什么价值。我知道jQuery广泛使用这种模式但想了解原因吗?

3 个答案:

答案 0 :(得分:2)

将闭包指定为回调可让您访问其中定义的作用域。它还有助于保持名称空间的清洁。其他库允许您将对象方法绑定为事件处理程序,从而为对象提供事件访问权限,这是一种非常优雅的替代解决方案。例如,可能是这样的:

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

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

答案 1 :(得分:0)

是的,你可能会在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);
})

答案 2 :(得分:0)

我不确定你真正理解你需要什么。 闭包不是jQuery系统,它是主要的核心或Javascript。

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

我知道从PHP这样的阻塞语言调用函数时可能会感到沮丧,并且在执行操作时执行下面的行。但这是Javascript哲学。不要等到你可以做其他事情,只要能够在调用此事件或此事件时弹出。

通常,对于点击/更改输入/提交表单等事件,您不能等待并阻止所有代码,直到弹出一些操作。因此,请为每个您想要了解的事件安排一名听众,并继续前进。