Structure JavaScript Code

Jawadhasan
Apr 20 · 5 min read
Photo by Shahadat Rahman on Unsplash

Introduction

Modern JavaScript frameworks like Angular, Vue, etc have a built-in mechanism to structure JavaScript code. When not using these frameworks, we can use simple techniques to structure our JavaScript. In this post, I will show you one of them using the Revealing module pattern.

This pattern is very popular and there are a great many resources online utilizing this design and here I will try to share a simple implementation of the same.

Why Structure JavaScript Code

Encapsulated and modular-based JavaScript code promotes reusability and is better for maintenance. To avoid spaghetti JavaScript all over the code base, the Revealing module pattern shall be used to structure JavaScript code.

Following are some of the benefits of using this pattern:

  • “Modularize” code into re-usable objects.
  • Variable/functions taken out of global namespace
  • Expose only public members
  • “Cleaner” way to expose public members

Revealing Module Structure

Here is an example of kind of the standard format and structure for the revealing module pattern.

Initial Setup

Before we dive into JavaScript code, let’s talk about the initial development environment setup. I am using a very basic JavaScript project for the demo, it just has a single HTML page, some CSS styles, and a basic dev server. For more information, please check the post: Basic Front-end Dev. Environment Setup. This will set up a starting point for us to move forward.

At this point, I have some HTML and an empty app.js file.

App JavaScript code

Let’s start with the application itself. Following the structure mentioned above, here is the shell for our application.

var app = function () { 
//private members //public API return {
};
}();

Now, let’s add some functionality to our app:

var app = function () { 
//private members
title = 'Structure JavaScript'; displayTitle = function(){
alert(this.title);
}
displaySite = function(){
alert('site info...');
}
//public API return {
title:title,
displayTitle: displayTitle
};
}();

Here, I added one property title and two functions displayTitle() and displaySite(). Then in the public API section I exposed the title property and one function. Notice that I did not exposed the displaySite function and this illustrate a private functions which shall not be accessible from outside of this code block.

Next, I added the following code in the document.ready in index.html as shown below:

<script> $(document).ready(function () { 
console.log(app.title);
app.displayTitle();
app.displaySite();//this will not work
});
</script>

Now, if you run the npm start command and go to browser page, you will see that first two lines works and the third line app.displaySite() does not work, which is expected.

So, this is the general idea of this pattern. It helps us organize our JavaScript code while not polluting the global namespace.

Next, let’s see how we can use this pattern to consolidate AJAX calls.

Consolidating AJAX calls

In order to eliminate scattered Ajax calls throughout the code, we can use Revealing Module Pattern to consolidate Ajax calls.

Developers can create data-services script and use Ajax promises for success and failure scenarios via callbacks.

Typically a project will have more than one data-service and to not repeat the boiler plate ajax code. we can refactor actual Ajax calling part in to another JavaScript object called, ajaxService and you guessed it right, we can use Revealing Module pattern for this service as well.

ajaxService will be a low-level implementation detail and it will handle all type of ajax calls. While Data-Services will use the ajaxService to perform data related operations.

ajaxService Implementation

Here is simple implementation of ajaxService (ajaxService.js). It just have one method which takes some input and returns a promise which calling code can then use for making ajax calls.

DataService Implementation

I created another JavaScript file called dataService.js with the following code:

It is also using Revealing Module pattern and code is simple. this service uses ajaxService internally. Note that I am using a publicly available test backend on internet and making ajax calls to it. You can use your own REST API by replacing the endpoints (URLs).

App.js code Update

I created new methods in app.js file and these methods use dataService for its operations.

Application Bootstrap

I also referenced these JavaScript files in index.html page and updated the ready function as shown below:

and here is the console output of these operations:

Summary

Revealing Module Pattern can help structure JavaScript code. It has limitations, but for simple code bases, this can work very well. You can download the demo code from this git repo. Let me know if you have some comments or questions. Till next time, Happy Coding.

Originally published at https://hexquote.com on April 20, 2021.

CodeX

Everything connected with Tech & Code

Jawadhasan

Written by

Hi there! I’m Jawad and I’m a software solutions engineer. I live in Dusseldorf, Germany, have a great interest in books and movies, and Astrophysics as well.

CodeX

CodeX

Everything connected with Tech & Code

Jawadhasan

Written by

Hi there! I’m Jawad and I’m a software solutions engineer. I live in Dusseldorf, Germany, have a great interest in books and movies, and Astrophysics as well.

CodeX

CodeX

Everything connected with Tech & Code

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store