Learn how to decouple your code and organize it into reusable modules
Require.js is a JavaScript library that allows you to organize your code into separate modules. It follows the Asynchronous Module Definition API. Each module is an individual JavaScript file. You may, at first, bristle at this pattern because it forces you to rethink the way you organize your JavaScript. But while it may be a bit of an acquired taste, this approach encourages you to write code that is less coupled and easier to reuse.
The two methods that you will likely use the most are require() and define(). In both cases, you specify zero or more modules that your module “depends” on. When you do so, those modules will be loaded asynchronously. These dependencies are specified by a string which is a path to that JavaScript file. These strings must be in an array even if there is only one.
Following the array is an anonymous function. That function takes each dependency as an argument. What you do inside of that function is up to you. Just keep in mind that this function’s return value is what the outside world will “see” when they require your module.
Example # 1 A
|
1 2 3 |
define(function(){ console.log('Hello from module # 1.'); }); |
Example # 1 B
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title> </head> <body> <script src="require.js"></script> <script> require(["module-1"], function() { }); </script> </body> </html> |
Example # 1 A shows the code for our first module. It is a single JavaScript file named module-1.js. In that file, we execute the define() function. The define function takes a single argument, which is an anonymous function. In that function, we simply output some text to the console. Our module doesn’t do too much, but we’re keeping it simple for demonstration purposes.
In Example # 1B, we have the code for our web page. At the bottom of the page, we first pull in require.js. Then we execute the require() function. The first argument that it receives is an array. In this case, that array has only one element: “module-1”. That tells require: “hey, there is a file named ‘module-1.js’; load it asynchronously, and when that script has completed loading, run the following anonymous function.” In this example, the anonymous function has no code, so it does nothing.
Example # 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title> </head> <body> <script src="require.js"></script> <script> require(["module-1"], function() { console.log('Finished loading module # 1.'); }); </script> </body> </html> |
In example # 2, we output some text to the console in the anonymous function. That console.log() call will only fire after module-1.js has loaded. This is where we start to see the brilliance of Require.js: you can have another module as a dependency, and your code will only execute once that dependency has loaded successfully.
Example # 3 A
|
1 2 3 4 |
define(function(){ console.log('module # 1 ran'); return "Hello, I am the return value of module # 1." }); |
Example # 3 B
|
1 2 3 4 |
define(function(){ console.log('module # 2 ran'); return "Hello, I am the return value of module # 2." }); |
In Examples # 3A and 3B, we see that we now have two modules. In each case, we output some text to the console, just to show that the module executes, and then each module returns a string.
Example # 3 C
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Getting Started with Require.js Part I | blog.kevinchisholm.com</title> </head> <body> <script src="require.js"></script> <script> require(["module-1","module-2"], function(mod1,mod2) { console.log('mod1 -> ' + mod1); console.log('mod2 -> ' + mod2); }); </script> </body> </html> |
In example # 3C, we pass an array with two elements as the first argument to the require() function: “module-1” and ,”module-2”. The anonymous function that is the second argument receives the return value of each member of that array. We can name these whatever we want. I used “mod1” and “mod2”, but I could just as well have named them “sally” and “sam”. It doesn’t matter; they are simply identifiers for the return value of each dependency. We demonstrate all of this by outputting the return value of each module to the console.
The working example for this article can be found here: http://examples.kevinchisholm.com/javascript/requirejs/part-i/
Summary
In this article, we were introduced to Require.js. We learned about how this JavaScript library allows you to organize your code into individual JavaScript files called “modules”. We learned about the define() and require() functions, their signatures, and how they are used in order to asynchronously load dependencies and create references to their return values.
Helpful Links for Require.js
http://requirejs.org/
http://blog.teamtreehouse.com/organize-your-code-with-requirejs
http://net.tutsplus.com/tag/requirejs/
http://requirejs.org/docs/whyamd.html
