JavaScript 对象字面量 : same event binding from multiple methods

Question

我正在尝试找出从对象文字中绑定(bind)事件处理程序的最佳方法。

想象以下对象:

MySystem.ValidationTop = {

    topClose : function() {

        "use strict";

        $(document).on('click', '#topCloseTrigger', function(event) {

            // some action goes here

        });

    },

    topExecute : function() {

        "use strict";

        $(document).on('click', '#topExecuteTrigger', function(event) {

            // some action goes here

        });

    },

    topWarningTemplate : function(thisWarning) {

        "use strict";

        // warning is wrapped and styled here

    },

    addTopWarning : function(thisWarning) {

        "use strict";

        if (typeof thisWarning !== 'undefined') {

            this.addTop($(this.topWarningTemplate(thisWarning)));
            this.topClose();

        }

    },

    topConfirmationTemplate : function(thisConfirmation) {

        "use strict";

        // confirmation is wrapped and styled here

    },

    addTopConfirmation : function(thisConfirmation) {

        "use strict";

        if (typeof thisConfirmation !== 'undefined') {

            this.addTop($(this.topConfirmationTemplate(thisConfirmation)));
            this.topClose();

        }

    }

};

这里的问题是，方法 addTopWarning 和 addTopConfirmation 可以从其他对象中多次调用，这也会有效地调用 topClose和 topExecute 多次，并创建到相同对象的重复绑定(bind)。我知道我可以将其转换为实例对象，该对象在创建对象实例时初始化所有绑定(bind)，但同样，对于同一对象的多个实例，绑定(bind)也会发生多次。

我更愿意将其保留为对象文字，因为这个特定对象比需要实例化的对象更像是一个帮助器。

我不知道如何处理它，所以如果有人可以提供建议 - 我们将非常感激。

Answer 1

使用 jQuery 的事件命名空间，您可以执行以下操作:

$(document)
      .off('click.myValidation')
      .on('click.myValidation', '#topCloseTrigger', function(event) {
        // some action goes here
      });

上面的.off()将确保只为该事件设置一个处理程序。