Skip to content

Instantly share code, notes, and snippets.

@mateuszwrobel

mateuszwrobel/jquery.plugin_pattern.js

Last active June 17, 2023 13:41
Download ZIP

Revisions

  1. Okotetto revised this gist Jan 15, 2014. 1 changed file with 105 additions and 32 deletions.
    137 changes: 105 additions & 32 deletions jquery.plugin_pattern.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,45 +1,118 @@
    /*!
    * jQuery lightweight plugin boilerplate
    * Original author: @ajpiano
    * Further changes, comments: @addyosmani
    * Licensed under the MIT license
    /*
    * 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 ) {

    // Create the defaults once
    var pluginName = "defaultPluginName",
    // 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 pluginName = "linkColor",
    // the name of using in .data()
    dataPlugin = "plugin_" + pluginName,
    // default options
    defaults = {
    propertyName: "value"
    color: "black"
    };

    var privateMethod = function () {
    console.log("private method");
    };

    // The actual plugin constructor
    function Plugin( element, options ) {
    this.element = element;

    this.options = $.extend( {}, defaults, options) ;

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
    var Plugin = function ( element ) {
    /*
    * Plugin instantiation
    */
    this.options = $.extend( {}, defaults );
    };

    Plugin.prototype = {

    init: function ( options ) {

    // extend options ( http://api.jquery.com/jQuery.extend/ )
    $.extend( this.options, options );

    /*
    * Place initialization logic here
    */
    this.element.css( 'color', 'red' );
    },

    destroy: function () {
    // unset Plugin data instance
    this.element.data( dataPlugin, null );
    },

    // public get method
    href: function () {
    return this.element.attr( 'href' );
    },

    // public chaining method
    changeBG: function ( color = null ) {
    color = color || this.options['color'];
    return this.element.each(function () {
    // .css() doesn't need .each(), here just for example
    $(this).css( 'background', color );
    });
    }
    }

    Plugin.prototype.init = function () {
    // Place initialization logic here
    // We already have access to the DOM element and
    // the options via the instance, e.g. this.element
    // and this.options
    };
    /*
    * Plugin wrapper, preventing against multiple instantiations and
    * allowing any public function to be called via the jQuery plugin,
    * e.g. $(element).pluginName('functionName', arg1, arg2, ...)
    */
    $.fn[ pluginName ] = function ( arg ) {

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
    return this.each(function () {
    if ( !$.data(this, "plugin_" + pluginName )) {
    $.data( this, "plugin_" + pluginName,
    new Plugin( this, options ));
    var args, instance;

    // only allow the plugin to be instantiated once
    if (!( this.data( dataPlugin ) instanceof Plugin )) {

    // if no instance, create one
    this.data( dataPlugin, new Plugin( this ) );
    }

    instance = this.data( dataPlugin );

    instance.element = this;

    // Is the first parameter an object (arg), or was omitted,
    // call Plugin.init( arg )
    if (typeof arg === 'undefined' || typeof arg === 'object') {

    if ( typeof instance['init'] === 'function' ) {
    instance.init( arg );
    }
    });

    // checks that the requested public method exists
    } else if ( typeof arg === 'string' && typeof instance[arg] === 'function' ) {

    // copy arguments & remove function name
    args = Array.prototype.slice.call( arguments, 1 );

    // call the method
    return instance[arg].apply( instance, args );

    } else {

    $.error('Method ' + arg + ' does not exist on jQuery.' + pluginName);

    }
    };
    })( jQuery, window, document );

    }(jQuery, window, document));
  2. mateuszwrobel created this gist Nov 3, 2012.
    45 changes: 45 additions & 0 deletions jquery.plugin_pattern.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    /*!
    * jQuery lightweight plugin boilerplate
    * Original author: @ajpiano
    * Further changes, comments: @addyosmani
    * Licensed under the MIT license
    */

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

    // Create the defaults once
    var pluginName = "defaultPluginName",
    defaults = {
    propertyName: "value"
    };

    // The actual plugin constructor
    function Plugin( element, options ) {
    this.element = element;

    this.options = $.extend( {}, defaults, options) ;

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
    }

    Plugin.prototype.init = function () {
    // Place initialization logic here
    // We already have access to the DOM element and
    // the options via the instance, e.g. this.element
    // and this.options
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
    return this.each(function () {
    if ( !$.data(this, "plugin_" + pluginName )) {
    $.data( this, "plugin_" + pluginName,
    new Plugin( this, options ));
    }
    });
    };
    })( jQuery, window, document );