Monday 15 April 2013

Underscore.js






Underscore.js is a tiny JavaScript utility library that makes working with some of the common data structures used in JavaScript much easier. Using Underscore is extremely easy. It is not tightly bound to the DOM, doesn’t make any assumptions about other libraries or frameworks that may be in use and doesn’t require any setup or configuration. We can simply include the library file in your page and you can start calling its methods.

The library is composed of about 80 functions that provide functional programming support without extending the built-in javascript objects. What makes this library stand out is that it delegates to built-in functions if our browser or javascript engine supports it. There are several benefits of using underscore.js.

  • A performance boost due to the execution of native code.
  • Your code won’t break even if a particular browser or javascript engine doesn’t yet support the ECMA Script 5 specification.
  • More intuitive and concise javascript code.
Some of the functions out of many are explained here:

_.each
The _.each function allows for iteration through a collection in a more semantically meaningful way and will call the native function if it is supported. Please go through the code given below.

function SomeFunction(item)
{
    //function codes
}
for (index = 0; index < maxCount; ++index)
{
    SomeFunction(collection[index], index);
}
//using _.each
function SomeFunction(item)
{
    //function codes
}
.each(collection, SomeFunction);

As you can see from this example, what needs to be expressed in several lines of code can be done with one line. The code that uses _.each is elegant, far more meaningful, and it will be as efficient as it can be for the given execution environment.

_.map
The _.map function exposes the ability to “map” or transform a list by executing a user specified function. It provides a powerful way to efficiently iterate through a collection performing some operation on each element of the collection. It will also call to the native function if it is supported.


function Transformer(item)
{
   // function codes
}
var transformed = new Array();
for (index = 0; index < maxCount; ++index)
{
   transformed.push(Transformer(collection[index]));
}
// _.map to transform items in an element
function Transformer(item)
{
   // function codes
}
var transformed = _.map(collection, Transformer);

Like the _.each function _.map provides a more expressive and concise syntax for what is truly happening in the code.

_.filter
The _.filter function iterates over the provided collection, returning an array of all the values that meet the criteria of a user specified function.

function FilterCondition(item)
{
 // function codes
}
var selected = new Array();
for (index = 0; index < maxCount; ++index)
{
if (FilterCondition(collection[index]))
   {
      selected.push(collection[index]);
   }
}
// _.filter
function FilterCondition(item)
{
 // function codes
}
var selected = _.filter(collection, FilterCondition);

We can see how compact the old function code has become by using _.filter. We can also see that the use of _.filter forces the user of the function to have better separation of behaviors within their javascript code instead of having massive blocks of code that are at best tough to read and at worst introduce odd side-effects.

The above examples highlights the fact that underscore.js is one of those libraries that we should “just use”. It adds no overhead, is trivial to integrate and makes your code more robust.





[
Expecting Your Valuable Comments]
Thank You





No comments:

Post a Comment