Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Mother Effing JavaScript Loader - 140byt.es

Mother Effing JavaScript Loader - 140byt.es

Loads javascript files based on an array of urls.

Source

var mejl = function(a,b,c){with(document)for(;(c=createElement("script")).src=a.shift();body.appendChild(c))c.async=b}

Usage

Just throw it an array of URLs and a boolean for async ;-) Here's and example :

mejl([
  'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
  'http://underscorejs.org/underscore-min.js',
  'acme/core.js',
  'acme/global.js',
  'acme/mainpage.js'
], false);

Why would I need that?

Well, I don't know about your stuff but for my part I use it on a little one-page project like this :

  • In dev mode my index.js file contains the function declaration and direct call to load each of my scripts
  • In prod mode my index.js file contains a minified and concatenated version of all theses scripts

These two versions are generated with a Makefile containing the scripts URLs. All I have to do is make or make prod

This way I don't have to bother with different versions of the HTML file, I only include index.js.

Author

Created by Hubert Sablonnière (@hsablonniere) with help from @p01 and @tsaniel.

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.

140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.

function (
a, // array of javascript file URLs
b, // boolean : load asynchronously or not
c // placeholder for script tags
){
with (document) // on the document,
for ( // no initialization in the for loop
; (c = createElement("script")).src = a.shift() // extract first item of the array
// and use it as source to create a new script element
; body.appendChild(c) // on each iteration append the tag to the body
)
c.async = b // on each iteration set the async boolean on the tag
}
function(a,b,c){with(document)for(;(c=createElement("script")).src=a.shift();body.appendChild(c))c.async=b}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "mejl",
"description": "MEJL : Mother-Effing JavaScript Loader. Loads javascript files based on an array of urls.",
"keywords": [
"javascript",
"script",
"loader",
"html"
]
}
<!DOCTYPE html>
<title>MEJL : Mother-Effing JavaScript Loader</title>
<div>Expected value: <b>I can use jQuery and Underscore.js yay!</b></div>
<div>Actual value: <b id="ret"></b></div>
<script>
var mejl = function(a,b,c){with(document)for(;(c=createElement("script")).src=a.shift();body.appendChild(c))c.async=b}
mejl([
'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
'http://underscorejs.org/underscore-min.js'
], false);
window.onload = function() {
// I use jQuery
$('#ret').html('I can use jQuery');
// I use Underscore.js
_.each(['and', 'Underscore.js', 'yay!'], function(text) {
$('#ret').append(' ' + text);
});
}
</script>

p01 commented Apr 8, 2012

Although HTML4 requires the type attribute, the vast majority of browsers default to text/javascript which is one of the reason HTML5 made this attribute optional. As such I'd get rid of the ,c.type="text/javascript" and save those 25 bytes

Owner

hsablonniere commented Apr 8, 2012

Yeah you're right, didn't really though about it. I just pushed a new version.

Thanks.

p01 commented Apr 9, 2012

Save 4 more bytes ;)

function(a,b,c,d){with(document)for(d=0;(c=createElement("script")).src=a[d++];body.appendChild(c))c.async=b}

tsaniel commented Apr 9, 2012

Save another 4 bytes

function(a,b,c){with(document)for(;(c=createElement("script")).src=a.pop();body.appendChild(c))c.async=b}

p01 commented Apr 9, 2012

I thought about a.pop() but rejected this approach because it would change the order the scripts are loaded ( esp. important when b is falsy ).

tsaniel commented Apr 9, 2012

You may use a.shift() then.

Owner

hsablonniere commented Apr 9, 2012

Thanks very much guys. I just added your ideas and credit in the README ;-)

p01 commented Apr 9, 2012

I keep mistaking shift() and unshift() :p

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment