JavaScript中是否有类似于CSS中的@import
的东西,允许您在另一个JavaScript文件中包含一个JavaScript文件?
最佳答案
JavaScript的旧版本没有导入,包含或要求,因此已经开发了许多解决此问题的方法。
但是从2015年(ES6)开始,JavaScript有了ES6 modules标准,可以在Node.js中导入模块,most modern browsers也支持该标准。
为了与旧版浏览器兼容,可以使用Webpack和Rollup之类的构建工具和/或Babel之类的编译工具。
ES6模块
自v8.5起,ECMAScript(ES6)模块已成为supported in Node.js,带有--experimental-modules
标志,并且至少从Node.js v13.8.0起没有该标志。要启用“ESM”(相对于Node.js先前的CommonJS样式的模块系统[“CJS”]),您可以在"type": "module"
中使用package.json
或为文件提供扩展名.mjs
。 (类似地,如果您的默认值是ESM,则用Node.js先前的CJS模块编写的模块可以命名为.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模块
浏览器已经支持直接加载ECMAScript模块(不需要Webpack之类的工具)since Safari 10.1,Chrome 61,Firefox 60和Edge16。请在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);
}
在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要求
module.exports
/ require
系统是仍在Node.js中广泛使用的较旧的CJS模块样式。// 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
还打开了漏洞,黑客和安全问题的大门。获取加载
与Dynamic Imports一样,您可以使用Fetch Inject库通过promises来控制一个脚本依赖项的执行顺序,从而通过
fetch
调用加载一个或多个脚本: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库提供了加载功能in one line:
$.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>
标记,其中src
属性设置为作为第一个参数提供给该函数的URL。这两种解决方案都在JavaScript Madness: Dynamic Script Loading中进行了讨论和说明。
检测何时执行脚本
现在,您必须知道一个大问题。这样做意味着您需要远程加载代码。现代网络浏览器将加载文件并继续执行您当前的脚本,因为它们异步加载所有内容以提高性能。 (这适用于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.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 function中之后,编写要使用的代码:
var myPrettyCode = function() {
// Here, do whatever you want
};
然后,您运行所有这些:
loadScript("my_lovely_script.js", myPrettyCode);
请注意,脚本可能在加载DOM之后或之前执行,具体取决于浏览器以及是否包括
script.async = false;
行。有一个great article on Javascript loading in general讨论了这一点。源代码合并/预处理
正如此答案顶部所提到的,许多开发人员在其项目中使用了诸如Parcel,Webpack或Babel之类的构建/编译工具,从而允许他们使用即将到来的JavaScript语法,为较旧的浏览器提供向后兼容性,合并文件,最小化,执行代码拆分等
关于javascript - 如何在另一个JavaScript文件中包含一个JavaScript文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63320203/