javascript - RequireJS 偶发性故障

Question

我正在 Magento2 网站上工作。 Magento2 使用 requirejs，我正在使用的主题也使用了它。部分主题使用Owl Carousel .用来加载轮播的代码原来是

require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
    $("#banner-slider-demo-1").owlCarousel({
        // carousel settings
    });
});

但是我注意到有时当我加载主页(使用轮播的地方)时轮播不显示，并且控制台中有错误

Uncaught TypeError: $(...).owlCarousel is not a function

考虑到可能没有加载 jQuery，我更改了 require 代码以序列化需求

require(['jquery'], function($) {
    require(['owl.carousel/owl.carousel.min'], function () {
        $("#banner-slider-demo-1").owlCarousel({
            // ...

但这没有效果......有时轮播加载并且没有错误，其他时候有错误并且没有加载。

即使出现错误，浏览器也会提取轮播文件。似乎还需要为每个开发人员工具加载轮播脚本

知道会发生什么吗？

Answer 1

您的问题是您正在通过 script 元素和通过 RequireJS 加载 jQuery。您必须使用一种方法，不能同时使用两种方法。

如果我在控制台中运行它:

console.log("owlCarousel", typeof jQuery.fn.owlCarousel)

我得到:

owlCarousel function

但是有了这个:

require(["jquery"], function ($) { 
  console.log("owlCarousel", typeof $.fn.owlCarousel); 
})

我得到:

owlCarousel undefined

如果你尝试 require(["jquery"], function ($) { console.log("equal", $ === window.jQuery); }) 你会得到等于假。所以你加载了两个 jQuery 实例。使用 RequireJS 访问 jQuery 的代码得到一个没有 .owlCarousel 的版本。这是因为 Owl Carousel 将自身安装在 window.jQuery 上。

如果出于某种原因必须通过 script 加载 jQuery，则应该在 加载 RequireJS 之前移动加载它的 script 元素。 (你应该为你加载的所有脚本执行此操作，你想用 script 和 加载它们是 AMD 感知的。)然后对于 RequireJS，你应该只定义这个假模块:

define("jquery", function () {
    return jQuery;
});

这使得当 RequireJS 加载 jQuery 时，它只使用已经在全局空间中定义的 jQuery。这个假模块的理想位置是在您配置 RequireJS 之前。

当你这样做时，你应该为 owl.carousel/owl.carousel.min 定义一个 shim:

`owl.carousel/owl.carousel.min`: ['jquery']

这样就不需要将加载 owl.carousel/owl.carousel.min 的调用嵌套在加载 jquery 的调用中。你可以只做你最初尝试的事情:

require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
  $("#banner-slider-demo-1").owlCarousel({
    // carousel settings
  });
});