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

2021年4月12日11:05:06 发表评论 986 次浏览

在本地的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文件?1

串联文件示例:在这里, 将多个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文件导入:

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

second.js文件导入:

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

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: