3

我目前正在编写一个基本上提供提交表单的 Javascript 模块。

在编写它时，我遇到了似乎是一个经典的范围问题。

我希望该submit()方法进行 AJAX 调用并使用对象方法来处理调用的成功和失败。由于submit()是事件处理程序，this不再设置为flagBox对象。因此，我不再有权访问flagBox.showSuccess()or flagBox.showFail()。

起初，我正在寻找一种方法来设置对象范围的自引用，以便我可以调用类似self.showSuccess().

现在，我jQuery.proxy()用来设置处理程序的上下文。

我还考虑过实现 pub/sub 模式或将方法附加到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);
4

1 回答 1

0

您可以像这样将成功/失败方法绑定到您的对象。这样，总是会使用对象的上下文调用成功/失败方法。

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

            var successFn = (function(obj){
                return function(){
                    return obj.showSuccess.apply(obj, arguments)
                }
            })(this);  

            var failureFn = (function(obj){
                return function(){
                    return obj.showFailure.apply(obj, arguments);
                }
            })(this);  

            $.ajax({
                type:"POST",
                url: '/flag/add.json',
                data: formData,
                success : successFn,
                error : failureFn
            });
        }
    };

    var flagBox = new FlagBox();
    flagBox.init();

})(jQuery);
于 2013-07-22T04:53:04.170 回答