How to create and event handler inside a Singleton class - Javascript

Question

I have the next code:

// Singleton
var mySingleton = (function () {
    // Private methods and variables

    function privateMethod(){
        console.log( "I am private" );
    }

    var privateVariable = "Im also private";

   return {
      // Public methods and variables
      hello: function () {
        console.log( "I want to ''fire'' the event 'hello'" );
      }
    };
})();

And I want to create my own event handling system. I'm tried with the following code:

var mySingleton = (function () {

    function privateMethod(){
        console.log( "I am private" );
    }

    var handlers = {};
    mySingleton.prototype.registerHandler = function(event, callback) {
       this.handlers[event] = callback;
    };
    mySingleton.prototype.fire = function(event) {
       this.handlers[event]();
    };

    var privateVariable = "Im also private";

    return {
      hello: function () {
        console.log( "I want to ''fire'' the event 'hello'" );
        fire('hello');
      }
    };

})();

And I used as follows:

mySingleton .registerHandler('hello', function () {
    alert('Hi!');
});

But this doesn't work... Throw me the next error:

Cannot read property 'prototype' of undefined

Anybody can help me, please?

MY CURRENT ERROR:

Uncaught TypeError: Cannot set property 'mycustomevent' of undefined
Uncaught TypeError: Cannot read property 'mycustomevent' of undefined

score 2 · Accepted Answer · edited Dec 07 '14 at 17:01

2

Your code is trying to make assignments to the "prototype" property of an object that doesn't exist yet. There's really no point anyway; just put those methods in the object you're returning:

var mySingleton = (function () {

    function privateMethod(){
        console.log( "I am private" );
    }

    var handlers = {};
    var privateVariable = "Im also private";

    return {
      hello: function () {
        console.log( "I want to ''fire'' the event 'hello'" );
        this.fire('hello');
      },
      registerHandler: function(event, callback) {
        handlers[event] = callback;
      },
      fire: function(event) {
        if(handlers[event]){
           handlers[event]();
        }else{
           console.error("Sorry, there aren't any handlers registered with that name");
        }
      }
    };
})();

The object you're building as "mySingleton" is just a plain object; that is, it's an instance of the Object constructor. There's no new prototype involved.

You don't need a this reference to access the "handlers" map because it's in the closure scope of the event handling functions. The way the code is arranged, however, does require this when using the .fire() API, though that could be fixed too by having the service functions be locally declared in the anonymous wrapper.

edited Dec 07 '14 at 17:01

MartaGom

501
6
27

answered Dec 07 '14 at 14:53

Pointy

405,095
59
585
614

Hi, thanks for you correction. But... when I try to use it: mySingleton .registerHandler('mycustomevent', function() { ... }); And the mySingleton.fire('mycustomevent'); Throw me the next errors: Uncaught TypeError: Cannot set property 'mycustomevent' of undefined Uncaught TypeError: Cannot read property 'mycustomevent' of undefined May you can help me with this, please? – MartaGom Dec 07 '14 at 16:22
1

¡Sorry! I forgot remove the "this" reference. It works fantastic. Thank you very much :) – MartaGom Dec 07 '14 at 16:37
@MartaFernandez ok, well I'm happy it's working for you! – Pointy Dec 07 '14 at 16:48
Do you think I should to write code for check if the event in fire was be registered? If I use the method "hello" without call registerHandler before I have the next error: undefined is not a function (MySingleton.fire) – MartaGom Dec 07 '14 at 16:50
Yes, you could check and throw some sort of helpful exception. That's not too common in JavaScript libraries, but I don't see anything wrong with doing it. My favorite frameworks are generally those that provide helpful, explanatory errors when possible. – Pointy Dec 07 '14 at 16:52

score 0 · Answer 2 · answered Nov 22 '16 at 01:21

Try the below code

var singleton = (function(){
    var instance;
    var myObj = function(){
        this.name = "myObj";
        this.eventObj = {};
    };
    var localFn = function(){
        if(!instance){
            instance = new myObj();//singleton, instance created once
        }
        return instance;
    };
  //add 2 functions on myObj
    myObj.prototype.addEvent = function(evName, cb){
        this.eventObj[evName] = cb;
    };
    myObj.prototype.invokeEvent= function(evName){
        this.eventObj[evName]();
    };
    return localFn;
}());

singleton().addEvent("btnClick", function(){alert("click event invoked")});
singleton().addEvent("btnClick_1", function(){alert("click event invoked")});
singleton().invokeEvent("btnClick"); //alert "click event invoked"

How to create and event handler inside a Singleton class - Javascript

2 Answers2