jquery plugin boilerplate v0
by cent cent
HTML
<ol id="refs">
<li><a href="//www.google.com">google</a></li>
<li><a href="//stackoverflow.com/questions/5980194/jquery-plugin-template-best-practice-convention-performance-and-memory-impac?rq=1">plugin template best practice</a></li>
<li><a href="http://stackoverflow.com/questions/7127600/which-jquery-plugin-design-pattern-should-i-use">which jquery plugin design pattern should i use</a></li>
</ol>
<button type="button">Click Me!</button>
JavaScript
/*
* Class library
* =============
*/
(function(g3, $, window, document, undefined){
//a class definition
g3.A = function(href){
this.href = href;
};
//a singleton
g3.B = (function(){
var obj;
function init(){
obj = {
msg: 'hello!',
toString: function(){
return this.msg;
},
set: function(str){
this.msg = str;
}
};
return obj;
}
return {
getInstance: function(){
if(obj)
return obj;
else
return init();
}
};
})();
}(window.g3 = window.g3 || {}, jQuery, window, document));
/*
* myPluginFactory
* ===============
*/
;(function($, window, document, undefined){
var myPluginFactory = function(elem, options){
/* *************** */
/* Private members */
/* *************** */
/*
* MVC initial state
* -----------------
* the initial data state diagram
*/
var defaults = {
// Model
a: null, //<== builds on an external class!
b: null, //<== calls an external singleton!
// View
tag: 'div',
// Controller
pluginStart: 'myPluginStart',
pluginEnd: 'myPluginEnd'
},
/*
* MVC transient state
* -------------------
* the transient data state diagram
*/
modelState = {
options: null //collects data from user + default
},
viewState = {
container: null, //outermost container element
$container: null //the jquery object of 'container'
},
controllerState = {
index: null, //current index
object: null, //current object
paused: false, //paused on hover
animationStack: [] //stores animation function ids returned from setTimeout()
};
/*
* MVC functions
*...