Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
AMD compatible plugin for jQuery
// UMD dance -
!function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
}(this, function($) {
'use strict';
// Default options
var defaults = {
// Constructor, initialise everything you need here
var Plugin = function(element, options) {
this.element = element;
this.options = options;
// Plugin methods and shared properties
Plugin.prototype = {
// Reset constructor -
constructor: Plugin,
someMethod: function() {
// Create the jQuery plugin
$.fn.plugin = function(options) {
// Do a deep copy of the options -
options = $.extend(true, {}, defaults, options);
return this.each(function() {
var $this = $(this);
// Create a new instance for each element in the matched jQuery set
// Also save the instance so it can be accessed later to use methods/properties etc
// e.g.
// var instance = $('.element').data('plugin');
// instance.someMethod();
$'plugin', new Plugin($this, options));
// Expose defaults and Constructor (allowing overriding of prototype methods for example)
$.fn.plugin.defaults = defaults;
$.fn.plugin.Plugin = Plugin;
// Usage example
require(['jquery', 'jquery.plugin'], function($) {
$('.test li').plugin({
test: 'option1',
test2: 'option2'
Copy link

DimitarChristoff commented Dec 22, 2012

poor @BlinKy has to work on jquery plugins. I still love the wrap idea, it was huge win. I have now kind of figured cjs support as well.

Copy link

simonsmith commented Dec 25, 2012

Yeah, works great with jQuery because it's usually always called the same in the path options.

And I don't mind jQuery so much, fun to change around now and then.

Copy link

martyglaubitz commented Sep 1, 2013

thanks for this man! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment