How to convert jquery boilerplate into require boi

问题:

How can I convert or put jquery namespace plugin into require boilerplate? For intstance,

This is my standard jquery boilerplate usually,

// A namepace structure:
(function($){

    // Initial setting.
    var pluginName = 'BR_account';
    var storageName = 'plugin_' + pluginName;

    var methods = {

        init : function( options ) {
            console.log("this is a jquery plugin boilerplate in requirejs boilerplate"); // nothing returned.
        }
    };

    $.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);

And this is the require boilerplate usually,

//Filename: boilerplate.js
define([
    // These are path alias that we configured in our bootstrap
    'jquery', // lib/jquery/jquery
    'underscore', // lib/underscore/underscore
    'backbone' // lib/backbone/backbone
], function($, _, Backbone){
    // Above we have passed in jQuery, Underscore and Backbone
    // They will not be accessible in the global scope
    return {};
    // What we return here will be used by other modules
});

But how can I mix them together - or maybe I shouldn't??

This is my test,

define([
    'jquery',
    'underscore',
    'backbone'
], function($, _, Backbone){

    console.log(Backbone); // I get an object of Backbone


    // A namepace structure:
    (function($){

        // Initial setting.
        var pluginName = 'BR_account';
        var storageName = 'plugin_' + pluginName;

        var methods = {

            init : function( options ) {
                console.log("this is a jquery plugin boilerplate in requirejs boilerplate"); // nothing returned.
            }
        };

        $.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);


});

It is not working of course. Any ideas?

回答1:

Here's an example that works with or without RequireJS:

(function (factory) {
    // If in an AMD environment, define() our module, else use the
    // jQuery global.
    'use strict';
    if (typeof define === 'function' && define.amd)
        define(['jquery'], factory);
    else
        factory(jQuery);
}(function ($) {
    'use strict';

    // This is the plugin proper.
    $.fn.findAndSelf = function(selector) {

        var $nodes = this.find(selector);

        if (this.is(selector))
            $nodes = $nodes.add(this);

        return $nodes;
    };
}));

The way this works is that the glue function (the first function in the code) is invoked with a factory function as its only parameter. The factory function only needs to get a reference to jQuery. The glue function detect whether an AMD environment (which RequireJS is) is present. If so, it requires the jquery module and passes that as the jQuery reference. If not, it acts the same way a non-AMD-aware plugin does.