Learning JavaScript Design Patterns the Observer Pattern

The Observer Pattern

The Observer is a design pattern where an object (known as a subject) maintains a list of objects depending on it (observe RS), automatically notifying them of any changes to the state.

When a subject needs to notify observers on something interesting happening, it broadcasts a notification to the Observ ERS (which can include specific data related to the topic of the notification).

When we do longer wish for a particular observer to being notified of changes by the subject they is registered with, the SU Bject can remove them from the list of observers.

It's often useful to refer back to published definitions of design patterns that is language agnostic to get a broader SE NSE of their usage and advantages over time. The definition of the Observer pattern provided in the GoF book, Design patterns:elements of reusable object-oriented Software, is:

"One or more observers is interested in the state of a subject and registers their interest with the subject by attaching themselves. When something changes in we subject that the observer could be interested in, a notify message is sent which calls the UPD Ate method in each observer. When the observer was no longer interested in the subject's state, they can simply detach themselves. "

We can now expand on the "what we've learned to implement" the Observer pattern with the following components:

• Subject:maintains A list of observers, facilitates adding or removing observers
• Observer:provides a update interface for objects, need to being notified of a Subject ' s changes of state
• Concretesubject:broadcasts notifications to observers in changes of state, stores the state of Concreteobservers
• Concreteobserver:stores a reference to the ConcreteSubject, implements an update interface for the Observer to ensure STA Te is consistent with the Subject ' s

First, let's model the list of dependent observers a subject may have:

functionobserverlist () { This. observerlist = [];} ObserverList.prototype.add=function(obj) {return  This. Observerlist.push (obj);}; 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.indexOf=function(obj, startIndex) {vari =StartIndex;  while(I < This. Observerlist.length) {    if( This. observerlist[i] = = =obj) {      returni; } I++; }   return-1;}; ObserverList.prototype.removeAt=function(index) { This. Observerlist.splice (Index, 1 );};

Next, let's model the Subject and the ability to add, remove or notify observers on the Observer list.

functionSubject () { This. Observers =Newobserverlist ();} Subject.prototype.addObserver=function(Observer) { This. OBSERVERS.ADD (Observer);}; Subject.prototype.removeObserver=function(Observer) { This. Observers.removeat ( This. OBSERVERS.INDEXOF (Observer, 0 ) );}; Subject.prototype.notify=function(context) {varObservercount = This. Observers.count ();  for(vari=0; i < Observercount; i++){     This. Observers.get (i). Update (context); }};

We then define a skeleton for creating new observers. The update functionality here is overwritten later with custom behaviour.

// The Observer function Observer () {  thisfunction() {    //  ...   };}

In our sample application using the above Observer components, we now define:

• A button for adding new observable checkboxes to the page
• A control checkbox which would act as a subject, notifying other checkboxes they should be checked
• A container for the new checkboxes being added

We then define ConcreteSubject and concreteobserver handlers for both adding new observers to the page and implementing th e updating interface. See below for inline comments on what these the "the context of our example."

Html:

<button id= "Addnewobserver" >add New Observer checkbox</button><input id= "Maincheckbox" type= "checkbox "/><div id=" Observerscontainer "></div>

Sample script:

//Extend An object with an extensionfunctionextend (extension, obj) { for(varKeyinchextension) {Obj[key]=Extension[key]; }} //References to our DOM elements varControlcheckbox = document.getElementById ("Maincheckbox"), Addbtn= document.getElementById ("Addnewobserver"), Container= document.getElementById ("Observerscontainer" ); //Concrete Subject //Extend the controlling checkbox with the Subject classExtendNewSubject (), Controlcheckbox); //clicking the checkbox would trigger notifications to its observersControlcheckbox.onclick =function() {controlcheckbox.notify (controlcheckbox.checked);}; Addbtn.onclick=Addnewobserver;//Concrete Observer functionAddnewobserver () {//Create a new checkbox to be added  varCheck = document.createelement ("Input" ); Check.type= "checkbox"; //Extend the checkbox with the Observer classExtendNewObserver (), check); //Override with Custom update behaviourCheck.update =function(value) { This. checked =value;   }; //ADD The new observer to our list of observers  //For our main subjectcontrolcheckbox.addobserver (check); //Append the item to the containercontainer.appendchild (check);}

In this example, we looked on how to implement and utilize the Observer pattern, covering the concepts of a Subject, Obser ver, ConcreteSubject and Concreteobserver.

Differences between the Observer and Publish/subscribe Pattern

Whilst the Observer pattern is useful to being aware of, quite often in the JavaScript world, we'll find it commonly implemen Ted using a variation known as the publish/subscribe pattern. Whilst very similar, there is differences between these patterns worth noting.

The Observer pattern requires, the Observer (or object) wishing to receive topic notifications must subscribe this int Erest to the object firing the event (the subject).

The Publish/subscribe pattern however uses a topic/event channel which sits between the objects wishing to receive notific Ations (Subscribers) and the object firing the event (the publisher). This event system allows code to define application specific events which can pass custom arguments containing values need Ed by the Subscriber. The idea here's to avoid dependencies between the Subscriber and publisher.

This differs from the Observer pattern as it allows any subscriber implementing a appropriate event handler to register F Or and receive topic notifications broadcast by the publisher.

Here's an example of what one might use the publish/subscribe if provided with a functional implementation powering publish() , subscribe()and unsubscribe() behind the scenes:

Learning JavaScript Design Patterns the Observer Pattern