当前位置：首页 > news >正文

js中函数的导入导出

news 2026/3/27 4:33:55

js中函数的导入导出

js中的函数导入导出，是近几年才有官方标准的，即ES6标准。

以前的民间规范CommonJS，这里不做讨论。推荐使用官方标准。

背景

设想有这么个页面结构：

一个页面h1.html要使用五项业务功能，分别写在26.js，27.js……30.js中；

而每个业务功能，又分别使用五个js文件的基础功能，分别在1-25这二十五个js文件里。

那么最终的网页文件，头部难道要包含30个js文件吗？即便如此做，还会有效率和加载时机等问题给我们添乱。

解决技术

js的导入/导出语法，配合文件规划，可以解决这个问题。

导出：把文件中的某些函数（也可以是全局变量），声明为可以被外界访问。关键字：export

导入：从外部文件中，引入需要的功能（变量）来使用。关键字：import

页面中的导入：在script标签中，除了文件名，添加 type="module" 属性，来识别和使用导入的js文件。

示例

在页面h1.html中，设置三个文本框和一个命令按钮。前两个文本框填入数字，点击按钮，在第三个文本框出现它们的和。

分析规划：1、把求和函数add作为功能函数，写在j1.js中。2、写一个衔接文件h1.js（此处设计为与页面同名，方便维护），调用j1等等功能文件的内容。3、网页引入h1.js。

参考代码如下

j1.js：

1 export function add(a, b) {
2   return a + b;
3 }

第一行表示该函数可以被外部调用。

h1.js：

 1 import {add} from "./j1.js";
 2 //import * as myall from "./j1.js";
 3 function b1_click() {
 4     let a, b;
 5     a = Number(document.querySelector("#i1").value);
 6     b = Number(document.querySelector("#i2").value);
 7     document.querySelector("#i3").value =add(a, b);
 8     //document.querySelector("#i3").value =myall.add(a, b);
 9 }
10 document.querySelector("#b1").addEventListener("click", b1_click);

第一行引入j1.js中的add函数，第七行使用了它。

如果需要使用功能js文件中多个函数，可以在第一行的花括号中一一列出（逗号分隔）；也可以用第二行的方式给它们起个名字，用第八行的方式调用。

第三行的函数b1_click是给页面里面的命令按钮(id='b1')用的，这么命名好维护；第十行将两者关联。

h1.html：

 1 <html>
 2     <head>
 3         <title>
 4             页面
 5         </title>
 6         <script type="module" src="js/h1.js"></script>
 7     </head>
 8     <body>
 9         <input type="text" id="i1">
10         <input type="text" id="i2">
11         <input type="text" id="i3">
12         <input type="button" id="b1" value="计算">
13     </body>
14 </html>