Geek asks and answers

The correct way to display events from custom JavaScript objects

I have a custom object in JavaScript:

function Graph (dataType, provider){
   this.dataType = dataType;
   this.provider = provider;
}

I instantiate this object through the “new” one, and then pass it on to other parts of my code, which may require tracking changes to the properties of this object.

When the properties of the Graph object are changed, I want all other users of this object to be notified. In languages ​​like C #, I would have a setter in which I would raise an event. What is the correct way to create events in custom JavaScript objects?

Thank.

+5
source share
3 answers

JQuery , , .

function Graph (dataType, provider){
   this.dataType = dataType;
   this.provider = provider;
}

var g = new Graph;

g.dataType = "whatever1";
g.provider = "whatever2";
g.event = $.Event("mywhateverEvent");
g.myOwnProperty2 = $.Event("thisisAnEventToo");

, , , - :

g.event = <whateverCodeIWant>;
g.myOwnProperty2 = <whateverCodeIwant2>

, , , :

function Graph (dataType, provider, evt){
   this.dataType = dataType;
   this.provider = provider;
   this.evt = evt
}

var myevt =  $.Event("whateverEvent");
myevt = <codeTomanipulatemyEventFurtherNowIfIWantTo>;
var g = new Graph("datawhatever", "providerwhatever", myevt);
$("whateverIWant").bind(myevt); 
//or whatever other binding - it will bind to that very event
$("whateverIWant").bind(g.evt);//equivalent to above line- binds to same event object
+3

Object.defineProperty - , ( , IE < 9 Firefox < 4 )

function Graph (dataType, provider){
   this._dataType = dataType;
   this._provider = provider;
}

Graph.prototype = {
    get dataType() {
        return this._dataType;
    },
    set dataType(data) {
        yourEventDispatcher.trigger("datatype modified");
        this._dataType = data;
    },
    get provider() {
        return this._provider;
    },
    set provider(data) {
        yourEventDispatcher.trigger("provider modified");
        this._provider = data;
    }
};

: Javascript- ?

+1

EventEmitter, ​​ https://github.com/Wolfy87/EventEmitter. , javascript EventEmitter, - :

Graph.prototype = Object.clone(EventEmitter.prototype);


var g = new Graph("Blah", "Blah");
g.emitEvent('foo');
0
source

More articles:


All Articles