如何从另一个加载一个 JavaScript 文件？答案

【问题标题】：How to load one JavaScript file from another?如何从另一个加载一个 JavaScript 文件？
【发布时间】：2011-08-19 01:38:37
【问题描述】：

如何从另一个 JavaScript 文件（如 CSS）加载一个 JavaScript 文件？在 CSS 中我们使用 @import url("mycss.css");。

有没有办法在 JavaScript 中做到这一点？

【问题讨论】：

Include a JavaScript file in another JavaScript file?的可能重复

标签： javascript

【解决方案1】：

Javascript 中没有 @import-ish 函数/方法，但您可以简单地将脚本附加到 <head> 标记，如下所示：

var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/path/to/js/file';
document.getElementsByTagName('head')[0].appendChild(newScript);

或者像我之前提到的 Edgar 一样，您可以使用 jQuery。

【讨论】：

这是否会加载文件并启动其上写入的所有内容？
因为我很期待写这段代码来加载jQuery
@RajaAnbazhagan 是的，它会启动文件的内容，我实际上已经用它来加载 jQuery，所以我知道它有效。
为什么不改用document.head.appendChild
这是在 IE8 及其同类之前的浏览器不支持 document.head 的黑暗时代发布的。

【解决方案2】：

是的。如果你想使用纯 JavaScript，你必须动态创建一个 script 标记，并将其附加到文档中。

是的。如果使用 jQuery 库，可以使用$.getScript 方法。

$.getScript("another_script.js");

【讨论】：

注意：如果你得到“getScript is not defined”，你可能加载了错误的 jQuery 版本。见[stackoverflow.com/questions/35424053/…jquery 的普通包和slim 包有什么区别？）

【解决方案3】：

只是因为还没有人提到它，所以还有另一种选择，它不需要任何花哨的库或复杂的编码，document.write。原则上，它看起来像这样，但请参阅下面的警告：

document.write('<script src="myscript.js" type="text/javascript"></script>');

这将在完全解析脚本标签后执行，如果您将脚本标签放在头部，新的脚本标签也将在头部，紧跟在被执行的标签之后。注意直接执行它，而不是在文档加载时执行（如在$(function(){}) 回调中。这是我使用的：

(function(){
  function load(script) {
    document.write('<'+'script src="'+script+'" type="text/javascript"><' + '/script>');
  }

  load("script1.js");
  load("script2.js");
  load("etc.js");
})();

封闭函数只是为了不污染全局命名空间。

需要注意的是（以及为什么上面分解的“脚本”）是脚本标记中可能没有结束脚本标记，HTML 解析器不知道它是脚本的一部分。有一个关于该主题的other question。

【讨论】：

【解决方案4】：

除了eval 字符串的能力之外，Javascript 本身不提供任何模块化帮助。但这是一个足够普遍的需求，大多数大型 javascript 框架都提出了自己的解决方案，最近，在requirejs 项目中努力标准化这些 API。如果您使用的是 Dojo 或 jQuery 之类的框架，那么您最好学习使用它们的工具，但如果没有，requirejs 是一个轻量级的独立工具。你基本上只是添加

<script data-main="scripts/main" src="scripts/require.js"></script>

到您的 <head> 部分，然后将您自己的 javascript 放入一些这样的包装代码中（从 require.js 网站窃取）：

require(["helper/util"], function() {
    //This function is called when scripts/helper/util.js is loaded.

    require.ready(function() {
        //This function is called when the page is loaded
        //(the DOMContentLoaded event) and when all required
        //scripts are loaded.

    });
});

【讨论】：

【解决方案5】：

使用const dataName =require('./fileName.js');

【讨论】：

这既缺乏上下文也不起作用。我尝试创建一个模型以查看它是否会按预期运行，但它没有。