HTML5 Zone is brought to you in partnership with:

A GNU/Linux g33k CLI+Web loving computer polyglot. Hemanth is a DZone MVB and is not an employee of DZone and has posted 2 posts at DZone. You can read more from them at their website. View Full User Profile

Chaining Functions in JavaScript

08.20.2012
Email
Views: 2192
  • submit to reddit
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.

Most of us are aware of the all-famous Jquery dem:

$("p.neat").addClass("ohmy").show("slow");


It is a gem of an example of chaining functions.

There are many resources out there that demonstrate various ways of chaining javascript functions, but, I always like to explore my own ways of doing things. Let people call it re-inventing the wheel, but I'd like to make my own wheel! [ Enough of Nehilisim!]

Below is a simple code that I managed to pull, which is closest to the Jquery demo and, as always, might be done in better ways. (You are welcome to let me know of any better way in the comments section or via e-mail.)

$ = (function (document) {
    var self = '';
    return {
        get: function (selector) {
            self = document.querySelector(selector);
            return this;
        },
        addClass: function (new_class) {
            self.classList.add(new_class);
            return this;
        },
        show: function () {
            self.style.display == 'none' ? self.style.display = 'block' : 
            self.style.display;
            return this;
        },
        hide: function () {
            self.style.display !== 'none' ? self.style.display = 'none' : 
            self.style.display;
            return this;
        },
        toggle: function () {
            self.style.display == 'block' ? self.style.display = 'none' : 
            self.style.display = 'block';
            return this;
        }
    };
 
}(document));


With this one can do something like: 

$.get('p.neat').addClass().show()
Published at DZone with permission of Hemanth Madhavarao, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins.  Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards.  This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.