Question

在处理jQuery选项对象时，我应该每次引用“全局”ResponsiveMenu还是在每个模块中创建我需要的选项的“本地”副本？

查看代码，让我知道您认为哪种代码最好，为什么，或者甚至根本不重要。我一直这样做的方式是：如果我不止一次使用该引用，我会制作一个“本地”副本。如果我只使用一次，我会引用“全球”的那个。

ResponsiveMenu = {

    init: function(options, elem) {
        this.options = $.extend( {}, this.options, options );
        this.elem = $(elem);

        this.bindEvents();

        return this;
    },

    options: {
        trigger: null,
        activeClass: 'active',
        submenuTrigger: $('.sub-toggle')
    },

    bindEvents: function() {
        var self = this;

        this.options.trigger.on('click', triggerMain(evt, self));
    },

    triggerMain: function(evt, self) {
        evt.preventDefault();

        var activeClass = self.options.activeClass;

        self.elem.toggleClass(activeClass);
        self.options.trigger.toggleClass(activeClass); //"Global" reference

    },
}

或者这个：

bindEvents: function() {
    var self = this,
        trigger = this.options.trigger; //"Local" copy

    trigger.on('click', triggerMain(evt, self, trigger));
},


triggerMain: function(evt, self, trigger) {
    evt.preventDefault();

    var activeClass = self.options.activeClass;

    self.elem.toggleClass(activeClass);
    trigger.toggleClass(activeClass);

},

Answer 1

这看起来像一个风格问题。通常，如果我需要多次访问同一个值，我只定义一个变量。引用函数时，您也会遇到范围问题。例如，在这种情况下：

var obj = {
    num: 2,
    trigger: function() {
        console.log(this.num);
    }
}

obj.trigger();

它会将2记录到控制台，因为该函数绑定到obj作为范围。如果你这样做

var t = obj.trigger;
t();

但是，您将获得undefined，因为函数的默认范围是window对象。在ECMAScript 5中，您可以告诉我们将函数绑定到这样的内容：

var t = obj.trigger.bind(obj);
t();

现在将记录2。

jQuery选项对象引用

1 个答案: