单个导出
这个是一个单独的js文件，通过export关键字将该方法进行导出
//简单的展示信息
export function simpleMessage(msg){
console.log(msg)
}
//复杂的展示信息
export function complexMessage(msg){
console.log(new Date()+": "+msg)
}在html中按需引入
<body>
<div id="app">
<button id="btn">点我展示信息</button>
</div>
<script type="module">
import {complexMessage} from './showMessage.js';
document.getElementById('btn').onclick = function(){
complexMessage('我被点击了')
}
</script>
</body>批量导入
通过一个花括号进行批量导出。导出的时候可以进行去别名
//简单的展示信息
function simpleMessage(msg){
console.log(msg)
}
//复杂的展示信息
function complexMessage(msg){
console.log(new Date()+": "+msg)
}
// 批量导出
export {complexMessage,simpleMessage}再在html中去引入，通过去别名的方式进行引入
<body>
<div id="app">
<button id="btn">点我展示信息</button>
</div>
<script type="module">
import {complexMessage as cm} from './showMessage.js';
document.getElementById('btn').onclick = function(){
cm('我被点击了')
}
</script>
</body>默认导出
//简单的展示信息
function simpleMessage(msg){
console.log(msg)
}
//复杂的展示信息
function complexMessage(msg){
console.log(new Date()+": "+msg)
}
// 默认导出
export default {complexMessage,simpleMessage}
默认导出的内容 from前面可以不用加花括号
<body>
<div id="app">
<button id="btn">点我展示信息</button>
</div>
<script type="module">
import messageMethods from './showMessage.js';
document.getElementById('btn').onclick = function(){
messageMethods.complexMessage('我还是被点击了...')
}
</script>
</body>