Very often, we have to split a solid application to the set of simple modules. And of course, such modules can have dependencies. In such situations we have to manage dependencies somehow. For example we can have module A which is using modules B and C. And module B use modules D and E. So we have to load this modules in order:
RequireJS - one of the tools for managing such situations. Using is we will have just to load main file and requirejs itself:
Let's create a simple application without require.js and after that let's re-write it with it.
In our application we will have 2 entities: User and Department. 2 tools: Validator and Logger. And main file which is using them all.
Here we have most interesting thing: we are getting dependencies using require.js
require(["user", "department", "logger", "validator"], function (User, Department, Logger, Validator) {
Here we just have to point to our main file ("js/main.js" - file ending ".js" can be omitted) and path to require.js(url).
logger.js:8 user:[1]Joe
logger.js:8 user:[2]Black
logger.js:12 department:[1]IT. users:Joe,Black
<script src="js/E.js"></script> <script src="js/D.js"></script> <script src="js/B.js"></script> <script src="js/C.js"></script> <script src="js/A.js"></script>
RequireJS - one of the tools for managing such situations. Using is we will have just to load main file and requirejs itself:
<script data-main="js/A" src="http://requirejs.org/docs/release/2.3.2/comments/require.js"></script>
Let's create a simple application without require.js and after that let's re-write it with it.
In our application we will have 2 entities: User and Department. 2 tools: Validator and Logger. And main file which is using them all.
1. Without require.js.
We are just creating separate js files and after all w will have to list them in proper order in html file.1.1 User object
function User(id, name) {
this.id=id; this.name=name; this.toString = function() { return name; } }
1.2 Department object
function Department(id, name) { this.users=[]; this.id=id; this.name=name; this.addUser = function(user) { this.users.push(user); }; this.getUsers = function() { return this.users; }; }
1.3 Validator object
function hasAttribute(object, attribute) {
return object.hasOwnProperty(attribute); } function isValid(object) { return hasAttribute(object, "name") && hasAttribute(object, "id"); }
1.4 Logger
function idNameFormat(object) { return "["+object.id+"]"+object.name; } function logUser(user) { console.log("user:"+idNameFormat(user)); } function logDepartment(department) { console.log("department:"+idNameFormat(department)+" users:"+department.getUsers().toString()); }
1.5. Main script
We are just creating several objects, validating them and printing them using logger.
function run() { var user1=new User(1, "Joe"); var user2=new User(2, "Black"); var dep1=new Department(1, "IT"); dep1.addUser(user1); dep1.addUser(user2); if (isValid(user1) && isValid(user2) && isValid(dep1)) { logUser(user1); logUser(user2); logDepartment(dep1); } else { console.log("errors in validation"); } }
1.6 HTML file
All our modules has to be listed in a proper order otherwise our application will not work.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="js/validator.js"></script> <script src="js/user.js"></script> <script src="js/department.js"></script> <script src="js/logger.js"></script> <script src="js/main.js"></script> <script> run(); </script> </body> </html>
2. Now let's rewrite application using require.js
2.1. User
We are defining User function and returning it.define(function () { function User(id, name) { this.id = id; this.name = name; this.toString = function () { return this.name; }; } return User; });
2.2. Department
The same as with User.define(function () { function Department(id, name) { this.users = []; this.id = id; this.name = name; this.addUser = function (user) { this.users.push(user); }; this.getUsers = function () { return this.users; }; } return Department; });
2.3 Validator
Here we have private method "hasAttribute" and public method "isValid".define(function () { function hasAttribute(object, attribute) { return object.hasOwnProperty(attribute); } return { isValid: function (object) { return hasAttribute(object, "name") && hasAttribute(object, "id"); } } });
2.4 Logger
Here we also have private method and 2 public methods.define(function () { function idNameFormat(object) { return "[" + object.id + "]" + object.name; } return { logUser: function (user) { console.log("user:" + idNameFormat(user)); }, logDepartment: function (department) { console.log("department:" + idNameFormat(department) + ". users:" + department.getUsers().toString()); } } } );
2.5 Main
Here we have most interesting thing: we are getting dependencies using require.jsrequire(["user", "department", "logger", "validator"], function (User, Department, Logger, Validator) {
console.log("Hello world!"); var user1 = new User(1, "Joe"); var user2 = new User(2, "Black"); var dep1 = new Department(1, "IT"); dep1.addUser(user1); dep1.addUser(user2); if (Validator.isValid(user1) && Validator.isValid(user2) && Validator.isValid(dep1)) { Logger.logUser(user1); Logger.logUser(user2); Logger.logDepartment(dep1); } else { console.log("errors in validation"); } });
2.6. HTML file
Here we just have to point to our main file ("js/main.js" - file ending ".js" can be omitted) and path to require.js(url).<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script data-main="js/main" src="http://requirejs.org/docs/release/2.3.2/comments/require.js"></script> </body> </html>
3. Execution.
logger.js:8 user:[1]Joe
logger.js:8 user:[2]Black
logger.js:12 department:[1]IT. users:Joe,Black
