Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>AMDS!</p> <p>It's been awhile since first answers got posted to this question and many things have changed. First and foremost, the JS browser world seems to be moving towards AMDs (asynchronous module definition) for code organization.</p> <p>The way that works is you write ALL your code as AMD modules, e.g.:</p> <pre><code>define('moduleName', ['dependency1', 'dependency2'], function (dependency1, dependency2) { /*This function will get triggered only after all dependency modules loaded*/ var module = {/*whatever module object, can be any JS variable here really*/}; return module; }); </code></pre> <p>And then modules get loaded using AMD loaders like <strong>curl.js</strong> or <strong>require.js</strong> etc, for example:</p> <pre><code>curl( [ 'myApp/moduleA', 'myApp/moduleB' ], ).then( function success (A, B) { // load myApp here! }, function failure (ex) { alert('myApp didn't load. reason: ' + ex.message); } ); </code></pre> <p>Advantages are:</p> <ol> <li><p>You only have to include single <code>&lt;script&gt;</code> element on your page that loads AMD loader itself (some of them are quite tiny).</p></li> <li><p>After that all JS files will be fetched automatically in asynchronous NON BLOCKING! fashion, thus way faster!</p></li> <li><p>Necessary modules will get executed only after its dependencies got loaded.</p></li> <li><p>Modular (which means code that is easier to maintain and re-use).</p></li> <li><p>Global variables pollution can be completely curbed if used correctly.</p></li> </ol> <p>Honestly, once concept has <strong>clicked</strong> in your head, you'll never go back to your old ways. </p> <p>P.S: jQuery does register itself as AMD module starting from version 1.7.</p> <p>More information on AMDS:</p> <ul> <li><a href="https://github.com/cujojs/curl" rel="nofollow noreferrer">https://github.com/cujojs/curl</a></li> <li><a href="http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition" rel="nofollow noreferrer">http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition</a></li> <li><a href="http://requirejs.org/" rel="nofollow noreferrer">http://requirejs.org/</a></li> <li><a href="http://www.bennadel.com/blog/2275-Using-RequireJS-For-Asynchronous-Script-Loading-And-JavaScript-Dependency-Management.htm" rel="nofollow noreferrer">http://www.bennadel.com/blog/2275-Using-RequireJS-For-Asynchronous-Script-Loading-And-JavaScript-Dependency-Management.htm</a></li> <li><a href="https://github.com/Integralist/Blog-Posts/blob/master/2012-01-04-Beginners-guide-to-AMD-and-RequireJS.md" rel="nofollow noreferrer">https://github.com/Integralist/Blog-Posts/blob/master/2012-01-04-Beginners-guide-to-AMD-and-RequireJS.md</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload