前言:
后面将学习: Vue3+ElementPlus
前置知识:前端三件套 HTML,CSS,JS
使用Vscode
本篇学习
这里先补充一个JavaScript的模块化的知识点 - 导入导出
JS提供的导入导出机制,可以实现按需导入.
我们之前是这样导入的
showMessage.js
//简单的展示信息
function simpleMessage(msg){console.log(msg)
}
//复杂的展示信息
function complexMessage(msg){console.log(new Date()+": "+msg)
}
message.html
<body><div><button id="btn">点我展示信息</button></div><!-- 导入showMessage.js文件的全部内容 --><script>document.getElementById("btn").onclick = function(){complexMessage("bbbbb")}</script>
</body>
我们会把js文件中所有的内容全部都导入进来,但是我们却不是使用全部,这样会造成一些性能上的损失,我们接下来要实现使用什么就导入什么.
showMessage.js 用export关键字
//简单的展示信息
export function simpleMessage(msg){console.log(msg)
}
//复杂的展示信息
export function complexMessage(msg){console.log(new Date()+": "+msg)
}
message.html 用import关键字进行导入
<body><div><button id="btn">点我展示信息</button></div><!-- 导入showMessage.js文件的全部内容 --><script type="module">import {complexMessage} from './showMessage.jsdocument.getElementById("btn").onclick = function(){complexMessage("bbbbb")}</script>
</body>
VScode 中下载live server 插件解决跨域问题,测试这个代码:
我们可以简化统一导出:
//批量导出
export {complexMessage,simpleMessage}
还可以对complexMessage起别名.导入导出都可以取
<body><div><button id="btn">点我展示信息</button></div><!-- 导入showMessage.js文件的全部内容 --><script type="module">import {complexMessage as cm} from './showMessage.jsdocument.getElementById("btn").onclick = function(){cm("bbbbb")}</script>
</body>
//批量导出
export {complexMessage as cm,simpleMessage as sm}
但是要记住如果给导出起别名那导入的时候名字也要跟着改
import {cm} from './showMessage.js
还可以更加简化: 默认导出
//批量导出
export default { complexMessage, simpleMessage }
<script type="module">import messageMethods from './showMessage.js'messageMethods.simpleMessage("aaa")messageMethods.complexMessage("bbb")</script>
