Skip to content

Instantly share code, notes, and snippets.

@3n
3n / gist:967051
Created May 11, 2011 18:46
A "blog" "post" about asynchronous script loading and MooTools.

A lot of talk at JSConf was on the use of modules: AMD, CommmonJS, or otherwise. Since the server-side JavaScript world has this mostly covered, a more heavily discussed topic was bringing the joys of modularity to the client-side. This, of course, is a tricky thing to do since loading scripts requires some sort of relatively slow and possibly asynchronous network request. How does one balance the issues of perceived latency, JS execution (UI blocking), page weight, and code tidiness? I spent some time looking into this and here's my first stab at a solution (no I'm not releasing some open source project shut up).

Real quick: if you don't agree that splitting files to do asynchronous loading is a good idea you should read more.

I code most of my projects in MooTools (including my current project, BankSimple), so modularity is a given for me. MooTools is

/*
---
name: guilloche
script: guilloche.js
description: guilloche
provides: [Guilloche]
...
*/
@3n
3n / onPause.js
Created January 13, 2011 23:52
defines :delay(time) pseudo for Element.Event in MooTools
We couldn’t find that file to show.
// definition of trackEvent method on a global object
$3N = {
trackEvent : function(category, action, label, value){
if (typeof(pageTracker) == "object") pageTracker._trackEvent(category, action, label, value);
else if(typeof(_gaq) == "object") _gaq.push(['_trackEvent', category, action, label, value]);
}
};
/* css to make <div id="new">NEW</div> into this: http://bit.ly/5sf4sq */
#new {
display:block;
width:40px;
height:30px;
padding-top:10px;
background-color:#F72F3C;
color:white;
text-align:center;
/*
Script: Event.addEventOnce.js
Extends the Event class (using .implement) with a method to add an event only once.
*/
Event.implement({
addEventOnce: function(type, func){
this.addEvent(type, function(e){ func(e); this.removeEvent(type, arguments.callee) });
return this;
}
@3n
3n / gist:81451
Created March 18, 2009 22:28
Array.each_asynchronously: Works just like Array.each except runs each iteration on a specified delay.
/*
Array.each_asynchronously
Description:
Works just like Array.each except runs each iteration on a specified delay.
This means that script execution will continue in between each iteration,
rather than halting until the full array has been processed.
Arguments:
- fn: (function) The function to execute on each item in the array. It is
function coin_toss(prob){
return Math.random() > 1 - (prob || 0.5)
}
Events.implement({
addEventOnce: function(type, func){
this.addEvent(type, function(){ func(); this.removeEvent(type, arguments.callee) })
return this
}
})