Making libraries | modular components with javascript  

by ne on 2021-09-29 under Javascript

Hi there javascript fans!

I am sure you have had used or are using many many javascript libraries, whether in client's projects or just to entertain yourself.


Well, If you want to play around || do make some really useful javascript library, then read ahead.
 


function myComponent(id) {
   var about = {  // good practice to have an about object.
      Version: 0.1,
      Author: "nsthethunderbolt",
      Created: "Fall 2010",
      Updated: "23 November 2011"
   };
 
   if (id) {
      this.elem = document.getElementById(id);
      return this;
   }
   // can return about object or empty object if no id is provided
};
myComponent.prototype = {
   hide: function () {
      this.elem.style.display = 'none';
      return this;
   },
   show: function () {
      this.elem.style.display = 'block';
      return this;
   }
}

// now above can be used like following
var mComp=new myComponent('elemId');   // make sure to use the 'new' keyword in order to avoid modification of window object.
mComp.hide();


The above is example is really very basic, but it will surely help you learn something about making your own libraries and plugins for javascript.
Just make some properties(passable through json), functions(both private and public) and allow handlers to execute when called.
 
Happy coding :)