jQuery boilerplate and demo

jQuery Boilerplate

• Allow access to public prototype methods
• This boilerplate will not use .each() for every method call, you should use .each() when you need
• Allow re-init plugin, but only 1 instance will be created
• This doesn't support chain, look like not so many people using plugin chain syntax.

Here is a working demo, and if your want to use the old plugin style or comment, see here

/*
 *  Project:
 *  Description:
 *  Author:
 *  License:
 */

// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ($, window, document, undefined) {

    // undefined is used here as the undefined global variable in ECMAScript 3 is
    // mutable (ie. it can be changed by someone else). undefined isn't really being
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
    // can no longer be modified.

    // window is passed through as local variable rather than global
    // as this (slightly) quickens the resolution process and can be more efficiently
    // minified (especially when both are regularly referenced in your plugin).

    var // plugin name
        pluginName = "pluginName",
        // key using in $.data()
        dataKey = "plugin_" + pluginName;

    var privateMethod = function () {
        // ...
    };

    var Plugin = function (element, options) {
        this.element = element;
        
        this.options = {
            // default options
        };
        
        /*
         * Initialization
         */
        
        this.init(options);
    };

    Plugin.prototype = {
        // initialize options
        init: function (options) {
            $.extend(this.options, options);
            
            /*
             * Update plugin for options
             */
        },
        
        publicMethod: function () {
            // ...
        }
    };

    /*
     * Plugin wrapper, preventing against multiple instantiations and
     * return plugin instance.
     */
    $.fn[pluginName] = function (options) {

        var plugin = this.data(dataKey);

        // has plugin instantiated ?
        if (plugin instanceof Plugin) {
            // if have options arguments, call plugin.init() again
            if (typeof options !== 'undefined') {
                plugin.init(options);
            }
        } else {
            plugin = new Plugin(this, options);
            this.data(dataKey, plugin);
        }
        
        return plugin;
    };

}(jQuery, window, document));

Demo

/*
 *  Project: jQuery plugin demo
 *  Author: Steely Wing
 *  License: Unlicense
 */

;(function ($, window, document, undefined) {

    var pluginName = "color",
        dataKey = "plugin_" + pluginName;

    var Plugin = function (element, options) {
    
        this.element = element;
        
        this.options = {
            background: '#000',
            color: '#999'
        };
        
        this.init(options);
    };

    Plugin.prototype = {
        init: function (options) {
            $.extend(this.options, options);
            this.element.css({
                'color': this.options.color,
                'background-color': this.options.background
            });
        },
        
        color: function (color) {
            this.options.color = color;
            this.element.css('color', color);
        },
        
        background: function (color) {
            this.options.background = color;
            this.element.css('background-color', color);
        }
    };

    /*
     * Plugin wrapper, preventing against multiple instantiations and
     * return plugin instance.
     */
    $.fn[pluginName] = function (options) {

        var plugin = this.data(dataKey);

        // has plugin instantiated ?
        if (plugin instanceof Plugin) {
            // if have options arguments, call plugin.init() again
            if (typeof options !== 'undefined') {
                plugin.init(options);
            }
        } else {
            plugin = new Plugin(this, options);
            this.data(dataKey, plugin);
        }
        
        return plugin;
    };

}(jQuery, window, document));

Now, you can use the plugin

// Init plugin
$('a').color({
    color: 'blue'
});

// Call the `background` method
$('a').color().color('#f00');
$('a').color().background('#300');

If you need independent Plugin instance per element

$('a').each(function () {
    $(this).color();
});