jquery - 如何将 jquery 样板转换为 require 样板？

Question

如何将 jquery 命名空间插件转换或放入 require 样板中？例如，

这通常是我的标准 jquery 样板，

// 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);

这通常是必需的样板，

//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
});

但是我怎样才能将它们混合在一起 - 或者也许我不应该？

这是我的测试，

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


});

它当然不起作用。有什么想法吗？

Answer 1

这是一个example无论有没有 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;
    };
}));

其工作方式是使用工厂函数作为其唯一参数来调用粘合函数(代码中的第一个函数)。工厂函数只需要获取 jQuery 的引用。胶水函数检测AMD环境(RequireJS就是)是否存在。如果是这样，它需要 jquery 模块并将其作为 jQuery 引用传递。如果没有，它的行为方式与不支持 AMD 的插件相同。