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

前端开发-前置知识

news 2025/7/5 8:04:54

1.JavaScript-导入导出。

JS提供的导入导出机制，可以实现按需导入。

（1）按需导入

showMessage.js：

//简单的展示信息
export function simpleMessage(msg){console.log(msg)
}//复杂的展示信息
export function complexMessage(msg){console.log(new Date()+": "+msg)
}

message.html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js导入导出</title>
</head><body><div id="app"><button id="btn">点我展示信息</button></div><script type="module">import {complexMessage} from  './showMessage.js';document.getElementById("btn").onclick=function(){complexMessage('我被点击了...');}</script>z</body></html>

运行结果：

（2）批量导出

showMessage.js：

//简单的展示信息
/* export */ function simpleMessage(msg){console.log(msg)
}//复杂的展示信息
/* export */ function complexMessage(msg){console.log(new Date()+": "+msg)
}export {complexMessage,simpleMessage}

导入和导出的时候,可以使用 as 重命名：

import {complexMessage as cm} from  './showMessage.js';

（3）默认的导出方式

//默认导出
export default{complexMessage,simpleMessage}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js导入导出</title>
</head><body><div id="app"><button id="btn">点我展示信息</button></div><script type="module">// import {complexMessage as cm} from  './showMessage.js';import messageMethods from  './showMessage.js';document.getElementById("btn").onclick=function(){messageMethods.complexMessage('我被点击了...');}</script>z</body></html>

查看全文

http://www.dtcms.com/a/266473.html