JavaScript对象文字：来自多个方法的相同事件绑定

Question

I'm trying to figure out what's the best way to bind event handlers from within object literal.

Imagine the following object:

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

        }

    }

};

The problem here is that the method addTopWarning and addTopConfirmation can be called multiple times from other objects and this will effectively also call the topClose and topExecute multiple times and create duplicate bindings to the same objects. I know I could convert it to the instance object, which initialises all of the bindings when the instance of the object is created, but again - with multiple instances of the same object the bindings will occur several times as well.

I'd prefer to keep it as object literal as this specific object serves more as a helper than object that needs to be instantiated.

I can't figure out how to approach it so if someone could advice please - it would be very much appreciated.

Answer 1

With jQuery's event namespaces you can do this:

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

the .off() above will ensure that only one handler is set for that event.

Answer 2

Use something to check if the function has already been run.

Here is an example with a closure

function  validationTop(/* some args */){
    var trigger = {'conf':true, 'warn':true};

    return {
        topConfirmation: function(){
            if(trigger['conf']){
                //do some stuff
                trigger['conf'] = false;
            }
        }

        //rest of your object
    }   
}

Answer 3

To stop it from binding agian

MySystem.ValidationTop = {
  topClosed : 0,
  topExecuted : 0,
  topClose: function(){
    "use strict";
    if(!this.topClosed){
      this.topClosed = 1;
      $(document).on('click', '#topCloseTrigger', function(event) {
        // some action goes here
      });
    }
  }
}

repeat

Across multiple instaces:

var topClosed = 0, topExecuted = 0;
MySystem.ValidationTop = {
  topClose: function(){
    "use strict";
    if(topClosed){
      topClosed = 1;
      $(document).on('click', '#topCloseTrigger', function(event) {
        // some action goes here
      });
    }
  }
}

If you need multiple instances of an Object:

if(!Object.create){
  Object.create = function(o){
    function F(){}
    F.prototype = o;
    return new F;
  }
}

Now just use var whatever = Object.create(MySystem.ValidationTop);