Homepage: http://requirejs.org/docs/api.html
Nice example: https://github.com/Integralist/RequireJs-Example
Why AMD?: http://requirejs.org/docs/whyamd.html
Specification: http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition
Twitter: @frank_neff
| /** | |
| * Maps core module | |
| * | |
| * @access public | |
| * @author Frank Neff | |
| */ | |
| define("maps/core", | |
| [ | |
| // require jQuery | |
| "./javascriptlibs/jquery.js", | |
| // require google maps api | |
| "http://maps.google.com/maps/api/js?sensor=false" | |
| ], | |
| function(google, jQuery) { | |
| // content of my module | |
| // make map | |
| var domTarget = jQuery(".map_container"), | |
| mapInstance = new google.maps.map(domTarget); | |
| /** | |
| * If there are some markers on the map. Load marker module | |
| */ | |
| if (markers.length > 0) { | |
| var itemFactory = require("maps/items"); | |
| itemFactory.placeMarkers(mapInstance); | |
| itemFactory.placeFlyouts(mapInstance); | |
| } | |
| } | |
| ); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My Sample Project</title> | |
| <!-- data-main attribute tells require.js to load | |
| scripts/main.js after require.js loads. --> | |
| <script data-main="scripts/main" src="scripts/require.js"></script> | |
| </head> | |
| <body> | |
| <h1>Maps Example</h1> | |
| <div class="map_container"></div> | |
| </body> | |
| </html> |
| define( | |
| /** | |
| * Define module "items" in package "maps" | |
| * If no module- or package-name given, naming will be inherited from filepath | |
| */ | |
| "maps/items", | |
| [ | |
| /** | |
| * require module "storage" in package "maps" | |
| * Filepath: "./maps/storage.js" | |
| */ | |
| "maps/storage" | |
| ], | |
| function(storage) { | |
| this.placeMarkers = function(mapInstance) { | |
| jQuery(storage.getMarkers()).each(function() { | |
| new google.maps.marker(this.getGeolocation(), mapInstance); | |
| }); | |
| } | |
| this.placeFlyouts = function(mapInstance) { | |
| // do something... | |
| } | |
| } | |
| ); |
| require(["maps/core"], function() { | |
| jQuery("body").trigger("Map successfully loaded"); | |
| }); | |
| require(["otherNS/module"], function() { | |
| jQuery("body").trigger("Other functionality successfully loaded"); | |
| }); |