Creating a handsome custom JavaScript library

jQuery, ExtJS, etc are some of the most sophisticated javascript libraries used current days.  But If you are as passionate as I am at some moment of your life you could wish to have your very own independent js library that can be used at any site.

Suppose you have created a custom library named js and want to use it like this ..

js("#id").hide();

You interested?.. keep reading.

Lets go and see how we can accomplish that –

Step 1: Create the foundation

JavaScript is an object oriented language and thus everything we do will be regarding objects. If you are reading this post, then you are already familiar with js and thus know that there are some browser object that javascript uses with DOM. We will need two of them to create our library one is the window and the other is the document object. Every single library or js obejct that you need to used must be registered as a property or field of window  object. So first we need to register our library. I will call my library js and the code that is needed to register the library is like this –

(function() {
   var window = this,
   undefined, _js = window.js;
})();

Lets see what this does. (Between you and me, I got this idea from jQuery) –

  1. The first and last line just defined the closure of the library
  2. The second line just saves the window object ( ofcourse when the library is loaded the this object would be the window itself) for later use
  3. The third line defines the undefined object in case it throws an exception if we use it in codes
  4. The second half says that I have a js names library that is to be used as window.js or simply js. The _js is used just an extra caution incase we need to use the library function inside it.

Step 2: Complete the definition

Uptil now our library js has only been declared, but we can’t use it just yet. We need to add functions and methods inside it so that we can manipulate them as library and also to access our DOM object like a jQuery type syntax we need to have a selector defined. Lets just complete our library as following –

//object initializarion
js = window.js = function(selector) {
    return new jsObject(selector);
};
//the custom javascript object
jsObject = function(selector) {
};

I will explaing what happended here. I just created an object protoype and initialized the js as an object of that type. Therefore js is now a valid javascript object and is ready to be implemented.

Step 3: Add Some features and Hook up with events.

Now before we move forward we have one little thing to care about, our library needs to be called when javascript is initialized. So we have to hook up a load event to the window load event and also bubble any event hooked up by other libraries. You don’t wanna mess up other libraries to create your own one. The code will look like this –

this.jsReady = function(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        };
    }
};

What we did here? We first checked that if there is already a function hooked up to be call when the window loaded, if yes we called it first then ours and if not then just hook our function with it that will be called automatically.

Step 4: Putting it all together.

Thats it! We just created our very own js library. Don’t believe me? Lets have a test. But for that we need some functions that we are going to use to test. Lets just add two more function hide() and show(). I will use jQuery as internal library for easy test and also use jQuery selectors to pass the dom objects to the library. So our library will look like this –

(function() {
    var window = this,
    undefined, _js = window.js;

    //object initializarion
    js = window.js = function(selector) {
        return new jsObject(selector);
    };

    //the custom javascript object
    jsObject = function(selector) {
        this.jsReady = function(func) {
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
                window.onload = function() {
                    if (oldonload) {
                        oldonload();
                    }
                    func();
                };
            }
        };

        //the hide function to test our code
        this.hide = function (){
            $(selector).hide();
        };

        //the showfunction to test our code
        this.show = function(){
            $(selector).show();
        };
    };
})();

Step 5: Using the library.

Its simple to use the library, just make sure you include jQuery before including our library and try to use the codes as this –

js(document).jsReady(function(){
   js($("< your selector id, class or anything>")).hide();
});

Have fun….

Advertisements

About Mahmudul Islam

Senior Software Engineer Rokt (https://www.rokt.com/)
This entry was posted in Creative JS, JavaScript, Scripting Language and tagged , , , , , , . Bookmark the permalink.

4 Responses to Creating a handsome custom JavaScript library

  1. The example code (hide/show functions) shown here is merely for a demonstration. You can add as many functions as you like. Its not a mandatory that you have to use JQuery. I just used it to bypass the raw js codes and show you some example real fast.

    Like

  2. Thanks. Looking forward to more…

    Like

  3. if we need to include jquery then what’s the point of doing all of this.

    Like

I would like to say something ...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.