如何将jquery样板转换为require样板？ [英] How to convert jquery boilerplate into require boilerplate?

问题描述

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

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

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

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

这通常是需要样板，

//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??

这是我的测试，

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?

推荐答案

这是示例可以使用或不使用RequireJS：

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

这种方式的工作方式是使用a调用glue函数（代码中的第一个函数）工厂功能作为唯一参数。工厂函数只需要获取对jQuery的引用。 glue函数检测是否存在AMD环境（RequireJS是）。如果是这样，它需要 jquery 模块并将其作为jQuery引用传递。如果没有，它的行为与非AMD感知插件的行为方式相同。

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.

这篇关于如何将jquery样板转换为require样板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！