Boilerplate pour plugins

  • js

Le boilerplate que j'utilise pour créer mes plugins, avec wrapper UMD (Universal Module Definition) pour le rendre compatible avec AMD/CommonJS et en faire son propre module au besoin.

(function (root, factory) {
    var pluginName = "PluginNameHere";

    if (typeof define === "function" && define.amd) {
        define([], factory(pluginName));
    } else if (typeof exports === "object") {
        module.exports = factory(pluginName);
    } else {
        root[pluginName] = factory(pluginName);
    }
})(this, function (pluginName) {
    "use strict";

    var defaults = {
        selector: '',
        someDefaultOption: '',
        classToAdd: ''
    };

    /**
     * Fusionner les options
     * @param {Object} defaults Default settings
     * @param {Object} options User options
     */
    var extend = function (target, options) {
        var prop,
            extended = {};
        for (prop in defaults) {
            if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
                extended[prop] = defaults[prop];
            }
        }
        for (prop in options) {
            if (Object.prototype.hasOwnProperty.call(options, prop)) {
                extended[prop] = options[prop];
            }
        }
        return extended;
    };

    /**
     * L'object du plugin
     * @param {Object} options User options
     * @constructor
     */
    function Plugin(options) {
        this.options = extend(defaults, options);
        this.init(); // Initialization Code Here
    }

    /**
     * Les prototypes du plugin
     * @public
     * @constructor
     */
    Plugin.prototype = {
        init: function () {
            // find all matching DOM elements.
            // makes `.selectors` object available to instance.
        }, // #! init
        doSomething: function (someData) {
            console.log(someData);
        }, // #! doSomething
    };
    return Plugin;
});

/**************
    EXAMPLE:
**************/

//// créer l'instance du plugin
// var pluginInstance = new PluginNameHere({
//     selector: ".box",
//     someDefaultOption: 'foo2',
//     classToAdd: "custom-new-class-name",
// })

//// appeler une méthode publique du plugin
// pluginInstance.doSomething("Doing Something Else")