AMD plugin boilerplate: how to execute the plugin in non-AMD environment?

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?

Answer 1

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.