5 Ways To Create Reusable Javascript Components (Simple Examples)

Welcome to a tutorial on how to create reusable Javascript Components. Back in the school days, lecturers often preached about reusability in object-oriented programming. But the sad part is that they have never gone into the proper details of how to do it. So here it is, let us walk through some common ways to build reusable components in Javascript – Read on!

 

 

TABLE OF CONTENTS

 

 

WHAT ARE REUSABLE COMPONENTS?

Have you written functions before? If yes, then well done. You have already created a simple version of a reusable component. But some angry trolls are going to disagree, and it is all right to do so. The term “reusable component” can be very subjective today.

• To some people, it can mean a “framework”.
• Or a “module”.
• Maybe as a “widget” and “plugin”.
• Perhaps even a “library”.

Everyone has their own perspective of what a “reusable component” should be. But I think in the simplest manner – So long as a piece of Javascript code can be reused and applied in different areas, I will consider it to be a reusable component.

 

 

MANY WAYS TO CREATE REUSABLE COMPONENTS

There are probably endless ways to create reusable components in Javascript. But let me do a quick compilation and generalization:

1. Object – Group all functions and properties into an object.
2. Class – Good old object-oriented programming.
3. Encapsulated Anonymous Function – A rather funky way to create a library.
4. Modules – Import, export, or require in the “NodeJS way”.
5. Web Components – Build your own reusable HTML elements. Some of you guys should have already heard of some of these – React, Angular, Lit.

As to which one is “correct” – All of them are, you decide for yourself which is the best way.

 

 

 

METHOD 1) OBJECT

1A) COLLECTION OF FUNCTIONS

var mylib = {
  // (A) AJAX : DO A POST AJAX CALL
  // url : target url
  // done : function to call when server responds
  ajax : (url, done) => {
    fetch(url, { method:"POST", body:form })
    .then(res => res.text())
    .then(txt => done(txt));
  },
 
  // (B) LOAD : USE AJAX TO LOAD CONTENTS
  // url : target url
  // target : id of target html element
  load : (url, target) => mylib.ajax(
    url, txt => document.getElementById(target).innerHTML = txt
  )
};

This may seem intimidating to some beginners, but keep calm and look carefully.

• Start by creating an object. Here, we have var mylib = {}.
• Simply append all the reusable functions into the object.
  • mylib.ajax() Does a simple AJAX fetch() call.
  • mylib.load() Rides on top of mylib.ajax(), puts the server response into a specified HTML element.

Yes, that’s all. All we are doing here is sandwiching functions in an object. This is easier to manage than having a ton of functions all over the place.

 

1B) USAGE EXAMPLE

<!-- (A) LOAD LIBRARY -->
<script src="1a-mylib.js"></script>
 
<!-- (B) AJAX LOAD CONTENT -->
<div id="demo"></div>
 
<script>
mylib.load("1c-dummy.html", "demo");
</script>

<strong>It Works!</strong>

With that, we have a simple library that has a reusable AJAX call function to load HTML content.

 

 

METHOD 2) CLASS

2A) CLASS LIBRARY

class Mylib {
  // (A) AJAX : AJAX FETCH
  // url : target url
  // done : function to call when server responds
  ajax (url, done) {
    fetch(url, { method:"POST" })
    .then(res => res.text())
    .then(txt => done(txt));
  }
 
  // (B) LOAD : USE AJAX TO LOAD CONTENTS
  // url : target url
  // target : id of target html element
  load (url, target) {
    this.ajax(url, txt => document.getElementById(target).innerHTML = txt);
  }
}

If you prefer the “proper object-oriented way”, we can also create a class library in Javascript.

 

2B) USAGE EXAMPLE

<!-- (A) LOAD LIBRARY -->
<script src="2a-mylib.js"></script>
 
<!-- (B) AJAX LOAD CONTENT -->
<div id="demo"></div>
 
<script>
var mylib = new Mylib();
mylib.load("1c-dummy.html", "demo");
</script>

Create a new Mylib() object, use the library functions. The end.

 

METHOD 3) ENCAPSULATED FUNCTION

3A) FUNKY ANONYMOUS FUNCTION

(() => {
  // (A) AJAX : AJAX FETCH
  // url : target url
  // done : function to call when server responds
  var ajax = (url, done) => {
    fetch(url, { method:"POST" })
    .then(res => res.text())
    .then(txt => done(txt));
  };
 
  // (B) LOAD : USE AJAX TO LOAD CONTENTS
  // url : target url
  // target : id of target html element
  var load = (url, target) => {
    ajax(url, txt => document.getElementById(target).innerHTML = txt);
  };
 
  // (C) "PUBLIC FUNCTIONS"
  window.mylib = { load : load };
})();

If your reaction is WTF, you are not alone. I was confused when I first learned about this way of creating libraries.

• First, we have a “regular anonymous arrow function” (a function without a name) – () => {}
• Then, encapsulate it in round brackets – ( () => {} )
• Lastly, we run the encapsulated anonymous function – ( () => {} ) ()

So why go through all the confusing hassle? Abstraction.

• There are 2 functions here as usual – ajax() and load().
• But take note of window.mylib = { load : load }, only mylib.load() is accessible.
• That is, ajax() is locked inside the anonymous function, and there is no way to call it publically.

 

 

METHOD 4) JAVASCRIPT MODULES

export function first () { alert("first!") }
export function second () { alert("second!") }

<script type="module">
import * as mylib from "./4a-mylib.js";
mylib.first();
mylib.second();
</script>

Not going to dive deep into this one, as it will become a really long tutorial. I shall leave a link below if you are interested to learn more. But as a quick introduction – Javascript Modules are introduced in ES5. It basically allows us to import/export Javascript functions and variables as modules.

 

METHOD 5) WEB COMPONENTS

Lastly, we have something called “web components”. Basically, create our own reusable custom HTML elements, maybe something like this:

<datepicker max="+1 year" min="today" id="myPicker"></datepicker>

Not going to dive deep again, as this is quite a deep and advanced topic. Also, this is not quite a “Javascript component”. More of a cross between HTML, CSS, and Javascript.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

WHICH IS THE BEST METHOD?

Personally, I lean towards “object library”. It is straightforward and easy to maintain. But there’s nothing wrong with all the other methods too, even for methods that are not mentioned in this guide – Whatever works for you is the best method.

 

LINKS & REFERENCES

• Javascript Modules – MDN
• Web Components – MDN
• JavaScript Encapsulation using Anonymous Functions – Code Project