Script Loaders

GRWebDev - March 28, 2011

* Right arrow key or Return/Enter to move forward; left arrow key to move backward. Or, use slide list at bottom of page (click the "+" to show).

Karl Swedberg

Consider a Script Loader

yepnope.js Example

Works great with Modernizr (www.modernizr.com)

  yepnope([{
    test : Modernizr.geolocation,
    yep  : 'normal.js',
    nope : ['polyfill.js', 'wrapper.js']
  }]);

yepnope.js Example

  yepnope([{
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
    complete: function () {
      if (!window.jQuery) {
        yepnope('local/jquery.min.js');
      }
    }
  }, {
    load: 'jquery.plugin.js',
    complete: function () {
      jQuery(document).ready(function($) {
          $('div').plugin();
      });
    }
  }]);

LABjs Example - Basic

  $LAB
  .script('framework.js').wait()
  .script(['plugin.framework.js', 'myplugin.framework.js'])
  .wait()
  .script('init.js')
  .wait(function() {
    // some crazy script
  });

More LABjs: step 1

<head>
  <!-- bunch o' stuff -->
  <script>
 var KS = KS || {};

  // generate the script queue with server-side logic
  // and echo it out as json
  KS.scriptQueue = ["prepend","filter-sort","append"];
  </script>
</head>

More LABjs: step 2

  var scripts = {
    prepend: [
      '/scripts/jquery.min.js'
    ],
    'filter-sort': [
      '/concat/filteringsorting.js',
      '/concat/whizbangflair.js'
    ],
    yummiestuff: [
      '/scripts/bacon.js',
      '/concat/rootbeerfloat.js'
    ],
    append: [
      '/concat/alwaysload.min.js'
    ]
  };

More LABjs: step 3

(function() {
  var scr;
  var doQueue = function(item) {
    if ( typeof item == 'function' ) {
      $LAB = $LAB.wait(item);

    } else {
      $LAB = $LAB.script(item);
    }
  };

  $LAB.setGlobalDefaults({
    AlwaysPreserveOrder: true,
    AllowDuplicates: false
  });

  // "prepend" is always at KS.scriptQueue[0]
  // and "append" at KS.scriptQueue[length-1]
  for ( var i=0, sq = KS.scriptQueue, sql = KS.scriptQueue.length; i < sql; i++ ) {
    scr = scripts[ sq[i] ];
    if (scr) {
      doQueue(scr);
    }
  }
})();

RequireJS

<head>
  <!-- bunch o' stuff -->
  <script data-main="scripts/main.js" src="scripts/require.js"></script>
</head>

… or …

<head>
  <!-- bunch o' stuff -->
  <script data-main="scripts/main" src="scripts/require.js"></script>
</head>

Require main.js

//Configure RequireJS
require({
  //Load jQuery before any other scripts, since jQuery plugins normally
  //assume jQuery is already loaded in the page.
  priority: ['jquery']
});

//Load scripts.
require(['jquery', 'jquery.alpha', 'jquery.beta'], function($) {
  //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
  $(function() {
      $('body').alpha().beta();
  });
});

Require Order

Order Plugin

require(["order!one.js", "order!two.js", "order!three.js"], function () {
  //This callback is called after the three scripts finish loading.
});

Other Require Stuff

Totally random non-script-loader slide