Javascript 如何使用requirejs加载jQuery插件

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

例如，我使用jquerycookie。如果我理解正确，我可以创建一个名为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环境中，也可能不在AMD环境中。理想情况下，每个jQuery插件都已经设置好了

---

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

在RequireJS中使用垫片配置时有一些注意事项，在上一节中指出。也就是说，在使用优化器时，“不要将CDN加载与构建中的垫片配置混合使用”

我在寻找一种方法，在有和没有RequireJS的站点上使用相同的jQuery插件代码。我在找到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
  };
})

---

仅供参考，一些jquery插件已经使用amd/require，因此您不需要在垫片中声明任何内容。事实上，在某些情况下，这样做可能会给您带来问题

如果您查看jquerycookiejs，您将看到define调用和require（[“jquery”]）

---

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

如果我不同时执行定义和填充，则会得到一个$。根据我的经验，cookie不是函数错误消息，不从定义函数返回任何内容是不够的，requirejs将无法识别模块已加载。这可以通过填充来解决：{plugins:{dependens:['jquery']，exports:'plugins'}您应该注意jQuery插件脚本需要实际运行。我不是专家，但我找到了一个简单的解决方案，您可以使用一个

require（['plugin1'，'plugin2']）

等。没有传入回调，因此除了插件脚本本身之外，不会运行任何东西。这意味着它们将自己添加到

jQuery.fn

因此，在其他任何地方，您都可以将“jQuery”列为依赖项，并将其包括在内。正如我所说，我对这方面非常陌生，可能有更好的方法（例如仅使用

脚本

标记）但这确实管用。乔希：你在赌所有东西都会以正确的顺序加载。你网站上的一些用户可能会看到坏东西。问题不在于插件加载，而是插件加载的时间以及当时执行的其他操作。使用require的主要原因是确保基于n依赖性而不是猜测。我喜欢这个答案，因为即使这个问题是关于jQuery插件的，它也适用于任何类型的模块或库，而不仅仅是jQuery。我花了一分钟的时间来理解你的代码，但一旦我这样做了，它就非常有意义。它绝对是难以理解的javascript。我添加了一些关于我是如何理解的解释你可以用

factory（jQuery | | Zepto）

轻松地替换非AMD代码，但我不知道你将如何处理AMD部分。我认为你必须将jQuery“path”设置为Zepto？？？

路径：{jQuery:'vendor/Zepto/Zepto.min'}

wow我一直想理解这段代码。非常感谢，

shim

实际上不是这样做的吗？我想不是。因为你说你是像上面那样手动编码的。像我这样的白痴的Protip：在代码段中写着

$.fn.jqueryPlugin

，将

jqueryPlugin

更改为插头名义上！！