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>

需要特别注意，第六行加入的type属性。没有这个，浏览器不认识js中的导入导出命令。

采用这种方式，可以更好地跨文件组织js代码。而且，浏览器会对所有js文件的加载进行优化（异步加载、懒加载等），提升用户体验，避免常见的小问题。

大家可以想想，如何用导入导出，规划前面提到的30个js文件的页面。

结语：

　　js的原生写法，需要程序员顾及的细节太多。有资深程序员戏称：这么写，当页面足够复杂的时候，会死的。所以，另一条解决路线是：使用现成的框架。而使用框架，需要额外的学习成本，也有框架不断更新/弃用的风险。

　　本人觉得，在AI日新月异的今天，编程编码的工作量已经大大降低了。页面要求和复杂度不高的时候，原生写法更有性价比。

posted on 2025-11-15 11:00 万金流阅读(3) 评论(0) 收藏举报