Last active
July 19, 2018 10:44
-
-
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')
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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