Jquery ui requirejs+；jqueryui=$。未定义小部件

我使用的是requirejs+jquery+jqueryui。我已经读了很多关于如何做到这一点的例子。我想我了解各种方法，在我看来，我的设置应该正常工作。但是，我偶尔会得到一个$。在依赖jquery ui的自定义模块中，小部件没有定义错误。这是一个痛苦，因为它是不一致的，很难复制，所以我很难测试替代方法

我不是在填充我所有的jquery插件，因为有很多。相反，我用一个单独的requirejs调用加载jquery。然后，在回调中，我加载其余的东西。这样，我就不必为所有jquery插件维护垫片列表

对于jQueryUI，我使用一个垫片使其依赖于jquery。然后，使用小部件工厂的所有自定义模块的依赖项列表中都有“jqueryui”

在我的模板中

requirejs.config({
    baseUrl: ATHLETE.siteConfig.jsBaseUrl,
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
        'jquery-ui': '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min'
    },
    shim: {
        "jquery-ui": ['jquery']
    },
    waitSeconds: 15
});

requirejs(['jquery'], function($) {
    requirejs(['site'], function() {
        requirejs(['mypage']);
    });
});

请注意，我在mypage.js之前加载site.js。它们有一些共享的依赖项。在我的构建配置中，我将site.js从mypage.js中排除，因此共享依赖项将编译为site.js而不是mypage.js。因此，在加载mypage.js之前，我需要完全加载site.js，否则我可能会尝试单独加载这些共享依赖项

下面是我的一个示例自定义模块，它依赖于jqueryui

define([
    'jquery',
    'jquery-ui'
],function($) {
    $.widget('ui.viewAllSponsorsWidget', $.ui.dialog, {
        options: {
            autoOpen: false,
            dialogClass: 'view-all-sponsor-dialog-wrap',
            draggable: false,
            modal: true,
            resizable: false,
            width: 370,
            height: 400
        }
    });
});

define([
    'jquery',
    'jquery-ui'
],function($) {
    console.log('$.widget is defined? ' + Boolean($.widget));
    console.log('jQuery.widget is defined? ' + Boolean(jQuery.widget));
});

未定义错误$.widget是由我的第5行和类似自定义模块引起的。同样，它确实是不一致的，很难复制。通常情况下，即使清除缓存，我也不会得到错误有人能想出一种方法，在jquery ui完全加载之前执行第5行吗？

2013年8月16日更新

我已经找到了更多的线索。 我创建了一个依赖于jquery和jquery ui的简单模块

define([
    'jquery',
    'jquery-ui'
],function($) {
    $.widget('ui.viewAllSponsorsWidget', $.ui.dialog, {
        options: {
            autoOpen: false,
            dialogClass: 'view-all-sponsor-dialog-wrap',
            draggable: false,
            modal: true,
            resizable: false,
            width: 370,
            height: 400
        }
    });
});

define([
    'jquery',
    'jquery-ui'
],function($) {
    console.log('$.widget is defined? ' + Boolean($.widget));
    console.log('jQuery.widget is defined? ' + Boolean(jQuery.widget));
});

其结果如下：

LOG: $.widget is defined? false
LOG: jQuery.widget is defined? true

---

因此，不知何故，全局jQuery对象定义了小部件，但requirejs提供给我的副本没有定义。

将您的垫片更改为：

shim: {
    'jquery-ui': ['jquery']
}

---

下面是一系列流行库的Require.js配置。

我想我有一个解决问题的方法。虽然这个问题很难重现，但我还是要等一段时间，才能“接受”我自己的答案是正确的。另外，我的答案没有使用requirejs加载jquery。我看不出这对我有什么意义。但是，如果有人看到了一种不必在单独的脚本标记中加载jquery的方法，请告诉我

