In Richards post he gives a nice quick introduction on how to get up and running quickly using Require in your solution. I noted that the way I have done this myself differs a little in that I also use data attributes in markup to control what is called where rather than Richards approach of inline script tags. It’s important to note that RequireJs only allows a script to be loaded once per page by default, so however you load your required scripts is much the same.
Attributes – data-require and data-require-inline
data-require-inline: Requires the named pipe delimited script(s) as they are found in the document
In the following example you can see how I use data attributes to govern what is required by which elements. In reality when you broke the page up into renderings A, B and C you may well any of the 3 grouped together in a regular page. Its worth noting that data-require and data-require inline can be put on any element in the document, so in theory at least, you could even add it to a script tag (though not sure why you would want to!). The body tag is very commonplace though.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Example Require Js</title> <script src="/assets/js/vendor/require.js"></script> <script src="/assets/js/main.js"></script> </head> <body> <!-- Rendering A - Requires featherlight and featherlight-start at document ready--> <div data-require="featherlight|featherlight-start"> <a href="">Link 1</a> </div> <!-- Rendering B - Requires silly-advertising-script immediately --> <div class="something-to-respond-to" data-require-inline="silly-advertising-script"> </div> <!-- Rendering C - Requires just script-a at document ready --> <a data-require="script-a" href="www.asite.com"></a> </body> </html>
The way (in this case for continuity) I have achieved this, is to use a modified version of Richard Seal’s main.js