jQuery $ .proxy范围

Question

我有以下代码：

bindEvents: function() {
    $('#weight').click($.proxy(function(){
        this.changeWeight($('#weight').is(':checked'));
    },this));
    $('#produce').change($.proxy(function(){
        this.changeProduce();
    },this));
    $('.help-gtin').click($.proxy(function(){
        if ($('#help-gtin').is(':hidden')) {
            $('#help-gtin').slideDown();
        } else {
            $('#help-gtin').slideUp();
        }
        this.refreshGtin();
    },this);

    $('[name="order_production"]').click($.proxy(function(){
        this.changeProduction();
    },this));

},

如何减少此重复代码 $。代理调用 ，因为bindEvents中的所有方法都需要在this范围内调用？< / p>

Answer 1

通过设置等于this的变量然后使用它来充分利用它们已经closures的事实：

bindEvents: function() {
    var self = this; // <==== Set the variable

    $('#weight').click(function(){
        // v--- Use it (throughout)
        self.changeWeight($('#weight').is(':checked'));
    });
    $('#produce').change(function(){
        self.changeProduce();
    });
    $('.help-gtin').click(function(){
        if ($('#help-gtin').is(':hidden')) {
            $('#help-gtin').slideDown();
        } else {
            $('#help-gtin').slideUp();
        }
        self.refreshGtin();
    });

    $('[name="order_production"]').click(function(){
        self.changeProduction();
    });

},

您在bindEvents中定义的所有函数都“关闭”bindEvents调用的上下文，并且可以访问与该调用关联的局部变量。与this不同，这些变量不会根据函数的调用方式而改变。

这样做的另一个好处是，您可以在事件处理程序中使用this及其jQuery含义，即您在其上挂钩事件的元素（这样可以节省您的查找次数，例如在{{1处理click）。