如何使jQuery插件可通过requirejs加载

我正在使用requirejs + jquery，我想知道是否有一种聪明的方法可以使jQuery插件与require一起很好地工作。

例如，我正在使用jQuery-cookie。如果我理解正确，我可以创建一个名为jquery-cookie.js的文件，然后在里面执行

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插件与requirejs或任何amd兼容的唯一方法

您只需要做

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

在jquery-cookie.js的末尾，或者

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

在您包含jquery-cookie之前的任何地方（例如，数据主体指向的任何地方）。

您发布的最后一个代码块适用于jQuery之类的东西，它们可以重新分发，并且可能在AMD环境中也可能不在。理想情况下，每个jQuery插件都应该已经进行了设置。

我更喜欢将包含的库尽可能地保持纯净，因此每页一次的全局填充程序配置对我来说似乎是最干净的解决方案。这样，升级就更安全，而CDN成为可能。

http://requirejs.org/docs/api.html#config-shim指出了在RequireJS中使用垫片配置的一些注意事项。即，在使用优化程序时，“不要在构建中将CDN加载与shim config混合使用”。

我一直在寻找一种在有和没有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
    };  

}));

功劳归于jrburke；就像很多javascript一样，它是作用在其他函数上的函数。但是我想我已经解压了它在做什么。

factory第一行中的function参数本身就是一个函数，该函数被调用以在$参数上定义插件。当不存在与AMD兼容的加载器时，将直接调用它以在全局jQuery对象上定义插件。就像常见的插件定义习惯用法一样：

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

如果有模块加载器，则将factory其注册为回调，以供加载器在加载jQuery后调用。jQuery的加载副本是参数。相当于

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

正如所有Jquery插件的FYI已经使用amd / require一样，因此您无需在shim中声明任何内容。实际上，在某些情况下，这样做可能会给您带来麻烦。

如果查看jquery cookie JS，将看到define调用和require（[“ jquery”]）。

在jquery.js中，您将看到对define（“ jquery”，[]，function（）...的调用。