README.md

This files contains my boilerplates for jQuery plugins.

jquery.minimal-pluginboilerplate.js

(function($, undefined) {

  $.fn.pluginName = function(options) {
    // Default options
    options = $.extend({
      property: "value",
      onEvent: function() {}
    }, options);

    // Iterate over jQuery elements
    return this.each(function() {

      // YOUR PLUGIN LOGICS HERE

    });

  });

})(jQuery);

jquery.pluginboilerplate.coffee

# Wrap all plugin in a function module wrapper, passing `jQuery` as `$`.
do ($ = jQuery) ->
  # Set the plugin namespace
  namespace = 'pluginName'
  # Set default options (values and callback functions)
  defaults =
    propertyName: "value"
    onEventCallback: ->

  # Plugin Wrapper
  # --------------
  #
  # The complete plugin class, used to build custom plugin
  class Plugin

    # Constructor (and init task):
    # -----------
    #
    # - @element : the current element that take focus inside the plugin
    # - @options = the extended defaults options with args passed options
    # - @_defaults = the defaults options
    # - @_name = the plugin name
    constructor: (@element, a, options) ->
      @options = $.extend {}, defaults, options

      @_defaults = defaults
      @_name = namespace

      @init();

    # Init task
    # ---------
    init: ->
      # your initilization logic goes here

    anotherMethod: (el, options) ->
      # put internal logic here
      # like trigger option callback for example, passing element as `this`
      @options.onEvent.call @element

  # Plugin wrapper around the constructor, preventing against multiple
  # instantiations
  $.fn[namespace] = (a, options) ->
    [_, args...] = arguments
    @each ->
      plugin = $.data @, "plugin_#{namespace}"
      # Init the plugin once and only if the `args` is `null` or an object
      unless plugin
        $.data @, "plugin_#{namespace}", new Plugin(@, a, options)
      # If `args` is the name of a plugin method, then call it
      else if plugin[_]? and $.type(plugin[_]) == 'function'
        plugin[_].apply plugin, args

jquery.pluginboilerplate.js

(function($, undefined) {
  var Plugin, defaults, namespace;

  // Default options and settings
  namespace ='pluginName';
  defaults = {
    propertyName: 1000,
    onEvent: function() {}
  };

  // PLUGIN --------------------------------------------------------------------
  //
  // Declare the plugin fuction, isolated in a sub-module pattern to prevent
  // leaks and preserve vars scope.
  //
  Plugin = (function() {

    // The Plugin object
    function Plugin(element, options) {
      // Store elements to access it later easily
      this.element = element;
      this.options = $.extend({}, defaults, options);
      this._defaults = defaults;
      this._name = namespace;

      // Fire the init method
      this.init();
    }

    // The initalization
    Plugin.prototype.init = function() {

      // YOUR INIT LOGIC HERE

    };

    // a custom method launchable externaly
    Plugin.prototype.open = function() {

      // YOUR METHOD LOGIC HERE

      // Firing the callback example
      this.options.onOpen.call(this.element);

    };

    // Expose the Plugin externaly
    return Plugin;

  })();

  // JQUERY --------------------------------------------------------------------
  //
  // Expose the plugin in the jQury prototype
  //
  $.fn[namespace] = function(options) {
    // Explode arguments tio use it when callbacking
    var args, _;
    _ = arguments[0];
    args = [].slice.call(arguments, 1);

    // Iterate over jQuery elements
    return this.each(function() {
      var plugin;

      // Get the plugin attached to the element
      plugin = $.data(this, "plugin_" + namespace);

      if(!plugin) {
        // Instanciate a new plugin and store it in the jQuery object
        $.data(this, "plugin_" + namespace, new Plugin(this, options));
      } else if(plugin[_] != null && $.type(plugin[_]) == 'function') {
        // If the plugin contains the called method, apply it
        return plugin[_].apply(plugin, args);
      }
    });
  };

})(jQuery);