jquery plugin boilerplate

jquery-boilerplate.js

+function ($, window, undefined) {

    "use strict"; // jshint ;_;


    /* MYPLUGIN PUBLIC CLASS DEFINITION
    * ================================ */
    
    var MyPlugin = function (element, options) {
        this.$element = $(element);
        this.options = $.extend({}, $.fn.myPlugin.defaults, options);

        if (this.options.prop2 === $.noop) return;
        this.init();
    }

    MyPlugin.prototype = {
        constructor: MyPlugin

      , init: function () {
          var that = this;
          PrivateFunction();
        }
      , doSomething: function () {

        }
    }

    /* MYPLUGIN PRIVATE CLASS DEFINITION
    * ================================ */

    var PrivateFunction = function () {

    }

    /* MYPLUGIN PLUGIN DEFINITION
    * ============================== */

    $.fn.myPlugin = function (option) {
        return this.each(function () {
            var $this = $(this)
        , data = $this.data('myPlugin')
        , options = typeof option == 'object' && option
            if (!data) $this.data('myPlugin', (data = new MyPlugin(this, options)))
            if (typeof option == 'string') data[option]()
        })
    }

    $.fn.myPlugin.defaults = {
        prop1: true
        , prop2: $.noop
    }
    
    var old = $.fn.myPlugin

    $.fn.myPlugin.Constructor = MyPlugin

    /* MYPLUGIN NO CONFLICT
    * ================= */

    $.fn.myPlugin.noConflict = function () {
        $.fn.myPlugin = old
        return this
    }

    /* MYPLUGIN DATA-API
    * ================== */

    /** 
     * window.load could be replaced with document.ready but in specific cases. 
     * For instance if you needed to get info about a loaded image such as size
     * you would need to be using window.load.
     **/

    //$(window).on('load', function () {
    $(document).ready(function () {
        $('[data-attr="myplugin"]').each(function () {
            var $this = $(this)
              , data = $this.data();

            // do something

            $attr.myPlugin(data);
        })
    })

} (window.jQuery, window);

sublime-snippet

<snippet>
	<content><![CDATA[
(function (\$, window) {
    "use strict";
     /* PUBLIC CLASS DEFINITION
    * ================================ */
    var ${1:Plugin} = function (element, options) {
        this.$element = \$(element);
        this.options = \$.extend({}, \$.fn.${1:Plugin}.defaults, options);

        this.init();
    }
    

    /* PRIVATE CLASS DEFINITION
    * ================================ */

    var PrivateFunction = function () {

    }


    ${1:Plugin}.prototype = {
        constructor: ${1:Plugin}

        , init: function () {
            var that = this;
            PrivateFunction();
        }
        , doSomething: function () {

        }
    }

    
    /* PLUGIN DEFINITION
    * ============================== */

    \$.fn.${1:Plugin} = function (option) {
        return this.each(function () {
            var $this = \$(this)
            , data = \$this.data('${1:Plugin}')
            , options = typeof option == 'object' && option
            if (!data) $this.data('${1:Plugin}', (data = new ${1:Plugin}(this, options)))
            if (typeof option == 'string') data[option]()
        })
    }

    \$.fn.${1:Plugin}.defaults = {
        prop1: true
        , prop2: \$.noop
    }
    
    \$.fn.${1:Plugin}.Constructor = ${1:Plugin};
    
     /* NO CONFLICT
    * ================= */
    var old = \$.fn.${1:Plugin};
    \$.fn.${1:Plugin}.noConflict = function () {
        \$.fn.${1:Plugin} = old;
        return this;
    }

    /* DATA-API
    * ================== */

    /**
    * window.load could be replaced with document.ready but in specific cases.
    * For instance if you needed to get info about a loaded image such as size
    * you would need to be using window.load.
    **/

    //\$(window).on('load', function () {
    \$(document).ready(function () {
        \$('[data-attr="{${1:Plugin}}"]').each(function () {
            var $this = \$(this), data = $this.data();

            // do something

            $attr.${1:Plugin}(data);
        })
    });
    
})(jQuery, window);
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>plugpro</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
	<description>Boilerplate for a prototype plugin</description>
</snippet>

usage.js

$('#element').myPlugin({"prop1":false, "prop2": "test"}); // init function
$('#element').data("myPlugin").doSomething(); // call public function from plugin

// data api
<div id="element" data-attr="myplugin"></div>

// noConflict
var pluginThing = $.fn.myPlugin.noConflict() // return $.fn.myPlugin to previously assigned value
$.fn.newMyPlugin = pluginThing               // give $().newMyPlugin the myPlugin functionality