old school - blocks CSS, Images, AND JS!
middle school - loads as non-blocking, but has multiple dependents
new school - loads as non-blocking, and ALL js files load asynchronously
// load jquery and plugin at the same time. name it 'bundle'$script'jquery.js' 'my-jquery-plugin.js' 'bundle'// load your usage$script'my-app-that-uses-plugin.js'/*--- in my-jquery-plugin.js ---*/$scriptready'bundle'// jquery & plugin (this file) are both ready// plugin code.../*--- in my-app-that-uses-plugin.js ---*/$scriptready'bundle'// use your plugin :)
$script'foo.js'// foo.js is ready$script'foo.js' 'bar.js'// foo.js & bar.js is ready$script'foo.js' 'bar.js' 'bundle'$scriptready'bundle'// foo.js & bar.js is ready// create an id and callback inline$script'foo.js' 'bar.js' 'bundle'// foo.js & bar.js is ready$script'foo.js' 'foo'$script'bar.js' 'bar'$scriptready'foo'// foo.js is readyready'bar'// bar.js is readyvar dependencyList =foo: 'foo.js'bar: 'bar.js'thunk: 'thunkor.js' 'thunky.js'$script'foo.js' 'foo'$script'bar.js' 'bar'// wait for multiple depdendencies!$scriptready'foo' 'bar' 'thunk'// foo.js & bar.js & thunkor.js & thunky.js is ready// foo.js & bar.js may have downloaded// but ['thunk'] dependency was never found// so lazy load it nowdepsNotFoundforEach$scriptdependencyListdep dep// in my-awesome-plugin.js$scriptready'jquery'//define awesome jquery plugin here$scriptdone'my-awesome-plugin'// in index.html$script'jquery.js' 'jquery'$script'my-awesome-plugin.js'$scriptready'my-awesome-plugin'//run code here when jquery and my awesome plugin are both ready
Optionally to make working with large projects easier, there is a path variable you can set to set as a base.
$scriptpath'/js/modules/'$script'dom' 'event'// use dom & event;
Note that this will include all scripts from here on out with the base path. If you wish to circumvent this for any single script, you can simply call
$scriptpath'/js/modules/'$script'dom' 'event'// use dom & event$scriptget''
As of 2.5.5 it's possible to concat URL arguments (i.e. a query string) to the script path. This is especially useful when you're in need of a cachebuster and works as follows:
Please note that Squid, a popular proxy, doesn’t cache resources with a querystring. This hurts performance when multiple users behind a proxy cache request the same file – rather than using the cached version everybody would have to send a request to the origin server. So ideally, as Steve Souders points out, you should rev the filename itself.
Building a $script environment works like this:
npm install -devmake
You can add
$script to your existing ender build by adding it as such:
ender add scriptjs
Get access to it as such:
You can also require it as such:
var $S = require'scriptjs'$S'/foo.js'// foo is ready
Are you using this library in production? Consider leaving a tip to show your appreciation.