Wilson Page

.call() is almost identical to .apply() (which I wrote about here). It allows you to execute a function and pass in a this context. The only difference between call and apply is that the parameters you wish to pass into the function are listed normally as opposed to in an array form.

.call()

myFunction.call(thisContext, param1, param2);

.apply();

myFunction.apply(thisContext. [param1, param2]);

Here is working example »

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)

Apply is a clever little way of executing functions. It allows you to alter the ‘scope’ (value of ‘this’) as well as passing in any arguments you wish in the form of an array.

myFunction.apply(scope, arguments);    

Example:

var myFunction = function(customParam1, customParam2) {
    alert(customParam1);
    alert(customParam2);
    alert(this.scopeValue1);
    alert(this.scopeValue2);

    // log the scope (have a look!)
    console.log(this);
};

.

var customScope = {
    scopeValue1: 'this is value 1 in custom scope',
    scopeValue2: 'this is value 2 in custom scope',
};

.

myFunction.apply(customScope, ["this is custom param 1", "this is custom Param 2"]);

Working Example:

Check out the working example »

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 had a collection of objects inside an array and wanted an async way of pulling out a specific object from that collection. I wanted it to be asynchronous so that when used server-side with NodeJS it wouldn’t block. I used the async.js library to achieve this.

Example:

var findOne = function(collection, val, options, cb){
  if(typeof options === 'function'){ cb = options; options = {}; }

  // [Default] defualt attribute to search is '_id'
  options.key = options.key || '_id';

  // use async.detect() to return the first item that
  // matches the condition
  async.detect(collection, function(item, callback){
    var isMatch = (item[options.key] === val);
    return callback(isMatch);
  },cb);
};



// DUMMY COLLECTION
var myCollection = [
    {_id: 101, name: 'bill'},
    {_id: 102, name: 'bob'},
    {_id: 103, name: 'ben'} 
];


// Usage with default key ('_id')
findOne(myCollection, 102, function(result){

   console.log(result);
   // {_id: 102, name: 'bob'}

});


// Usage with custom key
findOne(myCollection, 'ben', {key: 'name'}, function(result){

  console.log(result);
  // {_id: 103, name: 'ben'} 

});

Working Example

http://jsfiddle.net/WilsonPage/yJSjP/3/

In testing I found it annoying that Javascript objects could only be viewed fully in the console, so I created this function that sort of mimics the old PHP print_r() function. It even includes indentation. I’m sure it could be improved further but works pretty well for me :)

Usage:

I turned this method into an easy to use jQuery plugin. If you want to use this feature in your own JSFiddles then include this script on your page. The usage syntax of the jQuery version is as follows.

$.print_r(myObject);

or

var printed = $.print_r(myObject, {autoAppend: false});

I needed a method to compare two Javacript objects to find out what values had changed, and what values were new. So I wrote this little function.

What is it?

The javascript method hasOwnProperty() is a method that can be run on an object that simply returns true or false depending on whether it has the property it is being tested for.

Quick Example:

var myObject = {
    a: 'one',
    b: 'two',
    c: 'three'
}

alert( myObject.hasOwnProperty('a') );// will alert 'true'
alert( myObject.hasOwnProperty('d') );// will alert 'false'

Working Demo

I’m sure you can find some cool uses for this :)

Including files/modules into your project that located locally on your server is pretty straight forward right? But how do we require a file hosted on a CDN?

What is an AMD module?

First of all the Javascript module you are requiring must be AMD compliant, what the hell does that mean right? Well AMD stands for Asyncronous Module Definition. It is a sort of standard for defining modules that can be loaded into module loaders such as RequireJS. In short it means that within the module define() must be called.

What the jQuery AMD module definition looks like:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

What jQuery Says:

“Expose jQuery as an AMD module, but only for AMD loaders that understand the issues with loading multiple versions of jQuery in a page that all might call define(). The loader will indicate they have special allowances for multiple jQuery versions by specifying define.amd.jQuery = true. Register as a named module, since jQuery can be concatenated with other files that may use define, but not use a proper concatenation script that understands anonymous AMD modules. A named AMD is safest and most robust way to register. Lowercase jquery is used because AMD module names are derived from file names, and jQuery is normally delivered in a lowercase file name.”

How can we take advantage of this in RequireJS?

Below is an example of how to include jQuery and Underscore, two AMD compliant libraries that both contain the special define() module definition. View the source of both libraries and search the page for ‘define(’ to see where they have been defined and with what name.

require.config({
    paths:{
        'jquery': 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min',
        'underscore': 'https://raw.github.com/documentcloud/underscore/master/underscore'
    }
});

require([
    'jquery',
    'underscore'
], function($, _) {

    // log jQuery to console to make sure it is available
    console.log($);

    // log underscore to console to make sure it is available
    console.log(_);  
});  

Example Demo:

Working Example Here

Important things to note:

• The URLs to the libraries must NOT have the ‘.js’ extension. If they do then RequireJS will not recognise them as a module.
• Modules that do not have the special define() module definition cannot be included into your project in this way.
• Make sure to exclude these modules from your RequireJS optimization build to prevent them from being bundled into your final package. We want to continue to source them from the CDN in production.