1

简短版：“如何#include在 JavaScript 中合成语句？”

长版：

我有一个 JavaScript 代码文件，我希望能够将其添加到一般网页中，而不会对这些页面施加任何特定条件，而不仅仅是它们必须包含 <script> 标记来加载我的文件。

我的文件包含依赖 jQuery 的代码，因此我需要从我的文件中加载 jQuery。我通过在 DOM 中插入一个 <script> 标签来做到这一点。问题是我需要在加载 jQuery 时立即运行一些代码，这样我才能确保，如果页面已经加载了旧版本的 jQuery，它不会被我新加载的 jQuery 覆盖（即我我参考$然后调用jQuery.noConflict(true);）。

为了尝试实现这一点，我向动态插入的 <script> 元素添加了一个 onload/onreadystatechange 处理程序。这基本上是可行的，但问题是如果底层页面有任何等待页面准备就绪（即$.ready(...)），则此代码会在 <script> 元素本身的处理程序之前运行，因此当该代码与我一起运行时，事情会中断新加载的 jQuery 版本，而不是页面加载和代码预期的原始版本。

  var script = document.createElement("script");
  script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
  script.type = "text/javascript";
  script.onload = script.onreadystatechange = function() {
    if (this.readyState && this.readyState != "loaded" &&
      this.readyState != "complete")
      return;
    var $ = jQuery;
    jQuery.noConflict(true);
    do_my_stuff($);
  }
  document.getElementsByTagName("body")[0].appendChild(script);

请注意，我无法控制从中调用我的代码的网页，因此“使页面加载正确版本的 jQuery”不是解决方案。此外，简单地将 jQuery 内联到我的代码文件中并不是一个很好的解决方案，因为 jQuery 相当大（并且仅使用必要的功能重新构建它仍然会导致文件相当大）。

4

3 回答 3

0

您正在包含一个覆盖某些全局（即jQuery/ $）的脚本。这通常被认为非常草率，您正在经历原因。

一个简单的解决方案是修改您的 jQuery 以使用另一个命名空间，例如$my_version_of_jquery. IE。避免名称冲突。

一个更复杂的解决方案会通过适当的依赖注入来做一些事情，但这对于您的用例来说可能太复杂了。

乱：

var my_framework = {};
my_function () {
    my_framework.some_function();
}

依赖注入：

manager.add_dependency("my_framework", function () {
    return {};
});
manager.run_with_dependencies(
  [ "my_framework", "some_other_dependency" ], // list of dependencies
  function my_function(my_framework, some_other_dependency) { // instances of dependencies
      my_framework.some_function();
  }
});

如果这是您想要的，这将允许您加载同一框架的两个版本。

于 2013-03-07T16:48:51.893 回答
0

在研究了如何jQuery.getScript()工作之后，看起来最好的解决方案是XMLHTTPRequest将所需的脚本加载到一个字符串中，然后简单地加载eval()它。

于 2013-03-11T19:31:18.913 回答
0

如果我正确理解了您的问题，您需要满足以下条件：

  • 确保在执行您自己的 JavaScript 代码之前加载 jQuery
  • 由于您只需要一个脚本依赖项，因此必须异步加载 jQuery
  • 如果已经加载了某个版本的 jQuery，请不要覆盖全局引用

最简单的解决方案是运行初始测试以查看全局 jQuery 对象是否存在于全局范围内：

if ( !window.jQuery ) {
    // jQuery isn't there, so load your jQuery version asynchronously
} else {
    // jQuery is already there, so use the existing version
}

要使您现有的解决方案正常工作，您需要使用不同的全局参考。因此，var $ = jQuery您将使用var $myJq = jQuery.noConflict(). 注意：传递 true将从全局范围中删除任何现有的 jQuery 引用。

加载两个单独的版本并不是非常有效，所以如果可以的话，我建议使用上面的条件来决定要做什么。但是，如果版本对您自己的代码很重要，那么第二个解决方案应该可以正常工作。

于 2013-03-11T21:40:24.307 回答