jquery - 如何从另一个 JavaScript 文件加载一个 JavaScript 文件，然后作为单个原子操作运行一些代码

Question

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

长版本:

我有一个 JavaScript 代码文件，我希望能够将其添加到一般网页，而无需在这些页面上强加任何特定条件，除了它们必须包含 <script> 标记来加载我的文件之外。

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

为了尝试实现这一目标，我将 onload/onreadystatechange 处理程序添加到动态插入的 <script> 元素中。这基本上是有效的，但是问题是，如果底层页面有任何等待页面准备好的内容(即 $.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 相当大(并且仅使用必要的功能重新构建它仍然会导致一个相当大的文件)。

Answer 1

您包含一个覆盖某些全局脚本(即jQuery/$)。这通常被认为是非常草率的，您正在体验其中的原因。

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

更复杂的解决方案可以通过适当的依赖注入(inject)来完成某些操作，但这对于您的用例来说可能太复杂了。

<小时/>

凌乱:

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

注入(inject)依赖:

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();
  }
});

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