JavaScript (JS) Bytes 4

JavaScript

Thank you sticking around , in today's JS Bytes we will be covering an important aspect in mastering JavaScript. Writing our own custom library. By the end of this tutorial, you will be able to understand and decipher libraries like JQuery, CommonJS, RequireJS by modifying and playing with them 

We will be building a library called underscore (not related to underscore.js). Let's pick one particular function, or any aspect of web development/design that we would like our library to handle. Let's pick a niche need, and be happy with ourselves when we fill it.

Libraries like JQuery are generally invoked as an IIFE(Immediately Invoked Function Expression), thereby it is loaded into the current context of the page, and available for operations present inside them.

Our library underscore will take in an HTML Dom element's id and will do basic manipulation like hiding ./ showing/ changing color/ toggling the display and other trivial tasks, but the key takeaway will be that it set's the foundation patterns for building large scale robust libraries.

With no further delay, pull out your browser and start building your first custom JS Library.

_(#id) will be the invocation call to our library, similar to JQuery's $(#id)


//JS Bytes 4
(function _(id) {
var about = {
  Version: 0.1,
  Author: "Hari Santhosh",
  Created: "March 13 2018",
  site: "bludle.com"  
};

if (id) {
    if(window === this) {
    return new _(id);
}
this.e = document.getElementById(id); 
return this;
}
else {
    return about;
}
})();//IIFE Function invocation
_.prototype = {
   bludle: function() {
       alert("Hi From bludle!");
   },
   hideelement: function () {
      this.e.style.display = 'none';
      return this;
   },
 
   showelement: function () {
      this.e.style.display = 'inherit';
      return this;
   },
 
   changecolor: function (color) {
      this.e.style.background = color;
      return this;
   },
 
   setval: function (newval) {
      this.e.value = newval;
      return this;
   },
 
   toggledisplay: function () {
      if (this.e.style.display !== 'none') {
         this.e.style.display = 'none';
      } else {
         this.e.style.display = '';
      }
      return this;
   },
 
   changesize: function (height, width) {
      this.e.style.height = height + 'px';
      this.e.style.width = width + 'px';
      return this;
   }
};

After executing this as a script in your browser, try using the library with the invocation variable q = _("id").

Now try using the sample method q.bludle().

You will be greeted with a hello message from your custom library!

In case if you have missed it while initializing the methods of our library we have attached it to the prototype object, so that it won't be initialized again when the library is invoked. This is just a beginning to whole lot of possibilities in JavaScript.

We have given you the keys to the kingdom, now play around with any open source JS library, add your own custom methods and minify , bundle and deploy them in your application. 

Until next time !

 

 

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.