js导入导出

时间：2024-11-20 18:17:52

前言:

后面将学习: 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.js
		document.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.js
		document.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>

相关文章