Question

我正在使用requirejs + jquery，我想知道是否有一种聪明的方法可以使jQuery插件在需要时运行良好。

例如我正在使用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

兼容的唯一方法

Answer 1

在http://requirejs.org/docs/api.html#config-shim中指出，在RequireJS中使用填充程序配置有一些注意事项。即，当您使用优化器时，“不要在构建中混合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
  };
})

Answer 2

你只需要做

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成为可能。

Answer 3

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

如果你查看jquery cookie JS，你会看到define calls和require（[“jquery”]）。

在jquery.js中你会看到一个调用define（“jquery”，[]，function（）......

如何使用requirejs加载jQuery插件

3 个答案: