What is modularization? Modularization breaks large code
base into smaller blocks of manageable code, thereby improving maintainability,
reusability and extensibility. Modularization when done properly decouples the
functionality and reduces the dependencies.
Why modularization? Imagine a large application with huge
amount of code, without encapsulation, with conflicting global scope, with huge
dependencies, with tight coupling and developed with JavaScript. Now imagine
you need to support this huge code base. Won’t it be easier if the code is
properly managed with loose coupling and reduced dependencies?
Modularization sounds great and has been a tenet in all
traditional programming languages such as C#, VB, Java. Developers in these
languages code modularized code without even thinking about it. Unfortunately
this is a big deal in JavaScript as the current version of JavaScript does not
provide a clean way of modularizing the JavaScript code. So what to do now?
Thanks to the RequireJS, writing modular code is JavaScript
is easier and you can do it now.
In this blog I will walk you through how to easily
modularize your javascript code using one of the most popular and commonly used
JavaScript library, RequireJS. RequireJS has several other advantages in
addition to modularization, but in this blog I will only focus on
modularization and walk you through converting a small javascript code into a
modular javascript code using RequireJS.
Here is a small javascript code which calculates the
discount for a product in an ecommerce application
function getPrice() {
console.log("Getting
price")
return 120;
}
function calculateDiscount(price)
{
console.log("Calculating
discount")
var discount = 10;
return price * (100 - discount) / 100;
}
var actualPrice = getPrice();
var price = calculateDiscount(actualPrice);
alert(price);
The above code can be huge if have thousands of products and
several discount promotions. Typically in server side code using C# we classify
this code into classes as mentioned below.
- Product object which returns the price of a
product
- Discount object which calculates the discounted
price based on the promotion
- Main or caller class which calls into this
calculation
RequireJS provides the similar approach in JavaScript. We
can define Product, Discount and Main modules in Javascript and partition this
code. Here is the modularized code using RequireJS
product.js
define([],
function () {
return {
getPrice : function () {
console.log("Getting price")
return 200;
}
}
});
discount.js
define([],
function () {
return {
calculateDiscount : function(price) {
console.log("Calculating discount")
var discount = 10;
return price * (100 - discount) / 100;
}
}
});
main.js
require([product', discount'], function (product, discount)
{
var actualPrice = product.getPrice();
var price = discount.calculateDiscount(actualPrice);
alert(price);
});
As you see the product.js and discount.js scripts are
enclosed with define attribute, but the main.js is enclosed with require
attribute. The primary difference between these two are, require attribute
defines and runs the code within. Hence you need require if you want to execute
immediately. This is similar to the document.onload event.
On your page you just need to include the main.js and all
the other javascript files will be automatically loaded by RequireJS. Here is
the syntax for the script include tag.
<script data-main="scripts/main" src="scripts/require.js"></script>
RequireJS makes modularization easy and doable
with today’s technologies.
