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>
需要特别注意，第六行加入的type属性。没有这个，浏览器不认识js中的导入导出命令。
采用这种方式，可以更好地跨文件组织js代码。而且，浏览器会对所有js文件的加载进行优化（异步加载、懒加载等），提升用户体验，避免常见的小问题。
大家可以想想，如何用导入导出，规划前面提到的30个js文件的页面。
