如何在另一个 JavaScript 文件中包含 JavaScript 文件？

在 JavaScript 中是否有类似于@import的内容，允许您在另一个 JavaScript 文件中包含 JavaScript 文件？

答案

旧版本的 JavaScript 没有导入，包含或要求，因此开发了许多不同的方法来解决这个问题。

但自 2015 年（ES6）以来，JavaScript 已经有了ES6 模块标准来导入 Node.js 中的模块，大多数现代浏览器也支持这些模块。

为了与旧版浏览器兼容，可以使用构建和 / 或转换工具。

ES6 模块

自 v8.5 起，Node.js 支持 ECMAScript（ES6）模块，带有--experimental-modules标志。涉及的所有文件必须具有.mjs扩展名。

// module.mjs
export function hello() {
  return "Hello";
}

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

浏览器中的 ECMAScript 模块

自 Safari 10.1，Chrome 61，Firefox 60 和 Edge 16 以来，浏览器已经支持直接加载 ECMAScript 模块（不需要像 Webpack 这样的工具）。检查caniuse的当前支持。

<script type="module">
  import { hello } from './hello.mjs';
  hello('world');
</script>

// hello.mjs
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

欲了解更多信息，请访问： https ： //jakearchibald.com/2017/es-modules-in-browsers/

浏览器中的动态导入

动态导入允许脚本根据需要加载其他脚本：

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

有关详情，请访问： https ： //developers.google.com/web/updates/2017/11/dynamic-import

Node.js 需要

仍然在 Node.js 中广泛使用的旧模式导入模块是module.exports / require系统。

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

JavaScript 还有其他方法可以在不需要预处理的浏览器中包含外部 JavaScript 内容。

AJAX 加载

您可以使用 AJAX 调用加载其他脚本，然后使用eval运行它。这是最简单的方法，但由于 JavaScript 沙箱安全模型，它仅限于您的域。使用eval还可以打开错误，黑客和安全问题的大门。

jQuery 加载

jQuery库在一行中提供加载功能：

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

动态脚本加载

您可以将带有脚本 URL 的脚本标记添加到 HTML 中。为了避免 jQuery 的开销，这是一个理想的解决方案。

该脚本甚至可以驻留在不同的服务器上。此外，浏览器评估代码。 <script>标记可以注入网页<head> ，也可以在结束</body>标记之前插入。

以下是一个如何工作的示例：

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // sake a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

此函数将新的<script>标记添加到页面的 head 部分的末尾，其中src属性设置为作为第一个参数赋予函数的 URL。

这两个解决方案都在JavaScript 疯狂：动态脚本加载中进行了讨论和说明。

检测脚本何时执行

现在，您必须了解一个大问题。这样做意味着您远程加载代码 。现代 Web 浏览器将加载文件并继续执行当前脚本，因为它们异步加载所有内容以提高性能。（这适用于 jQuery 方法和手动动态脚本加载方法。）

这意味着如果你直接使用这些技巧， 在你要求加载后 ， 你将无法在下一行使用新加载的代码 ，因为它仍然会加载。

例如： my_lovely_script.js包含MySuperObject ：

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

然后你重新加载页面击中F5 。它的工作原理！混乱...

那该怎么办呢？

好吧，你可以在我给你的链接中使用作者建议的黑客。总之，对于匆忙的人，他在加载脚本时使用事件来运行回调函数。因此，您可以使用远程库将所有代码放在回调函数中。例如：

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

然后在lambda 函数中加载脚本后编写要使用的代码：

var myPrettyCode = function() {
   // Here, do whatever you want
};

然后你运行所有：

loadScript("my_lovely_script.js", myPrettyCode);

请注意，脚本可以在 DOM 加载之后或之前执行，具体取决于浏览器以及是否包含行script.async = false; 。有一篇关于 Javascript 加载的文章，讨论了这个问题。

源代码合并 / 预处理

正如在本答案的顶部所提到的，许多开发人员在他们的项目中使用像 Parcel，Webpack 或 Babel 这样的构建 / 转换工具，允许他们使用即将推出的 JavaScript 语法，为旧浏览器提供向后兼容性，组合文件，缩小，执行代码拆分等

如果有人想要更高级的东西，请尝试RequireJS 。您将获得额外的好处，例如依赖关系管理，更好的并发性，并避免重复（即，多次检索脚本）。

您可以在 “模块” 中编写 JavaScript 文件，然后在其他脚本中将它们作为依赖项引用。或者您可以将 RequireJS 用作简单的 “go get this script” 解决方案。

例：

将依赖项定义为模块：

一些 - dependency.js

define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.   
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

implementation.js是依赖some-dependency.js 的 “主”JavaScript 文件

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

摘自GitHub自述文件：

RequireJS 加载纯 JavaScript 文件以及更多已定义的模块。它针对浏览器内使用进行了优化，包括在 Web Worker 中，但它可以在其他 JavaScript 环境中使用，如 Rhino 和 Node。它实现了异步模块 API。
RequireJS 使用普通脚本标记来加载模块 / 文件，因此它应该允许轻松调试。它可以简单地用于加载现有的 JavaScript 文件，因此您可以将其添加到现有项目中，而无需重新编写 JavaScript 文件。
...

实际上有一种方法可以非异步加载 JavaScript 文件，因此您可以在加载后立即使用新加载文件中包含的函数，我认为它适用于所有浏览器。

您需要在页面的<head>元素上使用jQuery.append() ，即：

$("head").append('<script type="text/javascript" src="' + script + '"></script>');

但是，此方法也存在一个问题：如果导入的 JavaScript 文件中发生错误， Firebug （以及 Firefox 错误控制台和Chrome 开发人员工具）也会错误地报告其位置，如果您使用 Firebug 跟踪这是一个大问题 JavaScript 错误很多（我这样做）。由于某种原因，Firebug 根本不知道新加载的文件，因此如果该文件中出现错误，它会报告它出现在您的主HTML文件中，并且您将无法找到错误的真正原因。

但如果这对您来说不是问题，那么这种方法应该可行。

我实际上编写了一个名为$ .import_js（）的 jQuery 插件，它使用了这个方法：

(function($)
{
    /*
     * $.import_js() helper (for JavaScript importing within JavaScript code).
     */
    var import_js_imported = [];

    $.extend(true,
    {
        import_js : function(script)
        {
            var found = false;
            for (var i = 0; i < import_js_imported.length; i++)
                if (import_js_imported[i] == script) {
                    found = true;
                    break;
                }

            if (found == false) {
                $("head").append('<script type="text/javascript" src="' + script + '"></script>');
                import_js_imported.push(script);
            }
        }
    });

})(jQuery);

所以你需要做的就是导入 JavaScript：

$.import_js('/path_to_project/scripts/somefunctions.js');

我还在Example 中做了一个简单的测试。

它包含主 HTML 中的main.js文件，然后main.js的脚本使用$.import_js()来导入名为included.js的附加文件，该文件定义了此函数：

function hello()
{
    alert("Hello world!");
}

在包含included.js ，调用hello()函数，然后获得警报。

（这个答案是对 e-satisf' 评论的回应）。