CODEWITHSUNDEEP
javascriptevents
Moon
Moon

Reputation: 22605

Custom javascript event object?

While developing in javascript, I spent tons time to figure out what arguments are passed among functions. So I tried a new method today. I created a simple object then define event name and arguments.

var GreetingEvent = {
    HELLO: 'hello',
    'arguments': {
        name: null
    }
}

// dispatch
// pseudo code
this.fireEvent( new MyEvent(GreetingEvent.HELLO,"myname") );

// listening
// pseudo code
this.listenToEvent(GreetingEvent.HELLO, this.onGreetingEvent);

I'm sure that others already experienced my situation.

What was your situation and solution?

Update:

this is how I'm coding now.

// dispatch
// pseudo code

    this.fireEvent('hello',{name:'myname'});

// listening
// pseudo code

    this.listenToEvent('hello', this.onGreetingEvent);

the problem of this code is that my co-workers must open my code to find out what arguments are being passed to their listeners or they have to use console.log(). That's actually fine. I'm just trying to find a better way.

Upvotes: 1

Views: 308

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92324

Ext-JS does it through JS-doc like annotations. Then their events become part of their published documentation. You may not use their API and won't get the pretty documentation, but you can still use their documentation style and users of your code can just look at the documentation. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-event-resize

Here's the example from their code of declaring the events.

   me.addEvents(

        /**
         * @event beforeclose
         * Fires before the user closes the panel. Return false from any listener to stop the close event being
         * fired
         * @param {Ext.panel.Panel} panel The Panel object
         */
        'beforeclose',

        /**
         * @event beforeexpand
         * Fires before this panel is expanded. Return false to prevent the expand.
         * @param {Ext.panel.Panel} p The Panel being expanded.
         * @param {Boolean} animate True if the expand is animated, else false.
         */
        "beforeexpand",

Upvotes: 1

Related Questions