I use the following template for jQuery plugins with AMD support
https://gist.github.com/simonsmith/4353587
You still need to give the plugin a name otherwise there would be no way to expose it on to the jQuery prototype.
Question
I'm trying to convert all my jquery plugin that can work with or without an AMD environment.
the boilerplate,
Boilerplate 1:
(function (factory) {
// If in an AMD environment, define() our module, else use the jQuery global.
if (typeof define === 'function' && define.amd)
define(['jquery'], factory);
else
factory(jQuery);
}(function ($) {
var apple = $.fn.extend({
defaults: {
element: '',
onSuccess: function() {}
},
getInfo: function (options) {
// Confirm a varible for the plugin's root itself.
var base = this;
// Process the setting.
var properties = $.extend(true, {}, this.defaults, options );
return properties;
}
});
return apple;
}));
This work fine in an AMD environment. And it can be used with requirejs (and backbone.js as well I guess),
require.config({
paths: {
jquery: 'ext/jquery/jquery-min',
underscore: 'ext/underscore/underscore-min',
backbone: 'ext/backbone/backbone-min',
text: 'ext/text/text'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
deps:['jquery'],
exports: '_'
},
backbone: {
deps:['jquery','underscore','text'],
exports: 'Backbone'
}
}
});
require([
// Load our app module and pass it to our definition function
'app/plugin'
], function(Plugin){
Plugin.getInfo({
text:"hello world",
element:"#target",
onSuccess:function(){
console.log("callback");
}
});
});
But how can I execute this plugin in jquery standard method? Like this below,
$(document).ready(function(){
$.fn.myPluginName();
});
This is how I would call the plugin previously for this kind of boilerplate,
Boilerplate 2:
// This is the plugin.
(function($){
// Initial setting.
var pluginName = 'myPluginName';
var storageName = 'plugin_' + pluginName;
var methods = {
init : function( options ) {
return options;
}
};
$.fn[pluginName] = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments ); // always change 'init' to something else if you different method name.
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.' + pluginName + '.' );
}
return this;
};
$.fn[pluginName].defaults = {
onSuccess: function() {}
};
})(jQuery);
But how can I call the first plugin boilerplate as I don't store the plugin name manually anymore inside this boilerplate?
Solution
I use the following template for jQuery plugins with AMD support
https://gist.github.com/simonsmith/4353587
You still need to give the plugin a name otherwise there would be no way to expose it on to the jQuery prototype.