我正在编写一个Javascript模块,主要提供一个提交表单的功能。
在编写过程中,我遇到了一个看起来很典型的作用域问题。
我希望submit()
方法能够进行AJAX调用,并使用对象方法来处理调用的成功和失败。由于submit()
是一个事件处理程序,因此this
不再设置为flagBox
对象。因此,我无法再访问flagBox.showSuccess()
或flagBox.showFail()
。
起初,我正在寻找一种设置对象范围内自身引用的方式,以便我可以调用类似self.showSuccess()
的方法。
目前,我正在使用jQuery.proxy()
来设置处理程序的上下文。
我还考虑实现发布/订阅模式或将该方法附加到event.data
上。
我很好奇是否存在其他解决方案,以及是否有任何我尚未发现的“最佳实践”。
(function( $ ) {
var FlagBox = function() {};
FlagBox.prototype = {
constructor: FlagBox,
init: function() {
$('.flag-content-box')
.on('submit', $.proxy(this.submit, this));
},
...
showSuccess: function() {
console.log('success');
},
showFail: function() {
console.log('fail');
},
submit: function(event) {
event.preventDefault();
var that = this;
formData = $(event.target).serializeObject();
$.ajax({
type:"POST",
url: '/flag/add.json',
data: formData,
success : function(data) {
that.showSuccess();
},
error : function(jqXHR, textStatus, errorThrown) {
showFail();
}
});
}
};
var flagBox = new FlagBox();
flagBox.init();
})(jQuery);
var that = this;
是一种常见(我认为也是适当的)模式。 - go-oleg