由于jQuery将自身定义为一个命名的AMD模块，所以我可以在执行任何requirejs操作之前，首先使用标准脚本标记同步加载它。然后，我还删除了jquery的路径条目，因为此时它已经加载到名称“jquery”下。通过这样做，requirejs将jQuery的正确“副本”返回给我，一切正常。我还需要使用jQuery.noConflict，因为我使用的是Garmin通信器，它依赖于原型。这是我的更新代码，省略了不相关的部分

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">$.noConflict();</script>
<script type="text/javascript">
requirejs.config({
    baseUrl: ATHLETE.siteConfig.jsBaseUrl,
    paths: {
        'jquery-ui': '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min'
    },
    shim: {
        "jquery-ui": ['jquery']
    },
    waitSeconds: 15
});
requirejs(['mymodule']);
</script>

---

有一个类似的问题是第三方ASP.NET控件劫持了jQuery定义

$telerik.$=jQuery.noConflict（）

尽管脚本自己清理了，但jQuery脚本的尾部实际上重写了我的RequireJS映射

if（typeof define==“function”&&define.amd）{ 定义（“jquery”，[]，函数（）{returnjQuery；}）； }

RequireJS会延迟加载脚本，RadScriptManager会在表单标签下不断注入脚本，因此会出现一些奇怪的种族问题

对于某些请求，$来自我的地图，并且是全局的 其他请求$是$Telerik.$，不是全局的，是不同的版本

---

为了解决我的问题，我回滚到Telerik控件使用的jQuery版本，并将其硬编码到scrip标记中，以确保它始终可用，然后禁用Telerik加载自己的jQuery。不是AMD，但对我来说已经足够好了。

如果您想覆盖jQuery ui的某些方法，那么最好使用Requirejs init方法，这可以确保在每个模块（包括jQuery ui）中使用相同的修改代码

像这样使用垫片

  'jquery-ui': { deps: ['jQuery'], init: function ($) {

  //do whatever with $.widget , all reference of 
  // jQuery-ui is accessible here, override 


 return this;   //very imp , so all your module will use your 
                // modified jQuery-UI reference

 } },

---

在将jQuery UI与Require.js一起使用时，我遇到了一个类似的、非常偶然的错误，我通过使用转换脚本创建“用于像RequireJS这样的加载程序的jQuery UI的AMD包装模块”修复了这个错误

使用npm安装

npm install -g jqueryui-amd

转换从jqueryui.com下载的jQuery UI JavaScript文件

jqueryui-amd path/to/jquery-ui-version

然后将新转换的

jqueryui

目录的路径添加到require.js配置文件中

requirejs.config({
    paths: {
        jqueryui: 'path/to/jquery-ui-version/jqueryui'
    }
});

最后，在JavaScript文件中，您正在使用一个jQueryUI组件

define(['jquery', 'jqueryui/widget', 'jqueryui/button'], function ($) {
    //Use widget and button in here, off of the given $ variable.
});

---

我和你有同样的问题，在RequireJS模块中定义我的小部件，尽管我不是100%确定这是最好的解决方案，但它在不破坏模块完整性的情况下对我有效：

requirejs.config({
     //By default load any module IDs from js/lib
        baseUrl: 'js',
        shim: {
            'jquery': {
                exports: 'jQuery'
            },
            'jquery-ui': {
                deps: ['jquery'],
                exports: '$'
            }
        }
  });

---

当您在模块中需要jquery ui时，jquery将被自动要求，并且$object将拥有您所需要的一切。

这些答案有点过时了。我希望提供一点更新的答案。jQueryUI现在内置了AMD支持。您只需使用

bower install jquery-ui

然后在requirejs.config中，只需将jquery_ui添加到路径{}部分。不再需要垫片

如果您只想加载所需的jquery ui的一小部分，那么bower将安装jquery ui，然后使用requirejs提供的构建工具创建一个包。否则，如果您只尝试导入一个单独的文件，那么每个jquery ui文件都将尝试加载它们的依赖项，您将得到诸如“widget not defined”或“not find file widget.js”等内容。 我在这里写了一篇简短的文章：

---

希望有帮助。

当它无法首先加载jquery ui时，控制台中是否存在路径错误？看看这个：试过了，没用。出口是美国