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

在引入 ES6 模块之前,JavaScript 没有 import、require 或者其他功能。
2014 年,引入了 ES6 模块模块,现在可以在现代浏览器支持的 Node.js 中导入模块。

动态脚本加载

完美的解决方案是将带有脚本 URL 的脚本标记添加到 HTML 中。
<script> 标签可以添加到 <head> 或者结束 </body> 标签之前,以避免 jQuery 的开销。

function dynamicallyLoadScript(url) {
  let loadScript = document.createElement("script"); //创建脚本 DOM 节点
  loadScript.src = url; //将其 src 设置为提供的 URL
  document.head.appendChild(loadScript);
}

AJAX 加载

可以使用 AJAX 调用和 eval 函数加载脚本。
尽管这是最直接的方法,但由于 JavaScript 沙箱安全模型,它仅限于域。

Eval 可能会导致错误和其他安全问题。

ES6 模块

Node.js v13.8.0 支持没有任何标志的 ECMAScript (ES6) 模块。
但是,包含的所有文件都必须具有 .js 扩展名:

//module.js
export function welcome() {
  return "Welcome";
}
//main.js
import {
  welcome
} from './module.js';
let value = welcome(); //val is "Welcome";

Node.js 需要

在 Node.js 中仍然使用 module.exports/require 系统旧的导入模块的方法。

//mymodule.js
module.exports = {
  welcome: function () {
    return "Welcome";
  }
}
//server.js
const myModule = require('./mymodule');
let val = myModule.welcome(); //值是 "Welcome"

存在一些不需要处理的其他方式。

jQuery 加载

使用 jQuery 加载只需一行即可完成:

.getScript("script.js", function () {
  alert("脚本已加载但不一定执行.");
});
日期:2020-06-02 22:16:21 来源:oir作者:oir