在本地的JavaScript在引入ES6 Modules 2015之前, 没有导入, 包含或要求功能。在此之前, 我们可以使用DOM中的脚本标签将一个JavaScript文件加载到另一个JavaScript文件中, 该脚本将立即下载并执行。
现在, 在发明了ES6模块之后, 已经开发出了许多解决此问题的不同方法, 下面将进行讨论。
ES6模块:
自v8.5起, Node.js中已支持ECMAScript(ES6)模块。在此模块中, 我们在一个文件中定义导出的函数, 并在另一个示例中将其导入。
有两种从另一函数调用JavaScript文件的常用方法, 下面列出了这些方法:
- Ajax技术
- 连接文件
Ajax技术示例:
外部JavaScript文件名为" main.js"
//This alert will export in the main file
alert( "Hello Geeks" )
主文件:
该文件将导入上面的" main.js"文件
<!DOCTYPE html>
<html>
<head>
<title>
Calling JavaScript file from
another JavaScript file
</title>
<script type= "text/javascript">
var script = document.createElement( 'script' );
script.src =
"https://media.lsbin.org/wp-content/uploads/20190704153043/main.js" ;
document.head.appendChild(script)
</script>
</head>
<body>
</body>
</html>
输出如下:
串联文件示例:在这里, 将多个JavaScript文件导入到单个JavaScript文件中, 然后从函数中调用该主JavaScript文件。
外部JavaScript文件名为" main.js"
//This alert will export in the main file
alert( "Hello Geeks" )
外部JavaScript文件" second.js"
//This alert will export in the main file
alert( "Welcome to lsbin" )
外部JavaScript文件" master.js"
function include(file) {
var script = document.createElement( 'script' );
script.src = file;
script.type = 'text/javascript' ;
script.defer = true ;
document.getElementsByTagName( 'head' ).item(0).appendChild(script);
}
/* Include Many js files */
include( 'https://media.lsbin.org/wp-content/uploads/20190704153043/main.js' );
include( 'https://media.lsbin.org/wp-content/uploads/20190704162640/second.js' );
主文件:
该文件将导入上面的" master.js"文件
<!DOCTYPE html>
<html>
<head>
<title>
Calling JavaScript file from
another JavaScript file
</title>
<script type= "text/javascript"
src= "https://media.lsbin.org/wp-content/uploads/20190704162730/master.js">
</script>
</head>
<body>
</body>
</html>
输出如下:
main.js文件导入:
second.js文件导入: