I need to write a PhoneGap application with JavaScript and I\'m thinking of the
ID: 646266 • Letter: I
Question
I need to write a PhoneGap application with JavaScript and I'm thinking of the code design patterns. I've read some books of JavaScript design patterns but can't really see the advantages/disadvantages on them and I think I don't understand the implementation and usage right.
I would like to have some opinions of which might suit my needs best. I'd like the code to be readable and maintainable.
The application itself is quite small and simple. It has a player management (add/remove), a game management (add/remove players from a team, start/stop/reset a stopwatch).
In last app I created I had over 30 named functions in a global scope which I think is a big no no. So, now I want to make things right, and was thinking of either using an object literal or a module pattern... something like this perhaps:
var MYAPP = {
init: function() {
$(document).ready(function() {
MYAPP.bind();
});
},
bind: function() {
// Bind jQuery click and page events
},
player: {
add: function(name) { ... },
remove: function(name) { ... }
},
team: {
addPlayer: function(name) { ... },
removePlayer: function(name) { ... }
},
game: {
create: function() { ... },
startTime: function() { ... },
stopTime: function() { ... },
resetTime: function() { ... }
}
};
document.addEventListener('deviceready', MYAPP.init, false);
... or perhaps this?
var MYAPP = {
init: function() {
$(document).ready(function() {
MYAPP.bind();
});
},
bind: function() {
// Bind jQuery click and page events
}
}
var PLAYER = (function () {
// Some private variables
var privateVar, privateMethod;
return {
add: function (name) { ... },
remove: function (name) { ... }
};
}());
document.addEventListener('deviceready', MYAPP.init, false);
Explanation / Answer
Your first example is pretty good. Id recommend the sef-revealing module pattern, it allows you to split your application in files:
(function( MYAPP, $, undefined ) {
// we pass in undefined because 'undefined' is no reserved word in Javascript
'use strict';
//Private Method
function addItem( item ) {
//...
}
//Public Method
MYAPP.someMethod = function() {
// ...
};
}( window.MYAPP = window.MYAPP || {}, jQuery ));
This way you make shure jQuery or whatever library you want to use is what you expect, and use the same pattern accross several files.
This could work for your application:
(function( MYAPP, $, undefined ) {
'use strict';
// These are private
var players = [],
team = [];
// This will be executed at ready event
$(document).ready(function() {
bind();
});
// private Method
// (it doesn't need to be public, since the ready
// handler shares the same scope)
function bind() {
// Bind jQuery click and page events
}
MYAPP.player = {
add: function(name) {
players.push(name);
},
remove: function(name) {
// ...
}
};
MYAPP.team = {
addPlayer: function(name) {
// ...
},
removePlayer: function(name) {
// ...
}
};
}( window.MYAPP = window.MYAPP || {}, jQuery ));
One word to the strict mode. Strict mode helps out in a couple ways:
It catches some common coding bloopers, throwing exceptions.
It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
It disables features that are confusing or poorly thought out.
To enable strict mode put this at the top of a program to enable it for the whole script:
"use strict";
Or place it within a function to turn on strict mode only within that context.
function imStrict(){
"use strict";
// ... your code ...
}