Introduction
requireJs is most commonly used by java-script applications such as Kendo UI and other major frameworks like Wordpress, Drupal etc... requireJs is a modularity based architecture which will help maintain the code for the developer to the ease of access and understanding.Understanding when and how to use
define() and require() which utilize requireJs library and these are the only methods to be used across your applications for incorporating modular approach. define() is used to define a module and require() is used to asynchronously load the javascript for the first time. HTML will understand the data-bind attribute of SCRIPT tag to identify initialized javascript for example it will be "js/main" and SRC of it will be "require.js". A realistic example for using requireJs is that, consider a scenario where your application is using jQuery as the library and there are form fields which are email and phone number fields. To validate email and phone number using jQuery library you need to load jQuery before rendering email and mobile number validator modules. Since email and phone number are dependent on jQuery it should be loaded prior. Here you should use define() method to build email and phone number validator function, which are called as modules. require() method should be used in main javascript file which will be use in data-bind ATTRIBUTES./****** HTML for including require.js ******/
<script data-main="js/main" src="js/thirdparty/require.js"></script>
/****** require() method example ******/
require(['jQuery','module/email', 'module/phone'],
function($,email, phone){
/*some function call or onclick event...*/
});
/****** define() method example ******/
define([], function () { /*some email validator function*/ });
Hello World example
Step 1 : Create or define a folder structure to place your modules and third-party libraries. In my application I have defined my JS structure as below,<ROOT_DIRECTORY>js/thirdparty/require.js <ROOT_DIRECTORY>js/thirdparty/jquery-1.9.1.min.js <ROOT_DIRECTORY>js/module/hello.js <ROOT_DIRECTORY>js/module/world.js <ROOT_DIRECTORY>js/main.js
Step 2 : Create a HTML file in your <ROOT_DIRECTORY> to initialize the main.js and name that HTML as index.html copy-paste the content given below,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World example with require JS</title>
</head>
<body>
<div id="container">
<p>Below string is printed from two different modules 'Hello' and 'World'</p>
<div id="result"></div>
</div>
<script data-main="js/main" src="js/thirdparty/require.js"></script>
<input type="button" value="click" id="req_click"/>
</body>
</html>
Step 3 : world module is dependent on hello module so the order of the module called is important.Open main.js copy-paste the content given below,
// Load modules and use them
require(
['module/hello', 'module/world','thirdparty/jquery-1.9.1.min'],
function(helloref, worldref,$){
$("#req_click").click(function(){
alert("I'm clicked");
});
var hello = new helloref(),world = new worldref();
$("#result").html(world.getName());
}
);
Step 4 : Creating hello module. Open module/hello.js copy-paste the content given below,
define([], function () {
var helloModule = function () {
var _name = 'Hello';
this.getName = function () {
return _name;
}
};
return helloModule;
});
Step 5 : Creating world module. Open module/world.js copy-paste the content given below,
define(['module/hello'], function (helloref) {
var hello = new helloref();
var _name = 'World !';
var worldModule = function () {
this.getName = function () {
return hello.getName()+' '+ _name;
}
};
return worldModule;
});
If you run your index.html in your browser you will see the browser output as "Hello World !".
Let us know your feedback on the article.The post Understanding requireJs hello world example appeared first on Mydons.