3n

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

3n

/*
---

name: guilloche
script: guilloche.js
description: guilloche
provides: [Guilloche]

...
*/

3n

We couldn’t find that file to show.

3n

// 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]);
  }
};

3n

/* 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;   

3n

/*
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

/* 
  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

3n

function coin_toss(prob){
	return Math.random() > 1 - (prob || 0.5)
}

3n

Events.implement({
	addEventOnce: function(type, func){		
		this.addEvent(type, function(){ func(); this.removeEvent(type, arguments.callee) })
		return this
	}	
})