Wilson Page

When I first heard the term ‘PubSub’ I was instantly confused. I thought it was some new gimmicky concept that i would have to learn, so I kind of ignored it. Eventually the term cropped up so many times I decided to spend a few minutes discovering what it was.

What is it?

‘Pub Sub’ is an abbreviation of ‘Publish Subscribe’. Which is how all Javascript event handlers work. Subscribe refers to the binding of or listening for an event and ‘Publish’ refers to the triggering or emitting of an event. So in short PubSub allows you to set up one or many listener functions to respond when a single event is triggered (or ‘Published’).

The difference between ‘PubSub’ and normal Javascript events is that they are not bound to physical elements on the page. In my example they are bound to a single (sort of global) jQuery object that acts as a hub for all our custom events. Subscribers listen for particular messages emitted from this hub and Publishers send there messages into this hub.

Why is this useful?

In large Javascript applications this can be useful as it gives a central point of communication. If you are working in a modularised way modules can become less dependent on one another. If one module is required to respond to another module’s actions it can subscribe to that event on the central jQuery hub. The module needing to trigger the event can Publish the event to the hub.

Show me an example

This example uses a nice little plugin jquery.tinypubsub.js which is a tiny convenience wrapper around the jQuery’s on()/off() event handlers (introduced in jQuery 1.7)

I have often seen references to ‘map’ in javascript and not really taken the time to fully understand what it means.

What is map?

map loops over an array and runs a function on each element in the array. What ever you return from that function will replace the element in the current position. The output of the $.map() is the new array after each element has been manipulated though your ‘iterator’ function.

Map is available natively in later versions of Javascript (IE9+) but not in older browsers, so in the meantime we have to use jQuery’s $.map() method to ensure cross browser compatibility.

Basic Example

var result = $.map( [1,2,3,4], function (a) { 
  return a * 2; 
});

// result => [2,4,6,8]

Working Examples:

http://jsfiddle.net/WilsonPage/KjPM6/5/

Hope this was a nice introduction to map and you can see how useful this could be in your own projects :)

I have recently started working with MongoDB which stores data in a JSON type structure. This allows for objects to be nested within objects. Now I wanted to be able to pull data out of an html form in the exactly the same structure as it would be in my database. So effectively transforming a simple flat form into a javascript object with depth.

So this:

<form>
    <input type='text' name='name'>
    <input type='text' name='tel'>
    <input type='text' name='email'>
    <input type='text' name='twitter'>
</form>

Can become this:

data{
    name: 'john smith',
    contact:{
        tel: '123456789',
        email: 'john@hotmail.com',
        twitter: '@johnsmith'
    }
}

The solution I came up with was to use the familiar Javascript dot notation within the name field to represent the position in the object like so.

<form>    
    <input type='text' name='name'>
    <input type='text' name='contact.tel'>
    <input type='text' name='contact.email'>
    <input type='text' name='contact.twitter'>
</form>

I then built a jQuery plugin to extract this data and format it into the desired Javscript object structure. So running my plugin on a populated form like so:

var data = $('form').objectify();

Will return a fully formed Javascript object ready to drop into your NoSQL database.

Example and plugin code:

JSFiddle example

Credit to Mr @john_hamelink for some pointers :)

When scouring the internet today I came across this method of element creation. It is an alternative to something like:

$("<div id=" + myID + "class=" + myClass + ">" + html + "</div>");

preventDefault() and return false both do the similar things; they prevent the browser from performing its default functionality for that particular event*

Example

$('a').click(function(e){
  alert('No refresh!');
  return false;
});


$('a').click(function(e){
  e.preventDefault();
  alert('No refresh!');
});

So why use one over the other?

Example 2

$('a').click(function(e){
  alert(nonExistentVar);
  return false;
});


$('a').click(function(e){
  e.preventDefault();
  alert(nonExistentVar);
});

In this example both functions will throw an error. In the preventDefault version you will get to see this error in the console and the page won’t refresh. In the return false example the page will refresh and you won’t have clue what went wrong with your code.

This is because e.preventDefault(); allows you to declare this at the start of the function, whereas return false always has to be declared at the end of the function (once return is called no more code will run). So in the return false example the code errors, never hits the return false command and the browser deals the click how it normally does.

I have encountered this problem before but only now have I realised that e.preventDefault can make my debugging chores that tiny bit easier :)

* return false; will also prevent event propagation/bubbling when used inside a jQuery event handler function. An alternative to this is stopPropagation(). Credit to @murger for spotting this. See this discussion for more details.

I have quickly thrown together a new jQuery extension that can be used to detect when all the images inside an element have loaded. This is useful for a couple of reasons.

1. You don’t want the end user to see the progressive loading of images
2. You need to run functions that depend on the dimensions of the parent element, that is in turn determined by the dimensions of the images inside of it.

Code Snippet:

(function($){
    $.fn.imgsLoaded = function(cb){
        return this.each(function(){
            var imgs = $(this).find('img'),
            imgsLoaded = 0;

            if(!imgs.length){ return cb() };

            imgs.one('load',function(){
                imgsLoaded++;
                if(imgsLoaded == imgs.length){ cb() };
            }).each(function(){
                 if(this.complete){ $(this).load() };
            });

        });
    };
})(jQuery); 

Usage:

$('#container').imgsLoaded(function(){
    // what ever you want to do (fade in images, show container, etc)
});