3 Powerful JS Libraries to Extend Native Javascript Capabilities

Posted by & filed under Tech, Web Development. 9,840 views

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.

Example:

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.

Example:

_.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.

Example:

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;
}	

Let us know if you know a good Javascript library! Stay tuned with favbulous for more posts about Javascript and other web design and development related posts!

SHARE IT

RELATED POSTS

CSS4 Sneak Peak
6 WordPress Theme Boilerplates For Speedy Theme Development
Make A Beautiful Carousel with carouFredSel and UI Kit from Design Deck

COMMENTS