ES6 import / export / export default type=module

server/2024/10/18 14:18:17/

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默认导出模块,就不需要,具体两者之间的区别,可以百度查询。


http://www.ppmy.cn/server/7486.html

相关文章

npm install 太慢?解决方法

npm install 太慢的问题可能有多种原因&#xff0c;包括网络问题、npm源的问题以及电脑硬件性能等。以下是一些常见的解决方法&#xff1a; 更换npm源&#xff1a;默认的npm源可能位于国外&#xff0c;这可能导致下载速度较慢。你可以更换为国内的npm源&#xff0c;例如淘宝npm…

论坛报名 | 中关村论坛“区块链与隐私计算论坛”报名开始!

2024中关村论坛—区块链与隐私计算论坛 正在报名&#xff01; 长安链开源社区作为区块链与隐私计算分论坛协同支持社区&#xff0c;为社区成员单位提供免费参会名额&#xff0c;名额有限先到先得&#xff0c;欢迎积极报名&#xff01; 论坛时间&#xff1a;2024年4月27日&…

Java-JavaDoc

Java源码文档说明的标准格式通常遵循JavaDoc的规范&#xff0c;以下是一个基本的示例&#xff1a; /*** 这是一个Java类的文档说明** ClassName MyJavaClass* Description 这是一个示例Java类&#xff0c;用于演示JavaDoc的注释格式* Author 张三 <zhangsanexample.com>…

npm常用命令详解(一)

npm&#xff08;Node Package Manager&#xff09;是Node.js的包管理器&#xff0c;它允许你安装、共享和管理Node.js代码库。以下是一些常用的npm命令及其详解&#xff0c;以帮助您更好地理解和使用它。 1. npm install 功能&#xff1a;安装Node.js包。 语法&#xff1a;n…

使用 hiredis 客户端库封装一个简单的 Redis 类

目录 思考一下redis编程的整个过程。 我们作为redis客户端。需要跟redis服务器交互。 封装 Redis 的 C 类的过程可以分为以下几个步骤&#xff1a; 一个完成发布订阅功能的 Redis 类 思考一下redis编程的整个过程。 我们作为redis客户端。需要跟redis服务器交互。 那说白了…

Oracle第一章

01-事物 事务性操作 增删改 非事物性操作 查 特点 一致性和原子性 确保数据的步骤安全 隔离性 多个用户对同一个数据进行事物操作 需要先来后到 begin开启事务(oracle默认开启) rollback 回滚数据 commit 数据提交 02-什么是 ORACLE 2-1 什么是 ORACLE ORACLE 数据库系…

微服务分布式缓存:无法反序列化 Cannot deserialize;

问题描述 在拆分SpringBoot项目搭建微服务的过程中&#xff0c;需要配置分布式缓存&#xff0c;对redis进行配置&#xff0c;配置完成后&#xff0c;在启动Knife4j文档界面时报错&#xff0c;发现是redis无法反序列化的问题&#xff0c;但是报错中所指出的类com.jhin.jhinoj.m…

MySQL修改数据表的结构

创建数据库 -- create database 创建的数据库名; create database test; 这里创建了一个名为 test 的数据库 选择需要使用的数据库 -- use 数据库名; use test; 这里使用 test 数据库 创建数据表 -- create table 表名(字段名1 数据类型(长度) 约束,字段名2 数据类型(长…