88

我正在使用 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 兼容的唯一方法

4

3 回答 3

104

在http://requirejs.org/docs/api.html#config-shim中指出，在 RequireJS 中使用 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
    };  

}));

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

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

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

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

define(['jquery'], function($) {
  $.fn.yourjQueryPlugin = function() {
     // Plugin code here
  };
})
于 2012-08-09T19:04:38.200 回答
67

你只需要做任何一个

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 插件都已经设置好了。

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

于 2012-06-07T02:37:55.797 回答
2

就像所有一些 jquery 插件已经使用 amd/require 一样，你不需要在 shim 中声明任何东西。事实上，在某些情况下这样做可能会给您带来问题。

如果您查看 jquery cookie JS，您将看到定义调用和 require(["jquery"])。

在 jquery.js 中，您将看到对 define("jquery",[],function()... 的调用

于 2016-08-09T17:11:28.283 回答