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>