ES6 import / export / export default type=module

豆约翰

已于 2024-04-12 15:00:56 修改

阅读量390

点赞数 4

分类专栏：前端相关文章标签： es6 javascript 前端

于 2024-04-12 14:08:47 首次发布

本文链接：https://blog.csdn.net/douyh/article/details/137678928

版权

前端相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.export可以导出多个变量，函数，变量，函数需要一个一个导出，也可以以对象的方式导出{};
2.import的时候，也需要加{}，且变量名，函数名需要和导出的一样。
3.export default 只能导出一个对象，且不加{}，导入的时候对象名字可以和导出的名字不同，也不加{}

index.js:

export const sayHello = () => {
    console.log("Hello")
}

index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <script type="module">
        import {sayHello} from "./index.js"
        sayHello()
    </script>
</body>
</html>

1.首先创建一个父类Father.js，使用export default默认导出。

 class Father {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    work() {
        console.log('fater in the hard work');
    }
}
export default Father;

2.在html的script中的使用，script默认写js代码，或者使用src引入js文件，默认不能使用module形式，但是script标签上加上type=module属性，就可以写导入模块。

<script type="module">
     import  Father  from './father.js';
     let father = new Father('父亲', 28);
     father.work(); 
</script>

3.浏览器打开html页面，F12查看控制台输出：

4.使用export，导出一个Mother类。

export class Mother {
    constructor(name,age){
       this.name = name;
       this.age = age; 
    }
    // see 是原型对象上的属性
    see(){
        console.log(`mother name is ${this.name}、age ${this.age}，mother Looking at the distance`);
    }
}

在script中，使用export导出的模块，需要使用大括号{}

import { Mother } from './mother.js';
let mother = new Mother('母亲', 27);
mother.see();

但是使用export default默认导出模块，就不需要，具体两者之间的区别，可以百度查询。

豆约翰

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ES6 import / export / export default type=module

【代码】ES6 import / export / export default type=module。
复制链接

扫一扫

专栏目录