JavaScript中是否有类似于CSS中的@import的东西允许您在另一个JavaScript文件中包含一个JavaScript文件？
最佳答案
旧版本的JavaScript没有导入、包含或要求，因此开发了许多不同的方法来解决这个问题。
但自2015年（ES6）以来，JavaScript已经有了在Node.js中导入模块的ES6 modules标准，而most modern browsers也支持这个标准。
为了与旧浏览器兼容，可以使用build和/或transpilation工具。
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模块
浏览器支持直接加载ECMAScript模块（不需要Webpack之类的工具）sinceSafari 10.1、Chrome 61、Firefox 60和Edge 16。检查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还可以打开漏洞、黑客和安全问题的大门。取货装载
与动态导入类似，您可以使用
fetch调用加载一个或多个脚本，使用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>标记之前插入。下面是这样一个例子：
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)
}
此函数将在页面的head部分的末尾添加一个新的
</body>标记，其中<script>属性设置为作为第一个参数提供给函数的URL。在in one line中讨论并说明了这两种解决方案。
检测脚本何时执行
现在，你必须知道一个大问题。这样做意味着您可以远程加载代码。现代web浏览器将加载文件并继续执行当前脚本，因为它们会异步加载所有内容以提高性能。（这适用于jQuery方法和手动动态脚本加载方法。）
这意味着，如果直接使用这些技巧，则在要求加载新加载的代码后的下一行将无法使用它，因为它仍在加载。
例如：
src包含my_lovely_script.js：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.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);
}
然后在aJavaScript Madness: Dynamic Script Loading中加载脚本后编写要使用的代码：
var myPrettyCode = function() {
// Here, do whatever you want
};
然后你运行所有这些：
loadScript("my_lovely_script.js", myPrettyCode);
请注意，该脚本可能在加载DOM之后或之前执行，具体取决于浏览器以及是否包含
MySuperObject行。这里有一个lambda function讨论这个问题。源代码合并/预处理
正如在这个答案的顶部所提到的，许多开发人员在他们的项目中使用构建/反编译工具（如package、Webpack或Babel），允许他们使用即将到来的JavaScript语法，为旧浏览器提供向后兼容性，合并文件，缩小，执行代码拆分等。
关于javascript - 如何在另一个JavaScript文件中包含一个JavaScript文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47743190/