ARTICLE

Require.JS For Web Development: Part 2

Posted by Venkatesh Kumar Articles | JQuery August 23, 2012
In this we will see some advanced features of Require JS and their implementation.
Reader Level:

Introduction

In this we will see some advanced features of Require JS and their implementation.

Config options

Let's start with various config options. We didn't used config file in the previous article.

What is in main.js?

A call to require() to load all the scripts you need and any initialization you want to do for the page. This example main.js script loads two plugins, jquery.alpha.js and jquery.beta.js (not the names of real plugins, just an example). The plugins should be in the same directory as require-jquery.js:

RqrJS1.jpg

Our config script will look like the preceding. Every parameter is optional and "baseUrl", "paths" are what we mainly used in this application.

Step 1

Add the script references as shown below in the Master page:

<script type="text/javascript" src="scripts/require.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>

Now when we run the application we get the same results as in the previous article. Why do we want to use the Config option? Notice that we can shorten the JavaScript file names and control the script path also.

Now in the path section, we added two different versions of jQuery. Note that we didn't add the ".JS" file extension to the script names.

RqrJS2.jpg

In the Default page, we just added the following script. Two different versions of jQuery files will be handled in this script. One main advantage is that if we want to move to future versions of jQuery, we will simply change config file alone to upgrade the entire application.

RqrJS3.jpg

Shim

Shim is used to Configure the dependencies and exports for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value. Example:

RqrJS4.jpg

In this code we mentioned that "PrettyPhoto" is dependent on the "jQuery-1.6.1" version and every time the "jQuery-1.6.1" version is loaded before the "PrettyPhoto" loaded. We will check the order of the script as below.

RqrJS5.jpg

Module

Asynchronous Module Definitions are designed to load modular code asynchronously in the browser and server. It is actually a fork of the Common.js specification. Many script loaders have built their implementations around AMD, since it as the future of modular JavaScript development.

The Asynchronous Module Definition API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. Please check the following URL for more details about module.

http://requirejs.org/docs/whyamd.html

Created a simple module as mentioned below, just return some string data. We will notice that this as anonymous function, we didn't mention any names.

RqrJS6.jpg

Define another module with the name "another-message".

RqrJS7.jpg

For easy understanding these modules are kept as a separate js file and in the Main.jS (wherever required) we can refer to the modules as shown below:

RqrJS8.jpg

In this code we are calling the anonymous function module, passing jQuery and the anonymous function as the parameter and obtaining the results as shown below.

RqrJS9.jpg

We will combine one more module called "another-message" and the module code will be placed in a separate file.

RqrJS10.jpg

The output will combine the results of both modules and will see the order of the modules also.

RqrJS11.jpg

Summary

Using "Require JS" we will write clean code and resolve the dependence via creating the modules.

COMMENT USING
Employers - Post Free Jobs