velocity.ui间歇性地失败,出现错误“Velocity UI Pack:必须先加载速度”。

时间:2016-08-01 16:46:30

标签: jquery requirejs amd velocity.js

当我加载velocity.ui时,我在控制台上出现间歇性错误:

Velocity UI Pack: Velocity must be loaded first. Aborting.

并且velocity.ui的动画都没有。

我可以用这么简单的东西重现这个问题:

<script>
require.config({
  baseUrl: "/static/lib/",
  paths: {
    jquery: "external/jquery",
    velocity: "external/velocity/velocity.min",
    "velocity.ui": "external/velocity/velocity.ui.min",
  }
});

require(["jquery", "velocity.ui"]);
</script>

当我查看网络请求时,我发现在velocity之前加载了velocity.ui velocity.ui确实有define(["velocity"], ...

1 个答案:

答案 0 :(得分:1)

解决方案

如果您的项目完全使用jQuery ,无论出于何种原因,那么您必须使velocity依赖于jquery模块。否则,您将遇到遇到的问题。创建一个名为velocity-glue的模块:

define(['velocity', 'jquery'], function (velocity) {
  return velocity;
});

修改您的配置,使其包含这两个条目。

map: {
  "*": {
    velocity: "velocity-glue",
  },
  "velocity-glue": {
    velocity: "velocity",
  },
}

第一个条目使得velocity-glue在需要velocity时使用。第二个条目确保velocity-glue可以获得原始velocity

解释

我将使用&#34; Velocity&#34;在全球范围内引用该产品:这包括两个模块(velocityvelocity-ui)。

问题是Velocity不是一个好的AMD公民。通过这个,我的意思是它的模块依赖于全局变量并将它们自身导出为全局变量,即使它们是通过AMD加载器加载,这也是AMD模块的不良行为。

Velocity可以在有或没有jQuery的情况下使用。当使用没有jQuery的Velocity时,它使用一种最小的polyfill,它只提供与Velocity需要一样多的jQuery函数。由于Velocity可以在有或没有jQuery的情况下使用,因此当它们调用define时,它的模块在它们的依赖项中列出jQuery,否则,它们将要求你使用jQuery。

无论Velocity是否作为AMD模块加载,它都会自行安装,以便在其中一个属性的Velocity属性上可以访问它们,如果它们是existr:window.jQuery window.Zepto,或window。 Velocity将使用它可以按此处给出的顺序使用的第一个。因此,如果既未安装jQuery也未安装Zepto,则可以window.Velocity访问它。但是如果安装了jQuery,它将作为window.jQuery.Velocity访问。问题是velocityvelocity.ui执行计算选择3个可能的位置独立。让我们考虑一些场景:

情景A:

  1. jquery加载。
  2. velocity安装为window.jQuery.Velocity
  3. velocity.ui查找window.jQuery.Velocity。细。
  4. 情景B:

    [jquery尚未加载。]

    1. velocity安装为window.Velocity
    2. velocity.ui查找window.Velocity。细。
    3. jquery可能会或可能不会在以后加载。这没关系。)

      情景C:

      1. velocity将自身安装为window.Velocity,因为未加载jQuery。
      2. jquery加载。
      3. velocity.ui查找window.jQuery.Velocity,因为window.jQuery确实存在,但window.jQuery.Velocity不存在! 您收到错误
      4. 请注意,在上述方案velocity中,始终velocity.ui之前加载,因为velocity.ui列出velocity作为其依赖关系。但是,jQuery相对于其他两个模块的加载顺序不受限制,因为(如前所述)它们不依赖于jquery

        我在本答案的第一部分中给出的解决方案通过约束加载顺序来解决问题:jquery将始终在两个模块之前加载。