RequireJS 和 Fancybox 的奇怪问题答案

【问题标题】：Strange issue with RequireJS and FancyboxRequireJS 和 Fancybox 的奇怪问题
【发布时间】：2017-11-21 21:15:13
【问题描述】：

我正在清理工作中的一些旧代码，并开始尝试让事情变得更加模块化。我正在使用 RequireJS 加载 javascript 库，因为我需要（呵呵）它们。无论如何，我在使用 fancybox 时遇到了一个周期性问题，因为它间歇性地无法加载（在 chrome 调试器中没有显示 404 或任何内容）。这是我的 app.js 中的内容：

```

require.config({
    paths: {
        "knockout": "knockout-3.4.0",
        "knockout.validation": "knockout.validation.min",
        "jquery": "jquery-1.8.2",
        "fancybox": "jquery.fancybox.pack",
        "pager": "Page/pager",
        "queryBuilder": "query-builder.min",
        "jQuery.extendext": "jQuery.extendext.min",
        "doT": "doT.min",
        "dataTables": "jquery.dataTables.min"
    },
    baseUrl: "/ucampaignmanager/Scripts",
    shim: {
        "jquery": {
            exports: "jQuery"
        },
        "jQuery.extendext": {
            depends: "jQuery",
            exports: "jQuery.extendext"
        },
        "knockout": {
            exports: "ko"
        },
        "knockout.validation": {
            depends: "ko"
        },
        "fancybox": {
            depends: "jQuery",
            exports: "jQuery.fn.fancybox"
        },
        "queryBuilder": {
            depends: "jQuery.extendext",
            exports: "jQuery"
        },
        "dataTables": {
            depends: "jQuery.extendext",
            exports: "jQuery.fn.dataTable"
        }
    }
});

```

相关页面具有以下内容：

```

require(["knockout", "jquery", "./Page/rtfAreaEditing", "./Page/pager", "queryBuilder"], function (ko, $, rtfAreaEditing) {
                $(function() {
                    //Actual stuff being executed
                });
            });

```

大约七分之一左右，硬刷新页面（或在没有缓存的情况下重新加载）将导致错误

$.fancybox is not a function

我像这样调用它： $(someElement).fancybox();

其余的时间，它工作得很好。我知道我一定是在做一些愚蠢的事情，但我不知道那是什么。

【问题讨论】：

标签： javascript requirejs fancybox-2

【解决方案1】：

我只想发表评论，但我还不能。您是否尝试过为花哨的盒子嵌套一个 require 调用。听起来你在处理比赛条件。

【讨论】：

还没有尝试过，但它看起来确实像一个竞争条件。嵌套一个 require 调用是什么意思？
require(["knockout", "jquery", "./Page/rtfAreaEditing", "./Page/pager", "queryBuilder"], 函数 (ko, $, rtfAreaEditing) { $ (function() { 在此处添加另一个 require 语句用于花哨 }); });
我尝试检查 $.fancybox 是否已定义，如果未定义则调用 require("fancybox")。在某些情况下，它仍然不会加载它。我还尝试将 fancybox 作为参数添加到函数中。有时它在那里，有时它不在。就像它周期性地根本不检索它，但认为它有。