ES6的模块化导入导出

最新推荐文章于 2025-02-28 00:02:23 发布

听风知秋雨

最新推荐文章于 2025-02-28 00:02:23 发布

阅读量246

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/lishuwen7986/article/details/112342056

版权

点击进入我的个人博客

ES6的模块化导入导出

export导出的变量/常量，在import导入的时候需要知道导出时候的名称（必须指定）
export default导出的变量/常量，在import导入的时候不需要指定导出时候的名称（可以自定义），但是一个js文件中只能存在一个default

aaa.js文件：

导出数据

var flag = true

function sum(num1,num2){
    return num1 + num2;
}

// 1.导出方式一（一次性导出多个）
export {
    flag, sum
}

// 2.导出方式二（一次导出单个）
// 2.1导出变量
export var num = 1000

// 2.2导出函数
export function mul(num1,num2){
    return num1 + num2;
}

// 2.3导出类
export class Person {
    run() {
        console.log("person")
    }
}

// 3.导出方式三（导出default，注意：一个js文件中只有一个default）
//export default var test = "default测试" （这样写是错误的，去掉default是可以的）

var test = "default测试"
export default test

bbb.js文件：

导入数据

// 1.导入的{}中定义的变量
import {flag,sum} from './aaa.js';
if (flag) {
    console.log('输出')
    console.log(sum(20,30))
}

// 2.直接导入export定义的变量
import {num} from './aaa.js';
console.log(num)

// 3.导入export的function
import {mul} from './aaa.js';
console.log(mul(10,10))

// 4.导入export的class
import {Person} from './aaa.js';
new Person().run()

// 5.导入export的default（可以自己指定命名）
import c from './aaa.js';
console.log(c)

ccc.html文件：

使用js文件

<!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>
    <script src="./bbb.js" type="module"></script>  
</body>
</html>

可以看到ccc.html文件中正常输出：