$('#treasure').hide();
$.fn.a = function(){
return this.append(' Effin Eh!');
};
// The Mighty Ducks Flying V
function knucklePuck() {
function() {
function() {
function() {
// omg inception.
}
}
}
}();
Just because jQuery doesn't decide on a application structure for you, it doesn't mean that you don't need one.
RequireJS is a module loader (@<3).
LABjs is a script loader.
If you aren't using a script loader:
YOU SHOULD BE.
<!DoCTyPe html>
<html>
<head>
<title>Paul Irish Fan Club</title>
<script>
// Load my application
require(["myApp"]);
// omg that's it?!?!
</script>
</head>
// ...
require.def("myApp",
['lib/jquery', 'utils/underscore'],
function($, _) {
$(function(){
_(["rebecca", "adam"]).each(function(n){
alert(n + " is my BFF!");
});
});
});
function Person(opts) {
// Anything accessible goes on `this`
this.func1 = function(){...};
this.name = opts.fname + opts.lname;
}
// The function runs, and
// returns a new instance of `this`
var myPerson = new Person({
fname: 'Alex',
lname: 'Sexton'
});
function Person(opts) {
// normally a constructor function
// returns `this` (inherently)
return {
obj : function(){...},
name : opts.fname+' '+opts.lname
};
}
var myPerson = new Person({
lname: 'Sexton',
fname: 'Alex'
});
require.def("myModule",
['lib/jquery'],
function($) {
return {
doSomething : function(){...},
lolify : function(){...}
};
});
The dependencies that you require will execute in no specific order, as they shouldn't be dependent on each other.
require(["myModule"],
function(myModule) {
// Use the API that you built!
myModule.doSomething();
myModule.lolify();
});
It doesn't matter how deeply nested your dependencies are, they will execute in the order that they need to. Ideally, nothing leaks into the global namespace, unless you force it to.
require(['order!a.js', 'order!b.js'],
function(){
// b needs a like
// IE6 needs death.
});
You can do a lot with a few officially supported plugins:
require.def('factory',
(Object.create) ? [] : ['fill/objCreate'],
function() {
var myCoolObject = {
func1: function(){ /* Rebecca */ },
func2: function(){ /* does this. */ }
};
// return a function that returns an obj
return function(){
return Object.create(myCoolObject);
};
});
$LAB
.script('/js/json2.js')
.script('/js/jquery.js').wait()
.script('/js/jquery-ui.js')
.script('/js/vapor.js');
<script src="/js/jquery.js"></script>
<script>$('body').load('zombo.html');</script>
<!-- becomes -->
<script>
$LAB
.script('/js/jquery.js').wait(function(){
$('body').load('zombo.html');
});
</script>
var myLabChain = $LAB
.script('/js/jquery.js').wait(function(){
$('body').load('zombo.html');
});
// some code or html here
document.write('this is not async');
// this will remember everything from the
// first part and wait til it's done
myLabChain.script('/js/goto.js');
“The fastest loading script is the one that you never request.”
- Leonardo Davinci
yepnope([
{
test: Object.create,
yep : ['script1.js', 'style1.css'],
nope: ['shim.js', 'style2.css'],
both: ['jquery.js']
}
]);
<script>if (!Modernizr.websockets) { alert('go away!'); }</script>
<style>
#notice { display:none; }
.no-js #notice { display:block; }
.websockets #sojustcloud {
display:block;
}
</style>
yepnope({
test: Modernizr.geolocation,
yep : ['/js/geo.js'],
nope: ['google-maps-api.js'],
callback: function(file, result){
if (!result) {
loc = goog.getLocation();
}
}
});
OK. Don't get mad, but...
$('.container').html('<div>' +
'I heard' +
' that John Resig </div>' +
'<em>cries</em> himself' +
' to sleep, when he sees you ' +
'do this..... D: ');
<ul>
<%
_.each(products, function(prod){
%>
<li>
<a href="#"><%= prod.name %></a>
</li>
<%
});
%>
</ul>
In your markup:
<script id="tmpl-t1" type="text/html"> <h1><%= data.title =></h1> </script>
In your JS app:
// Get the markup out
var t = $('#tmpl-t1').html();
// Compile a template
var tmpl = _.template(t);
// render it
tmpl({data: {title : 'Ralph Smells'}});
You can load your templates as text dependencies!
require.def('myApp', ['text!tmpl/main.tmpl'],
function(mainTmpl) {
// Compile a template
var tMain = _.template(mainTmpl);
});
var cache = {};
function render(name, cntxt) {
if (!cache[name]) {
cache[name] = _.template(
$('#tmpl-'+name).html()
);
}
return cache[name](cntxt);
}
var
nativeForEach = ArrayProto.forEach,
nativeMap = ArrayProto.map,
nativeFilter = ArrayProto.filter,
nativeIndexOf = ArrayProto.indexOf,
nativeIsArray = Array.isArray;
// etc
_(["apples", "oranges"])
.each(function(fruit) {
alert('I love ' + fruit);
});
Delete your utils.js file, and start using underscore.
$.subscribe('something', function(a, b){
console.log(a, b);
});
$.publish('something', ['eh', 'bee']);
// Yay, it logged!
var count = 0;
$.subscribe('dataLoad', function() {
count++;
if (count % 4 === 0) {
alert(count);
}
});
var Person = Class.extend({
init: function(isDancing){
this.dancing = isDancing;
},
dance: function(){
return this.dancing;
}
});
var Ninja = Person.extend({
init: function(){
this._super( false );
},
dance: function(){
// inherited version of dance()
return this._super();
},
swingSword: function(){
return true;
}
});
var aPersonLikeObject = {
init : function() {...},
dance: function() {...}
};
var anotherPersonOrWhatever = Object.create(aPersonLikeObject);
anotherPersonOrWhatever.dance();
var orWhateverable = {
init: function(options, elem) {
this.options = $.extend({}, this.options, options);
this.$elem = $(elem);
return this;
},
options: {...},
addOrWhatever: function() {
this.$elem.append(' or whatever...');
}
};
$.fn.orWhateverable = function(opts) {
return this.each(function(){
$.data(this, 'orWhat', Object.create(orWhateverable).init(opts, this));
});
};
With that code: you share a single object as the definition for all instances of your plugin (per matched element).
// Assume orWhateverable from before is here
$('div').orWhateverable();
$('div').each(function(){
$(this).data('orWhat').addOrWhatever();
});
// or whatever... added to all divs.
orWhateverable.addOrWhatever = function(){
this.$elem.prepend('Yo dawg, ');
};
$('div').each(function(){
$(this).data('orWhat').addOrWhatever();
});
// Yo dawg, added to all divs.
var socket = new easyXDM.Socket({
local: "name.html",
onReady: function(){
// you need to wait for the onReady callback before using the socket
socket.postMessage("foo-message");
},
onMessage: function(message, origin) {
alert("received " + message + " from " + origin);
}
});
Imagine a world where the core of your application is the code that you wrote, instead of code that John Resig wrote...
You deserve your own namespace. Get off jQuery's. You are an app. Declare yourself as such.
