Observer pattern using jQuery.Callbacks

Let's see an example of the observer pattern using the jQuery.Callbacks function.

To start with, let's add two functions which can help to understand the following flags that can be used with jQuery.Callbacks:

function newsAlert(notification) {
  alert(notification);
}
 

function appAlert(notification) {
  alert( "In appAlert function: "+notification);
  return false;
}

Possible flags available for jQuery.callbacks are listed as follows:

  • once: It will make sure that callback is called only once.
        var messages = $.Callbacks( "once" );
    messages.add(newsAlert);
    messages.fire("First Notificaiton");
    messages.add(appAlert);
    messages.fire("Second Notification");

    Here, the output is First Notification.

    Whenever run for the first time, we will get First Alert as an output.

  • memory: This flag will be used to keep track of old values and will call any of callback from the list that has been fired with the recent values:
        var messages = $.Callbacks( "memory" );
    messages.add(newsAlert);
    messages.fire("First Notification");
    messages.add(appAlert);
    messages.fire("second Notification");
    messages.remove(appAlert);
    messages.fire("Third Notification");

    Here, the output is:

    First Notification
In App Alert: First Notification
Second Notification
In App Alert: Second Notification
Third Notification

    We can see in the output even though we removed appAlert it has been called with latest values on the screen.

  • unique: It will make sure that callback is added only once in a list so that duplicates are not allowed in the list:
        var messages = $.Callbacks( "unique" );
    messages.add(newsAlert);
    messages.fire("First Notification");
    messages.add(newsAlert);
    messages.add(appAlert);
    messages.fire("Second Notification");
    messages.remove(appAlert);
    messages.fire("Third Notification");

    Here, the output is:

    First Notification
Second Notification
In app Alert : Second Notification
Third Notification

    We can see that newsAlert is added twice in the output, but it in actual, it is added only once.

  • stopOnFalse: It will break the callback if any false value occurs.
    function newsAlert(message) {
    alert(message);
    return false;
  }

function appAlert(message) {
    appAlert( "In App Alert: " + message);
    return false;
  }

    var messages = $.Callbacks("stopOnFalse");
    messages.add(newsAlert);
    messages.fire("First Notification");
    messages.add(appAlert);
    messages.fire("Second Notification");
    messages.remove(appAlert);
    messages.fire("Third Notification");

    Here, the output is:

    First Notification
Second Notification
Third Notification

We can see that it has printed only First Notification, Second Notification, and Third Notification in the output, as both the functions are returning false, it has not called callback for those two functions.

Let's see a simple example of jQuery.Callbacks using the mentioned options:

var messages = jQuery.Callbacks()

  , Item = {

      publish: messages.fire,
      subscribe: messages.add,
      unsubscribe: messages.remove
    }

function newsAlert(message){
  alert("In News Alert: " + message);
}


function appAlert(message){
  alert("In app Alert: " + message);
}


Item.subscribe(newsAlert);
Item.subscribe(appAlert);
Item.publish('First Notification');
Item.publish('Second Notification');

In the preceding example, we defined one object named Item in the callback method. Here, we assign fire event to publish, add event to subscribe, and remove to unsubscribe. With the use of the Item object, we are adding two subscribers using newsAlert and appAlert functions. Whenever any notification comes for newsAlert and appAlert, First Notification and Second Notification get printed on the output screen.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.59.96.247