JavaScript--导入导出-CSDN博客

本文链接：https://blog.csdn.net/2301_79218497/article/details/136942745

本文介绍了JavaScript的导入导出机制，用于实现模块化。通过示例展示了如何使用`export`导出单个或多个方法，以及如何使用`import`按需导入。此外，还讲解了别名的使用和默认导出的概念，帮助理解和优化代码组织。

摘要由CSDN通过智能技术生成

前置：

HTML：负责网页的结构

CSS：负责网页的表现

JavaScript：负责网页的行为（交互效果）

为适应vue3的运行，JS推出了一个模块化的知识点，也就是JS的导入导出，为了方便理解，给出一下例子：

showMessage.js

//简单的展示信息
function simpleMessage(msg){
    console.log(msg)
    alert(msg)
}
//复杂的展示信息
function complexMessage(msg){
    console.log(new Date()+": "+msg)
    alert(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>Document</title>
</head>
<body>
    <div>
        <button id="btn">点击我显示复杂信息</button><br/>
        <button id="btn1">点击我显示简单信息</button>
    </div>
    <script src="showMessage.js"></script>
    <script>
        document.getElementById("btn").onclick = function(){
            complexMessage(56462131);
        }
        document.getElementById("btn1").onclick = function(){
            simpleMessage(3216513);
        }
    </script>
</body>
</html>

说明：在js文件中写了两个方法，然后再html中利用<script src="showMessage.js"></script>标签引入，引入的是js文件中所有的方法，然后设置两个按钮，通过id，设置点击事件，引入js文件中的方法，并使用。

现在的js文件中的内容比较少，如果多的时候，再一口气引入所有的内容，就显得有点笨拙了，因此我们可以引入需要使用的，如下所示：

showMessage.js

//简单的展示信息
export function simpleMessage(msg){
    console.log(msg)
    alert(msg)
}
//复杂的展示信息
export function complexMessage(msg){
    console.log(new Date()+": "+msg)
    alert(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>Document</title>
</head>
<body>
    <div>
        <button id="btn">点击我显示复杂信息</button><br/>
        <button id="btn1">点击我显示简单信息</button>
    </div>
    <script type="module">
        import {complexMessage,simpleMessage} from './showMessage.js'
        document.getElementById("btn").onclick = function(){
            complexMessage(56462131);
        }
        document.getElementById("btn1").onclick = function(){
            simpleMessage(3216513);
        }
    </script>
</body>
</html>

说明：首先需要再showMessage.js中将每个方法前面加上export进行导出，然后在message.html中利用import {complexMessage,simpleMessage} from './showMessage.js'，进行导入，注意要想这行代码启用，需要给<script>标签加上 type='module' 的属性。

当然，如果js文件中的方法多了，每一个都要写一个export这样又显得有点麻烦，可以在js文件中添加一行export {simpleMessage,complexMessage}，这样在每一个方法前面就不需要添加export了，其他的照常写。

同时，还可以给每个方法名添加别名，这样使用的时候就直接用别名就好，比如export {simpleMessage as sm,complexMessage as cm}，这样在导入的时候也就写成import {sm,cm} from './showMessage.js'，当然，别名哪怕是在import中使用也是可以的。

还有一种导入导出写法，比如下面的例子：

showMessage.js

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

export default {simpleMessage,complexMessage}

message.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="btn">点击我显示复杂信息</button><br/>
        <button id="btn1">点击我显示简单信息</button>
    </div>
    <script type="module">
        import flakjd from './showMessage.js'
        document.getElementById("btn").onclick = function(){
            flakjd.complexMessage(56462131);
        }
        document.getElementById("btn1").onclick = function(){
            flakjd.simpleMessage(3216513);
        }
    </script>
</body>
</html>

说明：在js文件中写入一行export default {simpleMessage,complexMessage}，代表默认导出，意思就是zaihtml页面中引入js文件中的方法，要是太多的时候不容易记住，那么就可以使用这行代码，那么在导入的时候就可以这样写import flakjd from './showMessage.js'，这样不仅可以不加‘{}’，还可以随便命名，而在使用的时候只需要用引入的命名调用即可例如：

document.getElementById("btn1").onclick = function(){
flakjd.simpleMessage(3216513);
}