Netscape DevEdge

Skip to: [content] [navigation]

CSimpleObservable - An Implementation of the Observer pattern in JavaScript

Introduction

Observers and Observables are a basic pattern in event-based programming. CSimpleObservable provides a reuseable means of incorporating Observers and Observables into your Web Applications.

Whenever a CSimpleObservable wishes to notify its observers of a change, it will call its notify() method.

notify() in turn will invoke a special method named observe on each of the registered observer objects.

Script

CSimpleObservable.js implements a JavaScript Object CSimpleObservable which is used to manage the Observer - Observable relationship. It uses CList, CCallWrapper and inheritFrom.

Constructor
CSimpleObservable(Boolean aIsAsync)

Constructs an instance of a CSimpleObservable object. aIsAsync specifies whether callbacks to observers will be done via a setTimeout() or by a direct function call.

Synchronous observerables are useful when observers must be notified of each distinct change using the observer's current state. Asynchronous observables are useful when only the notification is important and the exact state of the observable at the time is not required.

CSimpleObservable is intended to be inherited by other classes which wish to act as observers. See inheritFrom for possible means of inheriting CSimpleObservable.

Properties
CList mObservers

mObservers is a CList which is used to maintain the list of observer objects to be notified.

Boolean mIsAsync

mIsAsync determines how the CSimpleObservable performs notifications. When mIsAsync is false, it performs a direct call to the observer's observe method while when mIsAsync is true it uses setTimeout to perform the call.

Methods
notify(Object aValue)

notify() is called by a CSimpleObservable whenever it wishes to notify its observers of a change in it's state. notify() takes a single argument which can be anything the CSimpleObservable and the observer agree upon.

notify will call the observe method on each of the registered observers while passing the aValue argument to each.

addObserver(Object aObserver)

addObserver() adds an observer to be notified. The only requirement for an object to act as an observer is that it implement a method named observe.

removeObserver(Object aObserver)

addObserver() removes an observer.

Example 1

This example illustrates creating a class derived from CSimpleObservable, attaching an observer to receive notifications, then removing the observer. 

<script type="text/javascript" src="CList.js"></script>
<script type="text/javascript" src="CCallWrapper.js"></script>
<script type="text/javascript" src="inheritFrom.js"></script>
<script type="text/javascript" src="CSimpleObservable.js"></script>
<script type="text/javascript">

// create a simple synchronous observable

function CFooSync(aValue)
{
  this.mValue = aValue;
  // inherit from CSimpleObservable to make this 
  // object an Observable
  inheritFrom(this, new CSimpleObservable());
}

CFooSync.prototype.get = function()
{
  return this.mValue;
}

CFooSync.prototype.set = function(aValue)
{
  this.mValue = aValue;
  this.notify(this);
}

function doExample1()
{
  // create the observable
  var foo = new CFooSync('initial value');

  // create the observer
  var onUpdate = function (aValue)
  {
   alert('Observer says I received message ' + aValue.get());
  }

  // create an "observer" object with a single
  // "observe" method.
  var observer = { observe: onUpdate };

  // add the observer to the observable
  foo.addObserver( observer );

  foo.set('bar');

  // remove the observer
  foo.removeObserver(observer);

  foo.set('fubar');
}
</script>

Example 2

Example 2 illustrates the differences between Synchronous and Asynchronous Observables.

A–+R