Last active
December 18, 2015 09:59
-
-
Save ifahrentholz/5765291 to your computer and use it in GitHub Desktop.
jquery plugin boilerplate v2
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
| /* | |
| Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post] | |
| (http://benalman.com/news/2010/11/immediately-invoked-function-expression/) | |
| that locally passes in `jQuery`, the `window` object, the `document` object, | |
| and an `undefined` variable. The `jQuery`, `window` and `document` objects | |
| are passed in locally to improve performance (JavaScript first searches for | |
| a variable match within the local variables set before searching the global | |
| variables set). All of the global variables are also passed in locally to | |
| be minifier friendly. `undefined` can be passed in locally, because it is not | |
| a reserved word in JavaScript | |
| */ | |
| (function ($, window, document, undefined) { | |
| /*********************************************************************************** | |
| * PLUGIN SETTINGS | |
| ***********************************************************************************/ | |
| /* | |
| ECMAScript 5 Strict Mode: [John Resig Blog Post] | |
| (http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/) | |
| */ | |
| "use strict"; | |
| /** | |
| * Plugin name (change this) | |
| * @type {String} | |
| */ | |
| var pluginName = "xolotl", | |
| /** | |
| * Plugin version number (change this) | |
| * @type {String} | |
| */ | |
| pluginVersion = "0.1.0", | |
| /*********************************************************************************** | |
| * EOD PLUGIN SETTINGS | |
| ***********************************************************************************/ | |
| /** | |
| * Plugin object | |
| * @type {Object} | |
| */ | |
| /* | |
| **Convention:** Methods or properties starting with `_` are meant to be | |
| private. You can make them public by including them in the return statement | |
| at the bottom of the Constructor | |
| */ | |
| Plugin = function(element, options, dataName) { | |
| /** | |
| * Self (add to this) | |
| * Stores all of the `Plugin` object instance variables | |
| * @type {Object} | |
| */ | |
| var self = { | |
| /** | |
| * The DOM element that called the plugin | |
| * @type {Element} | |
| */ | |
| element: element, | |
| /** | |
| * The DOM element that called the plugin (wrapped in a jQuery object) | |
| * @type {Object} | |
| */ | |
| $element: $(element), | |
| /** | |
| * The plugin options | |
| * @type {Object} | |
| */ | |
| options: options, | |
| /** | |
| * The name of the plugin | |
| * @type {String} | |
| */ | |
| dataName: dataName | |
| }, | |
| /*********************************************************************************** | |
| * PRIVATES | |
| ***********************************************************************************/ | |
| /** | |
| * Callback support | |
| * @param {Function} callback | |
| * @return {Function} | |
| */ | |
| _callbackSupport = function(callback) { | |
| //Checks to make sure the parameter passed in is a function | |
| if($.isFunction(callback)) { | |
| /* | |
| Calls the method passed in as a parameter and sets the context to | |
| the `Plugin` object, which is stored in the jQuery `data()` | |
| method. This allows for the `this` context to reference the | |
| Plugin API Methods in the callback function. The original element | |
| that called the plugin(wrapped in a jQuery object) is the only | |
| parameter passed back to the callback | |
| */ | |
| callback.call(self.$element.data(dataName), self.$element); | |
| } | |
| //Maintains chainability | |
| return this; | |
| }, | |
| /** | |
| * Get data via XHR | |
| * @param {String} url | |
| * @param {String} pubMsg | |
| * @return {Object} | |
| */ | |
| _getData = function(url, pubMsg) { | |
| $.ajax({ | |
| url: url, | |
| success: function(data) { | |
| $.publish('dnb/' + pubMsg, data); | |
| } | |
| }); | |
| }, | |
| /*********************************************************************************** | |
| * EOD PRIVATES | |
| ***********************************************************************************/ | |
| /*********************************************************************************** | |
| * HELPER FUNCTIONS | |
| ***********************************************************************************/ | |
| /** | |
| * Get option | |
| * @param {String} key | |
| * @param {Function} callback | |
| * @return {String} Return the option if it exist | |
| */ | |
| getOption = function(key, callback) { | |
| /* | |
| Returns the plugin option if it exists, and returns undefined if the | |
| option does not exist | |
| */ | |
| return self.options[key] || undefined; | |
| }, | |
| /** | |
| * Returns all plugin options | |
| * @param {Function} callback | |
| * @return {Object} | |
| */ | |
| getOptions = function(callback) { | |
| //Returns an object of all of the plugin's options | |
| return self.options || undefined; | |
| }, | |
| /** | |
| * Replaces a single plugin option | |
| * @param {String} key | |
| * @param {String} value | |
| * @param {Function} callback | |
| * @return {Object} (this) | |
| */ | |
| setOption = function(key, value, callback) { | |
| //Makes sure a string is passed in | |
| if(typeof key === "string") { | |
| //Sets the plugin option to the new value provided by the user | |
| self.options[key] = value; | |
| } | |
| //Provides callback function support | |
| _callbackSupport(callback); | |
| //Maintains chainability | |
| return this; | |
| }, | |
| /** | |
| * Replace a plugin option | |
| * @param {Object} newOptions | |
| * @param {Function} callback | |
| * @return {[Object]} | |
| */ | |
| setOptions = function(newOptions, callback) { | |
| //If the passed in parameter is an object literal | |
| if($.isPlainObject(newOptions)) { | |
| /* | |
| Uses the jQuery `extend` method to merge the user specified | |
| options object with the self.options` object to create a new | |
| object. The options variable is set to the newly created | |
| object. | |
| */ | |
| self.options = $.extend({}, self.options, newOptions); | |
| } | |
| //Provide callback function support | |
| _callbackSupport(callback); | |
| //Maintains chainability | |
| return this; | |
| }, | |
| /*********************************************************************************** | |
| * EOD HELPER FUNCTIONS | |
| ***********************************************************************************/ | |
| /*********************************************************************************** | |
| * CONSTUCTOR | |
| ***********************************************************************************/ | |
| /** | |
| * Constructs the plugin | |
| * @param {Function} callback | |
| * @return {Object} | |
| */ | |
| create = function(callback) { | |
| //Provides callback function support | |
| _callbackSupport(callback); | |
| _getData(); | |
| //Maintains chainability | |
| return this; | |
| }; | |
| /*********************************************************************************** | |
| * EOD CONSTUCTOR | |
| ***********************************************************************************/ | |
| /*********************************************************************************** | |
| * PUBLIC API | |
| ***********************************************************************************/ | |
| /** | |
| * Public API (add to this if you create custom public methods/properties) | |
| * All of these methods / properties are public | |
| */ | |
| return { | |
| /** | |
| * The current version of the plugin | |
| * @type {String} | |
| */ | |
| version: pluginVersion, | |
| /** | |
| * Object holding all of the plugin instance properties | |
| * @type {Object} | |
| */ | |
| self: self, | |
| /** | |
| * Returns a single plugin option | |
| * @param {String} key | |
| * @type {Function} | |
| */ | |
| getOption: getOption, | |
| /** | |
| * Returns an object containing all of the current plugin options | |
| * @type {Function} | |
| */ | |
| getOptions: getOptions, | |
| /** | |
| * Sets a single plugin option. | |
| * @type {Function} | |
| * @param {String} key | |
| * @param {String} value | |
| */ | |
| setOption: setOption, | |
| /** | |
| * Sets or adds new plugin option settings | |
| * @type {Function} | |
| * @param {Object} newOptions | |
| */ | |
| setOptions: setOptions, | |
| /** | |
| * Constructs the plugin | |
| * @type {Function} | |
| */ | |
| create: create | |
| }; | |
| /*********************************************************************************** | |
| * EOD PUBLIC API | |
| ***********************************************************************************/ | |
| }; // END OF PLUGIN FUNCTION | |
| /*********************************************************************************** | |
| * PLUGIN DEFINITION | |
| ***********************************************************************************/ | |
| /** | |
| * Plugin definition | |
| * @param {Object} options | |
| * @return {Object} | |
| */ | |
| $.fn[pluginName] = function (options) { | |
| //Maintains chainability for all calling elements | |
| return this.each(function () { | |
| /* | |
| stores the calling element and the data name into local variables, | |
| instantiates the plugin variable (which will hold the plugin | |
| object), and instantiates an empty object literal (which will be | |
| used to dynamically create a jquery custom pseudo selector) | |
| */ | |
| var element = $(this), plugin, dataName = pluginName, obj = {}; | |
| /* | |
| Returns early if the calling element already has a plugin | |
| instance associated with it inside of the jQuery `data` method | |
| */ | |
| if ($.data(element[0], dataName)) { | |
| return; | |
| } | |
| /* | |
| Uses the jQuery `extend` method to merge the user specified | |
| options object with the `self.options`object to create a new | |
| object. The options variable is set to the newly created | |
| object. | |
| */ | |
| options = $.extend({}, $.fn[pluginName].options, options); | |
| // Instantiates a new `Plugin` object and creates the plugin | |
| plugin = new Plugin(this, options, dataName).create(); | |
| /* | |
| Stores the new `Plugin` object in the calling element's | |
| jQuery `data` method | |
| */ | |
| $.data(element[0], dataName, plugin); | |
| /* | |
| Uses the name of the plugin to create a dynamic property | |
| of an empty object literal | |
| */ | |
| obj[pluginName] = function(elem) { | |
| /* | |
| Returns all DOM elements that have jQuery `data()` | |
| created by the plugin | |
| */ | |
| return $(elem).data(dataName) !== undefined; | |
| }; | |
| //Adds custom jQuery pseudo selectors | |
| $.extend($.expr[":"], obj); | |
| //end extending jQuery pseudo selectors | |
| }); //end return statement | |
| }; //end plugin | |
| /*********************************************************************************** | |
| * EOD PLUGIN DEFINITION | |
| ***********************************************************************************/ | |
| /*********************************************************************************** | |
| * DEFAULT PLUGIN OPTIONS | |
| ***********************************************************************************/ | |
| /** | |
| * Default plugin options (add to this) | |
| * @type {Object} | |
| */ | |
| $.fn[pluginName].options = { | |
| }; | |
| /*********************************************************************************** | |
| * EOD DEFAULT PLUGIN OPTIONS | |
| ***********************************************************************************/ | |
| // End of Plugin | |
| }(jQuery, window, document)); //passes in the `jQuery`, `window`, and `document` global objects locally |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment