Helpful Tips When Using RequireJS

<div dir="ltr" style="text-align: left;" trbidi="on"> <h2 id="know_your_options_when_defining_modules" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; line-height: 28px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> 1.) Know Your Options When Defining Modules</h2> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Most people using RequireJS are familiar with this approach of defining a module:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">define</span><span class="pun" style="color: #666600;">([</span><span class="str" style="color: #008800;">"dependencyA"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"dependencyB"</span><span class="pun" style="color: #666600;">],</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">depA</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> depB</span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">/* module code here using depA and depB */</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> myModule</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> 98% of the time, I use the above approach. However, you have some other choices, depending on your needs. Have a module that takes no dependencies? If so, you can do this:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">define</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> someProp</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"Oooh, how interesting!"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> someMethod</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// do interesting work</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> compellingValue</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Have a module that takes no dependencies, but you need to perform some sort of setup work (or store private state)? You can do this:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">define</span><span class="pun" style="color: #666600;">(</span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> secretValue </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"seekret"</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// do other initialization work here...</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> someProp</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"Oooh, how interesting!"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> tellMeSecrets</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// do interesting work</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> secretValue</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">};</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <h2 id="how_to_work_with_non-amd_libs" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; line-height: 28px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> 2.) How to Work with Non-AMD Libs</h2> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> There are a ton of great JavaScript libraries out there. Majority of which don't follow the AMD spec, but don't worry that doesn't have to keep you from using them! Since RequireJS 2.1.0, the "shim" feature has been available, allowing you to tell RequireJS about non-AMD modules that you'd like to use inside your application and load as dependencies into other AMD modules. Let's look at a couple of examples of shimming non-AMD libs.</div> <h3 id="shim_without_dependencies" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 24px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> Shim Without Dependencies</h3> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> You might remember the drama that ensued when Backbone and Underscore removed AMD support. Thanks to the shim feature, it's still possible (and easy) to use a library like Underscore with RequireJS:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">config</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> paths</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> underscore </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"libs/underscore.min"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> shim </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> underscore </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> exports </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"_"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> You can see in the above <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require.config</code> call that we are providing a path to a minified underscore.js. Below that, on the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">shim</code> object, we add a property that matches the name of the path we added (<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">underscore</code>). The value for this property is an object that, at least, provides an <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">exports</code> member, which tells RequireJS what member on the global object (the window, assuming you're in a browser, of course) is the actual module value. Since Underscore adds itself to the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">window</code> as <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">_</code>, then we make our<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">exports</code> value <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">_</code>. From now on, if an AMD module requires Underscore as a dependency, RequireJS will provide the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">_</code> value that appeared on the global object.</div> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> That's an easy example though, since Underscore doesn't have any dependencies of its own. How do we shim a non-AMD library that takes dependencies?</div> <h3 id="shim_with_dependencies" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 24px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> Shim <em>with</em> Dependencies</h3> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Let's look at how we'd do this for Backbone since it depends on Underscore and jQuery:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">config</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> paths</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> jquery </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"libs/jquery.min"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> backbone </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"libs/backbone.min"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> underscore </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"libs/underscore.min"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> shim </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> underscore </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> exports </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"_"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> backbone </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> deps </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">[</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"jquery"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"underscore"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">],</span><span class="pln" style="color: black;"> exports </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"Backbone"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Our shim configuration for Backbone has a <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">deps</code> property in addition to <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">exports</code>. The<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">deps</code> member is an array containing the dependency names which should be loaded before Backbone is loaded. Once those dependencies are loaded, Backbone itself will be loaded, and then RequireJS will grab the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">Backbone</code> member from the global object and use that as the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">backbone</code> module value.</div> <h3 id="what_about_commonjs_modules" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 24px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> What about CommonJS modules?</h3> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Have a CommonJS module that you'd like to use with RequireJS? No problem! You can define a module, and provide a factory function which takes three arguments: <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require</code>,<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">exports</code> and <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">module</code>. Most of the time you'll probably only need to worry about using the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require</code> argument (so you can omit the other two arguments in those cases). With the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require</code> argument, you can require a module using the CommonJS style syntax, like below:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">define</span><span class="pun" style="color: #666600;">(</span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> exports</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">module</span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> cjs </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'myCommonJSModule'</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> findDroids</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> droids </span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> res </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">[],</span><span class="pln" style="color: black;"> i </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="lit" style="color: #006666;">0</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> len </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> droids</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">length</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">for</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> i </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;"> len</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> i</span><span class="pun" style="color: #666600;">++</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">if</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> cjs</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">isDroidWeAreLookingFor</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> droids</span><span class="pun" style="color: #666600;">[</span><span class="pln" style="color: black;">i</span><span class="pun" style="color: #666600;">]</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">))</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> res</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">push</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">droids</span><span class="pun" style="color: #666600;">[</span><span class="pln" style="color: black;">i</span><span class="pun" style="color: #666600;">]);</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> res</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">};</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> <em>Special note (or shameless teaser) for my upcoming <a href="https://github.com/jrburke/r.js" style="color: #457bbe; cursor: pointer; text-decoration: none;">r.js</a> article:</em> Additional CommonJS utilities are available when you use the <a href="https://github.com/jrburke/r.js" style="color: #457bbe; cursor: pointer; text-decoration: none;">r.js</a> optimizer. You have the option of converting CommonJS modules to modules wrapped with <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">define()</code>. Just be aware that if your CommonJS module has branching logic that conditionally invokes <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require</code>, then the conversion approach will <em>not</em> work. For example, if the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">myCommonJSModule</code> above had this internally (see the comments in the snippet below to understand what would prevent this from working with RequireJS):</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="com" style="color: #880000;">// inside myCommonJSModule</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">module</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">exports </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> isDroidWeAreLookingFor </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> droid </span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> finder</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// OHSNAP! The conditional logic around "require"</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// means we can't wrap it with "define" in RequireJS</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">if</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">isObiWanPresent</span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> finder </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'forceFilter'</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">else</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> finder </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'normalTrooper'</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> finder</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">find</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> droid </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span></code></pre> <h2 id="cdn_fallbacks" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; line-height: 28px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> 3.) CDN Fallbacks</h2> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> While using a Content Delivery Network can give your site performance advantages, you don't want your site to be broken & unusable in the event that the CDN is unreachable. Thankfully, RequireJS makes it very easy to provide fallback paths. A normal path configuration might look something like this:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">config</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> paths</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> kendoui </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Of course, we hope that the Kendo UI CDN never goes down, but if it does, we can fall back to a different path by modifying our configuration to look like this:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">config</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> paths</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> kendoui </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">[</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"libs/kendoui/kendoui.min"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">]</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Notice that instead of just providing a string path for the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">kendoui</code> value, we're now using an array of paths. With the above configuration, RequireJS will attempt to load the file from the CDN first. If that fails, it will attempt the second path. It's true that falling back will add time to how long your script takes to load, but it beats an unusable site!</div> <h2 id="plugins" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; line-height: 28px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> 4.) Plugins!</h2> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Perhaps one of the nicest value-adds for RequireJS is the use of loader plugins. Loader plugins provide support for various non-JavaScript assets - allowing you to require them as dependencies like any other module (for the most part). Arguably the most popular is the <a href="http://requirejs.org/docs/api.html#text" style="color: #457bbe; cursor: pointer; text-decoration: none;">"text"</a> plugin - which allows you to load a plain text file dependencies (think HTML & CSS, etc.). This can be incredibly useful for loading templates. To understand <em>how</em> it can be useful, let's look at the approach many people use today:</div> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> This snippet shows a Backbone view retrieving the contents of an underscore.js template, pre-compiling it, and using it for rendering - without RequireJS/text in the mix:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">MyView</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">Backbone</span><span class="pun" style="color: #666600;">.</span><span class="typ" style="color: #660066;">View</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">extend</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> initialize</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="kwd" style="color: #000088;">template</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> _</span><span class="pun" style="color: #666600;">.</span><span class="kwd" style="color: #000088;">template</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> $</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"generated-gif-template"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">).</span><span class="pln" style="color: black;">text</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> render </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">$el</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">html</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="kwd" style="color: #000088;">template</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">model</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">toJSON</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">));</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> You'll notice that this view expects the template to be <em>in the page</em>. Many people add a<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">script</code> element, giving it a fake <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">type</code> (so that it's not evaluated), and place the template content inside it, like this:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="tag" style="color: #000088;"><script</span><span class="pln" style="color: black;"> </span><span class="atn" style="color: #660066;">type</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"text/underscore-template"</span><span class="pln" style="color: black;"> </span><span class="atn" style="color: #660066;">id</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"generated-gif-template"</span><span class="tag" style="color: #000088;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;">span </span><span class="kwd" style="color: #000088;">class</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"glyphicon glyphicon-remove"</span><span class="pun" style="color: #666600;">></</span><span class="pln" style="color: black;">span</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;">a href</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"<%= dataURL %>"</span><span class="pln" style="color: black;"> download</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"<%= id %>"</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;">span </span><span class="kwd" style="color: #000088;">class</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"glyphicon glyphicon-save"</span><span class="pun" style="color: #666600;">></</span><span class="pln" style="color: black;">span</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"></</span><span class="pln" style="color: black;">a</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;">img src</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"<%= dataURL %>"</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">class</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"img-thumbnail gif-item"</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;">div</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;">input style</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"display:none"</span><span class="pln" style="color: black;"> type</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"text"</span><span class="pln" style="color: black;"> id</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"fileName"</span><span class="pln" style="color: black;"> value</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"<%= fileName %>"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">/></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"><</span><span class="pln" style="color: black;">span id</span><span class="pun" style="color: #666600;">=</span><span class="str" style="color: #008800;">"lblFileName"</span><span class="pun" style="color: #666600;">><%=</span><span class="pln" style="color: black;"> fileName </span><span class="pun" style="color: #666600;">%></</span><span class="pln" style="color: black;">span</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;"></</span><span class="pln" style="color: black;">div</span><span class="pun" style="color: #666600;">></span><span class="pln" style="color: black;"> </span><span class="tag" style="color: #000088;"></script></span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Sure - this approach is doable, but it has a few drawbacks:</div> <ul style="background-color: white; color: #353434; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 18px 25px; padding: 0px;"> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;">You (typically) lose syntax highlighting and other IDE features when nesting template markup inside a <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">script</code> tag.</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;">The template must be present in <em>any</em> page in which it's used. In a multipage site, this means you either have multiple copies of the template floating around, or a custom build step that concats templates into each target HTML page.</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;">In an AMD app, storing a template in the DOM like this means that your module actually <em>has a dependency on something that isn't explicitly passed to it</em>. This makes your code brittle and easily breakable. Ideally, we'd like to have the template passed to our module like any other dependency.</li> </ul> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> That's where the "text" plugin comes in:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">define</span><span class="pun" style="color: #666600;">([</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'backbone'</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'text!templates/generated-gif.html'</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">],</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">Backbone</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">template</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">Backbone</span><span class="pun" style="color: #666600;">.</span><span class="typ" style="color: #660066;">View</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">extend</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> initialize</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="kwd" style="color: #000088;">template</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> _</span><span class="pun" style="color: #666600;">.</span><span class="kwd" style="color: #000088;">template</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">template</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> render </span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">$el</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">html</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="kwd" style="color: #000088;">template</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">this</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">model</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">toJSON</span><span class="pun" style="color: #666600;">()</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">));</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span></code></pre> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> You can see above that we've included the path to our template, preceded with <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">text!</code>, which tells RequireJS to use the loader plugin by the name of "text". The text content of the template is passed into module as the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">template</code> argument. We gain a few things by taking this approach:</div> <ul style="background-color: white; color: #353434; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 18px 25px; padding: 0px;"> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;">Our templates can live <em>in their own files</em> during development, allowing us the benefits of our IDE features (syntax highlighting, etc.), <em>and</em> preventing us from having to scour hundreds (or more) of lines of combined markup files looking for the correct <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">script</code> tag to edit.</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;">Our templates can be treated like any other module asset - so passing them explicitly into a module makes it very clear that the module depends on that template (as opposed to hoping it exists in the DOM when the module executes).</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;">When we use <a href="http://requirejs.org/docs/optimization.html" style="color: #457bbe; cursor: pointer; text-decoration: none;">r.js</a> to build & optimize our RequireJS app, the templates can be concatenated & deployed along with all of our other modules - since the text plugin effectively wraps the template in a module <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">define</code> call, creating a module which returns the text value of the file.</li> </ul> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> That's just a quick glance at <em>one</em> plugin. You can see a list of other plugins <a href="https://github.com/jrburke/requirejs/wiki/Plugins" style="color: #457bbe; cursor: pointer; text-decoration: none;">here</a>. To whet your appetite, consider some of these:</div> <ul style="background-color: white; color: #353434; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 18px 25px; padding: 0px;"> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;"><a href="http://requirejs.org/docs/api.html#i18n" style="color: #457bbe; cursor: pointer; text-decoration: none;">i18n</a> - localization</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;"><a href="https://github.com/millermedeiros/requirejs-plugins" style="color: #457bbe; cursor: pointer; text-decoration: none;">image</a> - allows you to load images like modules</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;"><a href="https://github.com/millermedeiros/requirejs-plugins/" style="color: #457bbe; cursor: pointer; text-decoration: none;">mdown</a> - allows you to load markdown (it compiles it to HTML for you)</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;"><a href="https://github.com/millermedeiros/requirejs-plugins" style="color: #457bbe; cursor: pointer; text-decoration: none;">font</a> - allows you to load web fonts like modules</li> </ul> <h2 id="some_tricks_for_troubleshooting" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; line-height: 28px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> 5.) Some Tricks for Troubleshooting</h2> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> You can use these API calls in your code if you need to, but I've actually found them quite useful when on the console in Chrome:</div> <ul style="background-color: white; color: #353434; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 18px 25px; padding: 0px;"> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;"><code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require.defined(moduleId)</code> - returns true if your <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">moduleId</code> has been defined and is ready for use.</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;"><code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require.specified(moduleId)</code> - returns true if your <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">moduleId</code> has been listed as a dependency by another defined module. Note that just because this returns true doesn't mean your <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">moduleId</code> is ready to use (don't you just love asynchrony?).</li> <li style="color: #4a4a4a; font-size: 16px; line-height: 24px;"><code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">requirejs.s.contexts._.config</code> - I learned about this from <a href="https://twitter.com/vernonk" style="color: #457bbe; cursor: pointer; text-decoration: none;">Vernon Kesner</a>. This is technically a "back door/undocumented" call - so <em>it could change or disappear without warning</em>. However it returns a very useful object full of configuration info, see below:</li> </ul> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> <img alt="Chrome Console results for requrejs.s.conects._.config" src="http://tpstatic.com/img/usermedia/_TBvB2AB50KM-TASuLKFsw/w645.png" style="border: 0px; display: block; margin: 0px auto 18px; max-width: 100%; vertical-align: middle;" /></div> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> This is the result of calling <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">requirejs.s.contexts._.config</code> inside a <a href="https://github.com/ifandelse/gif-stitch" style="color: #457bbe; cursor: pointer; text-decoration: none;">sample gif-generation app</a> . You can see all the relevant configuration data: the base URL, the paths we've mapped, the shim configuration, etc.</div> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> Two other key items to know about when it comes to troubleshooting RequireJS are 'errbacks' and the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">requirejs.onError</code> method:</div> <h3 id="requirejs_errbacks" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 24px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> RequireJS "errbacks"</h3> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> When you make a <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; padding: 2px 4px;">require</code> call, you can include a third argument - a callback that receives an error argument, allowing you to react to the error, instead of ultimately generating an uncaught exception. The method signature, when using "errbacks" looks like this:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">require</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">[</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"backbone"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">],</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">Backbone</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">Backbone</span><span class="pun" style="color: #666600;">.</span><span class="typ" style="color: #660066;">View</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">extend</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">/* your magic here */</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">});</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">err</span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">/* err has err.requireType (timeout, nodefine, scripterror) and err.requireModules (an array of module Ids/paths) Inside here you could requirejs.undef('backbone') to clear the module from require locally - and you could even redefine it here or fetch it from a different location (though the fallback approach earlier takes care of this use-case more succinctly) */</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">);</span></code></pre> <h3 id="requirejs.onerror" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 24px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> requirejs.onError</h3> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> RequireJS has a global onError handler that will catch any errors not already handled by "errbacks". To use it, simply set it like this:</div> <pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-left-color: rgba(0, 83, 159, 0.65098); border-left-style: solid; border-top-left-radius: 0px; border-top-right-radius: 0px; border-width: 0px 0px 0px 4px; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 18px; margin-bottom: 18px; max-height: 600px; overflow: auto; padding: 8.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; color: inherit; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">requirejs</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">onError </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">err</span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">/* err has the same info as the errback callback: err.requireType & err.requireModules */</span><span class="pln" style="color: black;"> console</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">log</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">err</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">requireType</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// Be sure to rethrow if you don't want to</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// blindly swallow exceptions here!!!</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">};</span></code></pre> <h2 id="wrapping_up" style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; line-height: 28px; margin: 9px 0px 4px; text-rendering: optimizelegibility;"> Wrapping Up</h2> <div style="background-color: white; color: #4a4a4a; font-family: museo-sans, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 18px;"> There you have it - a handful of tips that you'll find useful whether you're just getting started with RequireJS, or are an experienced user. As I mentioned earlier, I'm saving r.js for a dedicated article - so keep an eye out for it. Are there any particular tips, approaches, APIs, etc. that you've found useful when using RequireJS? I'd love to hear about them!</div> </div>

Helpful Tips When Using RequireJS

1.) Know Your Options When Defining Modules Most people using RequireJS are familiar with this approach of defining a module: define ([...

+ Read more »

<div dir="ltr" style="text-align: left;" trbidi="on"> <b>RequireJS - The Basics</b> <br /> <b><br /></b> <b><br /></b> <iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube-nocookie.com/embed/VGlDR1QiV3A" width="640"></iframe></div>

RequireJS - The Basics

+ Read more »