Ignacio Garat Ignacio Garat - 5 months ago 21
Javascript Question

how to implement observer pattern in javascript?

HI Im'tyring to implement observer pattern in js:

My index.js

$(document).ready(function(){

var ironMan = new Movie();
ironMan.setTitle('IronMan');
ironMan.setRating('R');
ironMan.setId(1);
// ironMan.setCast(['Robert Downey Jr.', 'Jeff Bridges', 'Gwyneth Paltrow']);

var terminator = new Movie();
terminator.setTitle('Terminator');
terminator.setRating('P');
terminator.setId(2);

console.log(ironMan.toString());
console.log(terminator.toString());

ironMan.play();
ironMan.stop();
ironMan.download();
ironMan.share('V. Rivas');

console.log(ironMan.getCast()[0]);
});


My movie

var title;
var rating;
var id;
var observers;


function Movie (){
observers = new ObserverList();
}

//function Movie (title, rating, id){
// this. title = title;
// this.rating = rating;
// this.id =id;
// observers = new ObserverList();
//
//}

Movie.prototype.setTitle = function(newTitle){
this.title = newTitle;
}

Movie.prototype.getTilte = function(){
return this.title;
}

Movie.prototype.setRating = function(newRating){
this.rating = newRating;
}

Movie.prototype.getRating = function(){
return this.rating
}

Movie.prototype.setId = function (newId){
this.id = newId;
}

Movie.prototype.getId = function (){
return this.id
}

Movie.prototype.play = function(){
for( i = 0; i < observers.Count; i++){
console.log("palying...");
}
}

Movie.prototype.stop = function (){
for( i = 0; i < observers.Count; i++){
console.log("stoped");
}
}

Movie.prototype.AddObserver = function( observer ){
observers.Add( observer );
};


Finally observer:

function ObserverList(){
this.observerList = [];
}

ObserverList.prototype.Add = function( obj ){
return this.observerList.push( obj );
};

ObserverList.prototype.Empty = function(){
this.observerList = [];
};

ObserverList.prototype.Count = function(){
return this.observerList.length;
};


ObserverList.prototype.Get = function( index ){
if( index > -1 && index < this.observerList.length ){
return this.observerList[ index ];
}
};

ObserverList.prototype.Insert = function( obj, index ){
var pointer = -1;

if( index === 0 ){
this.observerList.unshift( obj );
pointer = index;
}else if( index === this.observerList.length ){
this.observerList.push( obj );
pointer = index;
}

return pointer;
};


Any help you can provide will me most gratefull

Answer

In JavaScript, there is no point to implement pure observer pattern as in Java, because JavaScript has this little thing called functional programming. So just use something like http://api.jquery.com/category/callbacks-object/ instead of your ObserverList.

If you still want to use your object, then everything depends on what do you want to pass to ObserverList.Add. If it is some object, then you need to write

for( i = 0; i < observers.Count; i++) { 
  observers[i].Notify("some data"); 
}

If it is a function then you need to write

for( i = 0; i < observers.Count; i++) { 
  observers[i]("Some data"); 
}

Also you can use Function.apply() or Function.call() to supply this to your function