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

问题描述

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

但是从 2015 年(ES6)开始,JavaScript 已经有了ES6 模块标准来在 Node.Js 中导入模块,大多数现代浏览器支持

为了与旧浏览器兼容性,这样的构建工具的WebPack汇总和/或transpilation工具,如巴贝尔都可以使用

ES6 模块

自 8.5 版以来,Node.Js支持ECMAScript (ES6) 模块,带有--experimental-modules标志,至少从 Node.Js v13.8.0 起不带标志。为了使“ESM”(对Node.Js的以往Commonjs的风格模块系统[“CJs”])你要么使用"type": "module"package.Json或给文件的扩展名.mJs。(同样,.cJs如果您的认值为 ESM,则可以命名使用 Node.Js 以前的 CJs 模块编写的模块。)

使用package.Json

{
    "type": "module"
}

然后module.Js

export function hello() {
  return "Hello";
}

然后main.Js

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

使用.mJs,您将拥有module.mJs

export function hello() {
  return "Hello";
}

然后main.mJs

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

浏览器中的 ECMAScript 模块

Safari 10.1、Chrome 61、firefox 60 和 Edge 16 开始,浏览器已经支持直接加载 ECMAScript 模块(不需要像 Webpack 这样的工具)。在caniuse检查当前支持。不需要使用 Node.Js.mJs扩展;浏览器完全忽略模块/脚本上的文件扩展名。

<script type="module">
  import { hello } from './hello.mJs'; // Or it Could be simply `hello.Js`
  hello('world');
</script>
// hello.mJs -- or it Could be simply `hello.Js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

浏览器中的动态导入

动态导入让脚本根据需要加载其他脚本

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

Node.Js 需要

在 Node.Js 中仍然广泛使用的较旧的 CJs 模块样式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也为错误、黑客和安全问题打开了大门。

获取加载

像动态导入一样,您可以通过fetch调用使用 Promise 来加载一个或多个脚本,以使用Fetch Inject库控制脚本依赖项的执行顺序:

fetchInject([
  'https://cdn.Jsdelivr.net/momentJs/2.17.1/moment.min.Js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

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");  // create 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 Madness: Dynamic Script Loading 中进行了讨论和说明。

检测脚本何时执行

现在,有一个你必须知道的大问题。这样做意味着您远程加载代码。现代 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。它有效!令人困惑…

好吧,您可以使用作者在我给您的链接中建议的 Hack。综上所述,对于赶时间的人来说,他使用一个事件,在脚本加载时运行一个回调函数。所以你可以把所有使用远程库的代码放在回调函数中。例如:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    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;.

代码合并/预处理

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

解决方法

JavaScript 中有没有类似于@importCSS 的东西,允许你在另一个 JavaScript 文件中包含一个 JavaScript 文件?

支付解锁全部内容

限时5折
¥9.9 ¥19.9

编程问答相关问答

前言:我知道与此主题相关的类似问题,并且尝试了无...
每当我运行基本的deploy命令时,一切都将重新部署到...
在将变量复制到文件时遇到问题。 我运行多个命令和s...