Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
2012: My personal jQuery plugin starter template...
/**
* 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);
@mhulse

This comment has been minimized.

Copy link
Owner Author

mhulse commented Jul 8, 2012

Based on jQuery's plugin guidelines found here.

@mhulse

This comment has been minimized.

Copy link
Owner Author

mhulse commented Jan 26, 2013

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
You can’t perform that action at this time.