Create a JavaScript Library From Scratch (Build Reusable Components)
jQuery is the most popular JavaScript library that is used by many platforms and CMS like WordPress, Drupal, Magento, and many others. Let's learn how we can create a JavaScript library of our own similar to jQuery with similar selectors, event handlers, and CSS utilities.
Almost every web developer has encountered the use of jQuery at some point in daily development tasks. jQuery's prototypes make it possible to extend the functionality further and write jQuery-dependent libraries. There are a number of libraries and plugins that extend jQuery, like jQuery UI, Bootstrap, Select2, DataTables, Owl Carousel, Lightbox, and more. This post demonstrates how to create a JavaScript library and replicate a few features of jQuery as an example. We will also use the IIFE (Immediately Invoked Function Expression) technique to initialize our library.
It is going to be a small and simple library just to illustrate the basic working model of jQuery. First, we are going to create a JS object, and we are going to use $$ as the object name. We will use an Immediately Invoked Function Expression to create the instance of our library object. So let's start by using a self-invoking function to define our object that accepts a selector as a parameter.
Create JavaScript Library Definition (Self-Invoking Function)
The following code is a very basic implementation of our library that accepts selectors similar to jQuery. We can select elements like jQuery with $$("p"), $$(window), $$(document), etc. A brief step-by-step
explanation of the code below is:
- Call the self-invoking function by providing it with the window and document objects as parameters.
- Check if the
$$is called as a constructor. If not, then create a new instance of$$. - Set up
thisand the elements array for storing selected elements. - Define types of selectors, including HTML elements and a string as a selector similar to CSS selectors.
- Append all selected elements to the object's elements array.
- Then we append the
$$object to the window object.
(function (win, doc) {
function $$(selector) {
// Initiate the library object if it hasn't been initiated
if (!(this instanceof $$)) {
return new $$(selector);
}
this.length = 0;
let elements = [];
if (selector instanceof HTMLElement || selector == window || selector == document) {
elements = [selector];
} else if (typeof selector === "string") {
elements = doc.querySelectorAll(selector);
}
// Push all elements to library object
if (elements.length) {
this.length = elements.length;
for (let i = 0; i < this.length; i++) {
this[i] = elements[i];
}
}
return this;
}
// Append the library object to the window object
win.$$ = $$;
})(window, document);Write a JavaScript Library using Prototypes
Now that we are able to select elements, let's use prototypes to add some functions to our object.
Notice that our prototype function, each: function(){...} does all the heavy lifting for the library. It serves as a reusable prototype for other prototypes
and calls the callback function provided to it by other prototypes. It
calls the callback function on every element present in the object and passes
three values (the current element, the object itself, and the current index).
Now that our library is ready, let us use it in our sample code.
$$.prototype = {
each: function (callback) {
for (let i = 0; i < this.length; i++) {
callback.call(this[i], this, i);
}
return this;
},
ready: function (callback) {
return this.each(function () {
win.addEventListener("DOMContentLoaded", callback, false);
});
},
on: function (name, callback) {
return this.each(function () {
return this.addEventListener(name, callback, false);
});
},
hide: function (speed, callback) {
return this.each(function (ob) {
return ob.css("display", "none") && ob;
});
},
show: function (speed, callback) {
return this.each(function (ob) {
return ob.css("display", "block");
});
},
toggle: function (speed, callback) {
return this.each(function (ob) {
if (!ob.is(":visible")) {
return ob.css("display", "block");
} else {
return ob.css("display", "none");
}
});
},
is: function (prop) {
switch (prop) {
case ":visible":
return this[0].clientHeight > 0 && this[0].clientWidth > 0 ? true : false;
break;
}
},
css: function (param1, param2) {
this.each(function () {
if (typeof param1 === "object") {
for (x in param1) {
this.style[x] = param1[x];
}
} else if (typeof param1 === "string" && typeof param2 === "string") {
this.style[param1] = param2;
}
});
return window.getComputedStyle(this[0]).getPropertyValue(param1);
},
addClass: function (className) {
return this.each(function () {
return this.classList.add(className);
});
},
removeClass: function (className) {
return this.each(function () {
return this.classList.remove(className);
});
},
toggleClass: function (className) {
return this.each(function () {
if (this.classList.contains(className)) {
return this.classList.remove(className);
} else {
return this.classList.add(className);
}
});
}
};Create an HTML Page to Use a JavaScript Library
Create an HTML page as a user interface with containers containing sample text to test the functionality of our library. We will implement the hide/show/toggle and add/remove/toggle CSS classes in our example.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Create a JavaScript Library From Scratch - Demo</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/library.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript"></script>
</head>
<body>
<section class="section py-4">
<div class="container">
<div class="mb-4">
<div>
<button class="btn btn-default btn-hide">Hide</button>
<button class="btn btn-default btn-show">Show</button>
<button class="btn btn-default btn-toggle">Toggle</button>
Hide, Show or Toggle paragraph below:
</div>
<div class="p-wrapper">
<p class="hide-show-toggle">
Aenean aliquam libero dolor, vel efficitur leo tempus sit amet. Aliquam erat volutpat. Ut malesuada leo
id cursus congue.
Integer congue dolor ac risus laoreet, vitae fringilla dolor tempor. Nunc vitae rutrum elit.
Quisque dolor nulla, vulputate in mi vel, imperdiet tristique metus.
Integer sed ante vel ex elementum placerat sodales ut lectus. Integer sit amet posuere nulla.
Mauris eget lacinia est. Suspendisse laoreet euismod sollicitudin. Donec eu vehicula eros. Nunc mi
magna, vestibulum sed scelerisque sed, consequat eu leo.
</p>
</div>
</div>
<div class="mb-4">
<div>
<button class="btn btn-default add-class">Add Class</button>
<button class="btn btn-default remove-class">Remove Class</button>
<button class="btn btn-default toggle-class">Toggle Class</button>
Add, Remove or Toggle class on paragraph below:
</div>
<p class="add-remove-toggle">
Morbi felis diam, ornare et lorem sed, accumsan fermentum nunc.
Fusce elementum auctor tortor vitae hendrerit. Nunc a tincidunt velit. Duis nec ornare ante, at ullamcorper
massa.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam nisl dolor,
dapibus eu sollicitudin id, ornare fermentum odio.
Curabitur laoreet enim enim, a elementum nisl ornare eget. Ut lectus sem, mollis vitae augue ut, consectetur
mattis augue. Etiam vel placerat nisi, quis consectetur magna.
Sed a condimentum ipsum. Phasellus non nisi augue. Donec venenatis metus vel laoreet varius. Curabitur elit
risus, vulputate ut sagittis a, placerat quis quam.
</p>
</div>
</div>
</section>
</body>
</html>
Add CSS Styles
Add needed CSS styles for the HTML page and containers used in our example.
style.css
* {
box-sizing: border-box;
}
html,body {
margin: 0;
padding: 0;
}
body {
background-color: #f6f6f6;
font-family: "Segoe UI", "Roboto", "Helvetica", sans-serif;
font-size: 15px;
font-weight: normal;
font-style: normal;
}
a {
text-decoration: none;
color: #3778cd;
}
.container {
max-width: 1140px;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.btn {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
font: inherit;
background: #fff;
border: 1px solid #eee;
}
.bg-color {
background: #006cad;
color: #fff;
}Example Usage of JavaScript Library
The following code block will add event listeners using the JavaScript library we just created. We will listen to some events and bind them to trigger attached functions like hide, show, toggle, etc.
javascript.js
$$(document).ready(function () {
$$(".btn-hide").on("click", function () {
$$(".hide-show-toggle").hide();
});
$$(".btn-show").on("click", function () {
$$(".hide-show-toggle").show();
});
$$(".btn-toggle").on("click", function () {
$$(".hide-show-toggle").toggle();
});
$$(".add-class").on("click", function () {
$$(".add-remove-toggle").addClass("bg-color");
});
$$(".remove-class").on("click", function () {
$$(".add-remove-toggle").removeClass("bg-color");
});
$$(".toggle-class").on("click", function () {
$$(".add-remove-toggle").toggleClass("bg-color");
});
});Creating our own libraries from scratch is a great way to learn and understand how popular libraries like jQuery work behind the scenes. Making such libraries requires an understanding of JavaScript concepts like Immediately Invoked Function Expressions (IIFE), objects, prototypes, and events. With a proper understanding of these concepts, we can build libraries of our own and simplify common DOM manipulation and event-handling tasks.