使用带有 jQ​​uery“未定义”的 Javascript 加载器

Question

我正在使用 Javascript 加载器 [ requireJS ]，它与内容并行加载脚本 - 但是，我有一个问题。即

require('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');

通常 - 作为“备份” - 我使用过

<script type="text/javascript">
  if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/scripts/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
  }
</script>

但是，当使用 java 脚本加载器时 - 这将始终呈现 jQuery“未定义” - 因为 JS 和内容是并行加载的。

效果基本上是您正在加载 jQuery 2x - 即通过 javascript 加载器加载 1x，通过“jquery == undefined”加载 1x。

如何使“备份”与 javascript 加载器一起工作？

Answer 1

据我所知，requirejs 通常是这样使用的：

require(['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'],
    function() {
        // Code that depends on jQuery here.
    }
);

依赖于 jQuery 的函数只有在 jQuery 加载时才会被调用。但如果 jQuery 无法加载，依赖它的代码将永远不会被执行。

由于您想在这种情况下尝试使用本地 jQuery，因此您可能应该捕获脚本加载超时错误并尝试从其他源加载 jQuery。 （但请注意，超时错误的速度很慢。）

docs 中有关错误处理的信息很少:

要检测错误，您可以重写 require.onError() 来获取错误。如果是超时问题，传递给 onerror 函数的错误对象将包含两个属性：

• requireType：值将为“超时”
• requireModules：超时的模块名称/URL 数组。

我认为，代码可能如下所示（未经测试）：

var functionThatDependsOnJquery = function() {
    // Code that depends on jQuery here.
};

require.onError = function(err) {
    # If we have Google jQuery load timeout...
    if (err.requireType = "timeout" &&
        err.requireModules.indexOf('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js') != -1
        ) {
        # ...we'll try to load it from another source.
        require(['/scripts/localJquery'], functionThatDependsOnJquery);
    }
    # We have another script load timeout, so we just throw an error
    # as requirejs normally does.
    else { throw err; }
};

# Try to load Google jQuery.
require(['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'],
    functionThatDependsOnJquery);