3 Useful Powerful JavaScript Libraries to Extend Native Javascript Capabilities

Well, we all have to admit, the native javascript isn't perfect. duh! that's why we have so many frameworks that try to perfect it, such as jQuery, mootools, prototype etc. We're not talking about frameworks, it's more about extra addon, javascript libraries that extend the native javascript functions and methods. Usually, it extends the native javascript's array, string, number, date, object, etc with a bunch of useful functions and methods.
For example, javascript existing Date method isn't great, it has very limited capability. In this case, let's take SugarJS as an example. It added total of 40+ useful date manipulation functions and methods! Here is a few of them:

• Date.create(d, locale): alternate Date constructor which understands various formats.
• compare(obj): performs a numeric comparison against the date.
• format(format, locale): formats the date.
• isLeapYear() : returns true if the date is a leap year.
• ... and many more!

In this post, we've found 3 really useful Javascript libraries and pretty sure it will be good helpers! If you know of any good library, do share it with us.

Sugar

Sugar is a Javascript library that extends native objects with helpful methods. It is designed to be intuitive, unobstrusive, and let you do more with less code. It added huge collection of useful methods for array, string, number, date, object, function and enhanced RegExp.

js

getLatestTweets(function(t) {
var users = t.map('user').unique();
var total = users.sum('statuses_count').format();
var top   = users.max('followers_count').first();
var count = top.followers_count.format();
var since = Date.create(top.created_at);
return users.length + ' users with a total of ' + total + ' tweets.n' +
      top.screen_name + ' is the top with ' + count + ' followersn' +
      'and started tweeting ' + since.relative() + '.';
});

/*
Result:
>20 users with a total of 211,776 tweets.
TagalogQuotes is the top with 68,554 followers
and started tweeting 7 months ago.    
*/





Underscore.js
Similar to sugarjs, underscore.js provides a lot of the function 
support but without extending any of the built-in Javascript objects. 
Underscore provides 60-odd functions that support both the usual 
functional suspects: map, select, invoke — as well as more specialized 
helpers: function binding, javascript templating, deep equality testing,
 and so on. It delegates to built-in functions, if present, so modern 
browsers will use the native implementations of forEach, map, reduce, 
filter, every, some and indexOf.






_.shuffle([1, 2, 3, 4, 5, 6]);
=> [4, 1, 6, 3, 5, 2]
 
_.first([5, 4, 3, 2, 1]);
=> 5
 
_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2, 3, 101, 10]
 
var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name : 'moe'}, 'hi');
func();
=> 'hi: moe'
 
var hello = function(name) { return "hello: " + name; };
hello = _.wrap(hello, function(func) {
return "before, " + func("moe") + ", after";
});
hello();
=> 'before, hello: moe, after'





php.JS
PHP JS implementes Javascript version of PHP existing function. As a 
PHP developer, I'm pretty amazed by it's huge collection of function 
that imitate the same functionality.



function array_merge () {
 var args = Array.prototype.slice.call(arguments),
     argl = args.length,
     arg,
     retObj = {},
     k = '', 
     argil = 0,
     j = 0,
     i = 0,
     ct = 0,
     toStr = Object.prototype.toString,
     retArr = true;

 for (i = 0; i < argl; i++) {
     if (toStr.call(args[i]) !== '[object Array]') {
         retArr = false;
         break;
     }
 }

 if (retArr) {
     retArr = [];
     for (i = 0; i < argl; i++) {
         retArr = retArr.concat(args[i]);
     }
     return retArr;
 }

 for (i = 0, ct = 0; i < argl; i++) {
     arg = args[i];
     if (toStr.call(arg) === '[object Array]') {
         for (j = 0, argil = arg.length; j < argil; j++) {
             retObj[ct++] = arg[j];
         }
     }
     else {
         for (k in arg) {
             if (arg.hasOwnProperty(k)) {
                 if (parseInt(k, 10) + '' === k) {
                     retObj[ct++] = arg[k];
                 }
                 else {
                     retObj[k] = arg[k];
                 }
             }
         }
     }
 }
 return retObj;
} 

Categories: How to, JavaScript, JavaScript Libraries, jQuery, Web Design