Skip to content

Instantly share code, notes, and snippets.

@ifthenelse
Last active July 19, 2018 10:44
Show Gist options
  • Save ifthenelse/7ce072d7d1655e09ef3fbe8affb12535 to your computer and use it in GitHub Desktop.
Save ifthenelse/7ce072d7d1655e09ef3fbe8affb12535 to your computer and use it in GitHub Desktop.
Boilerplate for jQuery plugin with UMD wrapper and requiremetn of external dependencies (in this case 'moment' and 'moment-timezone')
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery', 'moment', 'moment-timezone'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = function(root, jQuery, moment) {
if (jQuery === undefined) {
// require('jQuery') returns a factory that requires window to
// build a jQuery instance, we normalize how we use modules
// that require this pattern but the window provided is a noop
// if it's defined (how jquery works)
if (typeof window !== 'undefined') {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
if (moment === undefined) {
if (typeof window !== 'undefined') {
moment = require('moment');
} else {
moment = require('moment')(root);
}
}
if (moment.tz === undefined) {
if (typeof window !== 'undefined') {
moment.tz = require('moment-timezone');
} else {
moment.tz = require('moment-timezone')(root);
}
}
factory(jQuery, moment, window, document);
return jQuery;
};
} else {
// Browser globals
factory(jQuery, moment, window, document);
}
}(function($, moment, window, document, undefined) {
"use strict";
// 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 and document are passed through as local variables 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).
// Create the defaults once
var pluginName = "pluginName",
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function Plugin(element, options) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, {
init: function() {
console.log("moment test ---");
console.log("moment.locale(): ", moment.locale());
console.log("moment().format('L'): ", moment().format('L'));
console.log("moment().format('LTS'): ", moment().format('LTS'));
console.log("moment.tz test ---");
console.log("moment.tz.guess();: ", moment.tz.guess());
// Place initialization logic here
// You already have access to the DOM element and
// the options via the instance, e.g. this.element
// and this.settings
// you can add more functions like the one below and
// call them like the example below
// this.yourOtherFunction("jQuery Boilerplate");
},
yourOtherFunction: function(text) {
// some logic
$(this.element).text(text);
}
});
// 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));
}
});
};
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment