Found JasonSmith anwer extremely useful, perhaps more than RequireJS documentation.
However, it is possible to optimize it to avoid separate AJAX requests for (tiny) declaration-of-declaration modules ("require_jquery" "require_sammy"). I would suggest that r.js will do this at the optimization stage, but you can do it ahead of time so as not to battle Path, the BaseURI system.
index.html
<html> <head> <script data-main="js/loader.js" src="js/require.js"></script> </head> </html>
loader.js:
// We are going to define( dependencies by hand, inline. // There is one problem with that through (inferred from testing): // Dependencies are starting to load (and execute) at the point of declaring the inline // define, not at the point of require( // So you may want to nest the inline-defines inside require( // this is, in a way, short replacement for Order plug in, but allows you to use // hand-rolled defines, which the Order plug in, apparently does not allow. var jQueryAndShims = ['jquery'] if(window.JSON == null){ jQueryAndShims.push('json2') define( 'json2' , ['js/libs/json2.min.js'] , function() { return window.JSON } ) } // will start loading the second we define it. define( 'jquery' , ['js/libs/jquery_custom.min.js'] , function() { // we just pick up global jQuery here. // If you want more than one version of jQuery in dom, read a more complicated solution discussed in // "Registering jQuery As An Async-compatible Module" chapter of // http://addyosmani.com/writing-modular-js/ return window.jQuery } ) // all inline defines for resources that don't rely on other resources can go here. // First level require( // regardless of depends nesting in 'myapp' they will all start downloading // at the point of define( and exec whenever they want, // async in many browsers. Actually requiring it before the nested require makes // sure jquery had *executed and added jQuery to window object* before // all resolved depends (jquery plugins) start firing. require(jQueryAndShims, function($) { // will start loading the second we define it. define( 'sammy_and_friends' , ['jquery','js/libs/jquery_pluginone.min.js','js/libs/jquery_plugintwo.min.js','js/libs/sammy.min.js'] , function($) { // note, all plugins are unaltered, as they are shipped by developers. // in other words, they don't have define(.. inside. // since they augment global $ (window.jQuery) anyway, and 'jquery' define above picks it up // , we just keep on returning it. // Sammy is attached to $ as $.sammy, so returning just Sammy makes little sense return $ } ) // second level require - insures that Sammy (and other jQuery plugins) - 'sammy_and_friends' - is // loaded before we load Sammy plugins. I normally i would inline all sammy plugins i need // (none, since i use none of them preferring jQuery direct templating API // and no other Sammy plug in is really of value. ) right into sammy.js file. // But if you want to keep them separate: require(['sammy_and_friends'], function() { // will start loading the second we define it. define( 'sammy_extended' , ['sammy_and_friends','js/libs/sammy_pluginone.min.js','js/libs/sammy_plugintwo.min.js'] , function($) { // as defined above, 'sammy_and_friends' actually returns (globall) jQuery obj to which // Sammy is attached. So we continue to return $ return $ } ) // will start loading the second we define it. define( 'myapp' , ['sammy_extended', 'js/myapplication_v20111231.js'] , function($, myapp_instantiator) { // note, myapplication may, but does not have to contain RequireJS-compatible define // that returns something. However, if it contains something like // "$(document).ready(function() { ... " already it MAY fire before // it depends - 'sammy_extended' is fully loaded. // Insdead i recommend that myapplication.js returns a generator // (app-object-generating function pointer) // that takes jQuery (with all loaded , applied plugins) // The expectation is that before the below return is executed, // all depends are loaded (in order of depends tree) // You would init your app here like so: return myapp_instantiator($) // then "Run" the instance in require( as shown below } ) // Third level require - the one that actually starts our application and relies on // dependency pyramid stat starts with jQuery + Shims, followed by jQuery plugins, Sammy, // followed by Sammy plugins all coming in under 'sammy_extended' require(['jquery', 'myapp'], function($, myappinstance) { $(document).ready(function() {myappinstance.Run()}) }) }) // end of Second-level require }) // end of First-level require
finally myapplication.js:
// this define is a double-wrap. // it returns application object instantiator that takes in jQuery (when it available) and , then, that // instance can be "ran" by pulling .Run() method on it. define(function() { // this function does only two things: // 1. defines our application class // 2. inits the class and returns it. return function($) { // 1. defining the class var MyAppClass = function($) { var me = this this._sammy_application = $.sammy(function() { this.raise_errors = true this.debug = true this.run_interval_every = 300 this.template_engine = null this.element_selector = 'body' // .. }) this._sammy_application.route(...) // define your routes ets... this.MyAppMethodA = function(blah){log(blah)} // extend your app with methods if you want // ... // this one is the one we will .Run from require( in loader.js this.Run = function() { me._sammy_application.run('#/') } } // 2. returning class instance return new MyAppClass($) // notice that this is INITED app, but not started (by .Run) // .Run will be pulled by calling code when appropriate } })
This structure (freely replaces (duplicates?) The RequireJS Order plugin, but) allows you to reduce the number of files you need for AJAX by adding more control to the definition of the tree of dependent and dependent.
There is also a big bonus to downloading jQuery separately (usually at 100k) - you can control caching on the server or cache jQuery in the localStorage browser. Take a look at the AMD-Cache project here https://github.com/jensarps/AMD-cache , then change the definition (instructions that include "cache!": And it will (forever :)) stuck in the user browser.
define( 'jquery' , ['cache!js/libs/jquery_old.min.js'] , function() {
A note on jQuery 1.7.x + It no longer attaches to the window object, so it will NOT work with the unchanged jQuery 1.7.x + file above. There you should configure jquery **. Js to enable this before closing "}) (window);":
;window.jQuery=window.$=jQuery
If you have jQuery undefined errors in the console, then the version of the jQuery icon you are using does not snap to the window.
License Code: Public domain.
Disclosure: JavaScript over the odors of "pseudo-code", as it is a rephrasing (manual trimming) of a much more detailed production code. The code presented above is not guaranteed to work and has NOT been tested to work as presented. Audit, test it. The semicolons are omitted specifically, since they are not required for the JS specification, and the code looks better without them.