如何使jQuery插件可以使用requestjs加载

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (732)

我正在使用requijs+jQuery,我想知道是否有一种聪明的方法可以让jQuery插件很好地使用Required。

例如,我使用jQuery-cookie。如果我正确理解,我可以创建一个名为jQuery-guie.js的文件和内部do。

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});
requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

我想知道是否可以像jQuery那样做一些事情,如下所示:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

或者,这是使jquery插件与需求js或任何amd兼容的唯一方法。

提问于
用户回答回答于

你只需要

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});

在jQuery的末尾,

requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

在你之前的任何地方都包括jQuery-cookie(例如,在数据主要指向的地方)。

你发布的最后一个代码块对于jQuery这样的东西很好,jQuery可以重新分发,也可能不在AMD环境中。理想情况下,每个jQuery插件都已经设置好了。

用户回答回答于

在RequireJS中使用shim配置有一些注意事项,在http://requirejs.org/docs/api.html#config-shim中指出。也就是说,当您使用优化器时,“不要在构建中将CDN加载与shim配置混合”。

我正在寻找一种方法来在使用和不使用RequireJS的站点上使用相同的jQuery插件代码。我在https://github.com/umdjs/umd/blob/master/jqueryPlugin.js找到了jQuery插件的片段。你在这个代码中包装你的插件,它可以正常工作。

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module depending on jQuery.
    define(['jquery'], factory);
} else {
    // No AMD. Register plugin with global jQuery object.
    factory(jQuery);
}
}(function ($) {

    $.fn.yourjQueryPlugin = function () {
        // Put your plugin code here
    };  

}));

factory第一行中的函数参数本身是一个函数,它被调用来定义$参数上的插件。如果不存在与AMD兼容的加载程序,则直接调用它来定义全局jQuery对象上的插件。这就像常见的插件定义成语一样:

function($)
{
  $.fn.yourjQueryPlugin = function() {
    // Plugin code here
  };
}(jQuery);

如果有一个模块加载器,那么它将factory被注册为加载器在加载jQuery之后调用的回调函数。jQuery的加载副本是参数。这相当于

define(['jquery'], function($) {
  $.fn.yourjQueryPlugin = function() {
     // Plugin code here
  };
})

扫码关注云+社区

领取腾讯云代金券