Created
July 8, 2012 01:00
-
-
Save mhulse/3068831 to your computer and use it in GitHub Desktop.
2012: My personal jQuery plugin starter template...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* jQuery pluginName | |
* | |
* @author First Last | |
* @link http://site.com | |
* @docs http://github.com/username/pluginName | |
* @copyright Copyright (c) YYYY First Last. | |
* @license Dual licensed under the MIT and GPL licenses. | |
* @version 1.0.0 | |
* @date YYYY/MM/DD | |
*/ | |
//---------------------------------- | |
// Notes to self: | |
//console.profile('profile foo'); | |
// ... code here ... | |
//console.profileEnd('profile foo'); | |
// ... or: | |
// console.time('timing foo'); | |
// ... code here ... | |
// console.timeEnd('timing foo'); | |
//---------------------------------- | |
;(function($) { | |
'$:nomunge'; // Used by YUI compressor. | |
//-------------------------------------------------------------------------- | |
// | |
// Constants: | |
// | |
//-------------------------------------------------------------------------- | |
/** | |
* Commonly used variables. | |
* | |
* @const | |
* @return {boolean} Description goes here. | |
*/ | |
var constants = { | |
NS : 'pluginName', // Namespace identifier. | |
PREFIX : 'pn', // Class prefix. | |
C : ((typeof(console) !== 'undefined') ? true : false), // Check if the javascript console is available. | |
}, // constants | |
//-------------------------------------------------------------------------- | |
// | |
// Public methods: | |
// | |
//-------------------------------------------------------------------------- | |
methods = { | |
/** | |
* Init constructor. | |
*/ | |
init: function(opts) { | |
//---------------------------------- | |
// Loop & return each "this": | |
//---------------------------------- | |
return this.each(function() { | |
//---------------------------------- | |
// Local variable(s): | |
//---------------------------------- | |
var _ = $(this), // Target object. | |
data = _.data(constants.NS), // Namespace instance data. | |
options = $.extend({}, settings.external, $.fn[constants.NS].defaults, opts); // Merge settings, defaults and options. | |
//---------------------------------- | |
// Initialize data: | |
//---------------------------------- | |
if ( ! data) { | |
//---------------------------------- | |
// Setup variables (for examle): | |
//---------------------------------- | |
//var $divs = _.children('li').children('div'); | |
//---------------------------------- | |
// Namespaced instance data: | |
//---------------------------------- | |
_.data(constants.NS, { | |
target : _, | |
options : options, | |
//divs : $divs, | |
init : false | |
}); | |
data = _.data(constants.NS); // Make it easy for the rest of init(). | |
} | |
//---------------------------------- | |
// Data initialization check: | |
//---------------------------------- | |
if ( ! data.init) { | |
//---------------------------------- | |
// Data initialization flag: | |
//---------------------------------- | |
data.init = true; | |
//---------------------------------- | |
// Do stuff here: | |
//---------------------------------- | |
// .. rest of init ... | |
methods.foo.call(_); // Example of calling foo() where "this" === $(this). | |
var foo = bar.call(_, data); // Example of calling bar() where "this" === $(this) and data is passed parameter. | |
baz.call(_); // Example of calling baz() where "this" === $(this). | |
$.fn[constants.NS].example.call(_); // Example of calling secondary function where "this" === $(this). | |
// More stuff here. Don't forget about callbacks: | |
//---------------------------------- | |
// Callback: | |
//---------------------------------- | |
options.onAfterInit.call(_); | |
} else { | |
if (constants.C) console.warn(constants.NS, 'already initialized on', this); | |
return this; | |
} | |
}); | |
}, // init() | |
//-------------------------------------------------------------------- | |
/** | |
* Foo test. | |
*/ | |
foo: function(elem) { | |
//---------------------------------- | |
// Handle API invoked method: | |
//---------------------------------- | |
if (typeof(elem) === 'undefined') elem = this; | |
//---------------------------------- | |
// Loop & return each "this": | |
//---------------------------------- | |
return elem.each(function() { | |
//---------------------------------- | |
// Local variable(s): | |
//---------------------------------- | |
var $$ = $(this), | |
data = $$.data(constants.NS), | |
options = data.options; | |
//---------------------------------- | |
// Stuff here: | |
//---------------------------------- | |
// ... | |
}); | |
}, // foo() | |
//-------------------------------------------------------------------- | |
/** | |
* Removes plugin from element. | |
*/ | |
destroy: function() { | |
//---------------------------------- | |
// Loop & return each "this": | |
//---------------------------------- | |
return this.each(function() { | |
//---------------------------------- | |
// Local variable(s): | |
//---------------------------------- | |
var $$ = $(this); | |
if ($$.data(constants.NS)) { | |
// Destroy! | |
} else { | |
if (constants.C) console.warn(constants.NS, 'already initialized on', this); | |
} | |
}); | |
} // foo() | |
}, // methods | |
//-------------------------------------------------------------------------- | |
// | |
// Private methods: | |
// | |
//-------------------------------------------------------------------------- | |
/** | |
* About this function here. | |
* | |
* @this <object> ($(document), for example) | |
* @return <void> | |
*/ | |
bar = function(data) { | |
// ... | |
}, // bar() | |
//-------------------------------------------------------------------- | |
baz = function() { | |
// ... | |
}; // baz() | |
//-------------------------------------------------------------------------- | |
// | |
// Method calling logic: | |
// | |
//-------------------------------------------------------------------------- | |
/** | |
* Boilerplate plugin logic. | |
* | |
* @link http://docs.jquery.com/Plugins/Authoring | |
* @constructor | |
*/ | |
$.fn[constants.NS] = function(method) { | |
//---------------------------------- | |
// Boilerplate: | |
//---------------------------------- | |
if (methods[method]) { | |
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | |
} else if (typeof method === 'object' || !method) { | |
return methods.init.apply(this, arguments); | |
} else { | |
$.error('Method ' + method + ' does not exist on jQuery.' + constants.NS); // Should I override? http://api.jquery.com/jQuery.error/ | |
} | |
}; // constructor() | |
//-------------------------------------------------------------------------- | |
// | |
// Public access to secondary functions: | |
// http://www.learningjquery.com/2007/10/a-plugin-development-pattern | |
// http://stackoverflow.com/questions/11286312/superfish-plugin-fn-extend-how-does-this-code-work | |
// | |
//-------------------------------------------------------------------------- | |
/** | |
* Just an example. | |
*/ | |
$.fn[constants.NS].example = function() { | |
//---------------------------------- | |
// Loop & return each "this": | |
//---------------------------------- | |
return this.each(function() { | |
//---------------------------------- | |
// Local variable(s): | |
//---------------------------------- | |
var $$ = $(this), | |
data = $$.data(constants.NS), | |
options = data.options; | |
//---------------------------------- | |
// Logic here... | |
//---------------------------------- | |
// Example of calling a public method: | |
methods.foo.call($$); // $.fn[constants.NS]('open', $$); | |
}); | |
}; // example() | |
//-------------------------------------------------------------------------- | |
// | |
// Default settings: | |
// | |
//-------------------------------------------------------------------------- | |
var settings = {}; // Initialize config object. | |
//---------------------------------- | |
/** | |
* Private settings. | |
*/ | |
settings.internal = { | |
// ... | |
}; // settings.internal | |
//---------------------------------- | |
/** | |
* Public settings. | |
*/ | |
settings.external = { | |
// ... | |
onAfterInit : function() {} // After plugin initialization. | |
// ... | |
}; // settings.external | |
//---------------------------------- | |
$.fn[constants.NS].defaults = settings.external; // http://stackoverflow.com/questions/11306375/plugin-authoring-how-to-allow-myplugin-defaults-key-value | |
})(jQuery); |
Note to self:
/**
* @see http://stackoverflow.com/a/920322/922323
*/
$.fn.pluginName.exists = function() {
return ( !! this.length);
};
Put inside plugin and call like so:
$('#foo').pluginName.exists()
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Based on jQuery's plugin guidelines found here.