JavaScript is the most powerful client-side programming language in the current decade and everyone those who have knowledge in it always try to use it in their programming. But most of the time we use it in an unsecure way where we haven’t maintain the OOP’s concept. So that’s why we can face a lot of trouble in a big or heavyweight project.
Don’t worry’s, there is a great solution for this issue. And the solution is we have to use module pattern in JavaScript where we can maintain the properties of OOP’s concept. Particularly when we write code we don’t follow the rules of a scope which is private, protected or public. If we use scope in any program then it will be much secure than any other code. And for JavaScript, functions are the only things that create a new scope. So if we want our modules to have their own scope, we will have to base them on functions.
Here, in this article, I will show you the pattern in which way we can easily put our all function inside a single scope. If we use that’s kind of coding format, it will be much secure than other patterns. I have created a simple system where we can add name in an array and it will show the output directly. I have used the module pattern and jquery for this simple system and also used HTML, CSS. First of all, I have created a simple HTML template and here is my code.
index.php
<!DOCTYPE html> <html> <head> <title>Modular JS</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div id="peopleModule"> <h1>People</h1> <input type="text" placeholder="Name"> <button id="addPerson">Add Person</button> <ul id="people"> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="module2.js"></script> <!-- <script src="module1.js"></script> --> <script src="statPeople.js"></script> </body> </html>
Now I have the related module code and here it is
module.js
var peopledata = { people : ['Karan','Samir'], init : function(){ this.cacheDom(); this.bindEvents(); this.render(); }, cacheDom : function(){ this.$pm = $('#peopleModule'); this.$button = this.$pm.find('button'); this.$input = this.$pm.find('input'); this.$ul = this.$pm.find('ul'); }, bindEvents : function(){ this.$button.on('click', this.addPeople.bind(this)); }, render : function(){ this.$ul.html(''); for(var i=0; i<this.people.length;i++){ this.$ul.append('<li><span>'+this.people[i]+'</span></li>'); } }, addPeople : function(){ this.people.push(this.$input.val()); this.render(); this.$input.val(''); } } peopledata.init();
Here I have declared some function inside a single scope name peopledata. First of all I declared a function init which is for initializaion and inside it I have declared other three function cacheDom, bindEvents, render and addPeople. They are all user define function and everyone have a particular job to do. cacheDom is for declaring all the global variable, all the events are done by the bindEvents function, all the changes in front end are done by the render function and whenever we add any people it will be done by the addPeople function. So here, we have defined all function in a single scope and that’s more secure than other technique.