Aug
10
RequireJS – Quick Guide ”; Previous Next RequireJS – Overview RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code. RequireJS was developed by David Mark and its initial version v1.0.0 was released in 2009. It is an open source and version 2.3.3 is its recent stable release. Why use RequireJS? It is an open source JavaScript library under the MIT license. It provides asynchronous module loading. It has the ability to load nested dependencies. If you have many small files, then don”t need to worry about keeping track of dependencies order. It provides support for plugins and loads more than one JavaScript files. Features of RequireJS It manages the dependencies between JavaScript files and improves the speed and quality of the code. It combines and minifies the modules into one script for an optimized experience. It reduces code complexity in large applications. It gathers different JavaScript files from different modules at the time of compilation. It allows for easy debugging as it loads the files from plain script tags. RequireJS – Environment Setup In this chapter, we will understand how to set up the environment for RequireJS. For this, you need to download the latest version of RequireJS library. You can download either the minified version or detailed version. After downloading, we need to include the require.js file in your libs folder and the structure of your project should be as shown below − projectname/ |–index.html |–libs/ |—main.js |—require.js |—helper/ |—-util.js We need to define an html file as index.html where RequireJS is loaded as shown below. <html> <head> <script data-main = “libs/main” src = “libs/require.js”></script> </head> <body> <h1> RequireJS Sample Page </h1> </body> </html> Note that only require.js with a RequireJS call is included in the script tag to load the script. RequireJS in Node There are two ways to get the Node adapter. npm − You can install the latest release of requirejs from the command prompt as shown below. npm install requirejs Download r.js − You can download the r.js file from the download page and source from r.js repository page. RequireJS – Configuration RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute. It is used by RequireJS to know which module to load in your application. For instance − <script data-main = “scripts/main” src = “scripts/require.js”></script> To include the Require.js file, you need to add the script tag in the html file. Within the script tag, add the data-main attribute to load the module. This can be taken as the main entry point to your application. The scripts/main is a main JavaScript file of an application that contains the RequireJS configuration. Configuration Options Following are the configuration options which can be set while loading the first application module − baseUrl − It is a route path for all modules which are loaded through RequireJS. The baseUrl is indicated by a string starting with “slash (/)”, containing a protocol and ending with “.js” extension. If there is no baseUrl specified, then RequireJS uses the data-main attribute path as baseUrl. paths − It specifies the path mappings for modules which are relative to the baseUrl. It automatically adds the .js extension to a path when mapping the module name. shim − It provides the usage of non AMD libraries with RequireJS by configuring their dependencies and exporting their global values. map − For the given module, an application uses same module of different versions for different objectives by sharing their ids to make use of same code for different conditions. config − It provides the configuration to a module by using the config option and this can be done by using the special dependency “module” and calling its module.config() function. urlArgs − The query string arguments are used to fetch all resources that are loaded by using RequireJS. It is used for cache busting when there is improper configuration of browser or server. waitSeconds − It specifies the number of seconds to wait before throwing up on script loading. The default is “7” seconds and “0” disables the timeout. packages − It provides the CommonJS packages for configuring the loading modules. context − It provides the name for context loading which allows the loading of different modules in a page. deps − It is an array of dependencies that is required when Require is specified as config object before loading the RequireJS. callback − It executes a function after loading the dependencies and is required when Require is specified as config object before loading RequireJS. xhtml − It is used to create the script elements by using the document.createElementNS() method when this option is set to true. scriptType − It defines the value for script type attribute used in the document. Default type is “text/javascript”. skipDataMain − It skips the data-main attribute scanning while loading the module, if this option is set to true. RequireJS – AMD Modules A module in RequireJS is a scoped object and is not available in the global namespace. Hence, global namespace will not be polluted. RequireJS syntax allows to load modules faster without worrying about keeping track of the order of dependencies. You can load multiple versions of the same module in the same page. Defining Modules Module is defined using the define() function; the same function is used for loading the module as well. Simple Name/Value Pairs If the module is just a collection of name and value pairs, then you can use the following syntax − define({ state: “karnataka”, city: “bangalore” }); Defining Functions A module can also use a function for frameworks, without having dependencies. This can be done by using the following syntax − define(function () { //Do setup work here return { state: “karnataka”, city: “bangalore” } }); Defining Functions with Dependencies If the module is having dependencies, the placement of the first