ES6 import / export / export default type=module

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.mzph.cn/news/819687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云服务器带宽多少钱?公网带宽收费标准全解析

阿里云服务器的公网带宽计费模式分为“按固定带宽”和“按使用流量”&#xff0c;有什么区别&#xff1f;按固定带宽是指直接购买多少M带宽&#xff0c;比如1M、5M、10M、100M等&#xff0c;阿里云直接分配用户所购买的带宽值&#xff0c;根据带宽大小先付费再使用&#xff1b;…

ADC通道检测功能-单片机通用模板

ADC通道检测功能-单片机通用模板 使用ADC外设的流程&#xff1a; 先初始化ADC外设的时钟&#xff1b;选择ADC的参考电压以及需要采集的通道&#xff1b;ADSOC1 开始转换&#xff0c;死循环等待转换完成ADSOC0&#xff1b;从ADCDH、ADCDL数据寄存器取出ADC转换数值&#xff1b;…

一套3种风格经典的wordpress免费主题模板

wordpress免费企业主题 https://www.wpniu.com/themes/39.html 免费wordpress企业模板 https://www.wpniu.com/themes/43.html 免费wordpress企业主题 https://www.wpniu.com/themes/44.html

波奇学Linux:ip协议

ip报头是c语言的结构体 报头和有效载荷如何分离&#xff1f; 固定长度四位首部长度 4位版本号就是IPV4 8位服务类型&#xff1a;4位TOS位段和位保留字段 4位TOS分别表示&#xff1a;最小延时&#xff0c;最大吞吐量&#xff0c;最高可靠性&#xff0c;最小成本 给路由器提…

【JAVA基础篇教学】第十六篇:Java连接和操作MySQL数据库

博主打算从0-1讲解下java基础教学&#xff0c;今天教学第十六篇&#xff1a;Java连接和操作MySQL数据库。 我将提供一个简单的示例代码&#xff0c;涵盖数据库连接、查询、插入和更新等操作。 一、下载MySQL驱动包 1.下载地址&#xff1a;MySQL :: Download Connector/J 2.解…

Navicat for MySQL 使用基础与 SQL 语言的DDL

一、目的&#xff1a; Navicat for MySQL 是一套专为 MySQL 设计的高性能数据库管理及开发 工具。它可以用于任何版本 3.21 或以上的 MySQL 数据库服务器&#xff0c;并支持大 部份 MySQL 最新版本的功能&#xff0c;包括触发器、存储过程、函数、事件、视图、 管理用户等。…

VMware配置CentOS 7 并实现ssh连接

Vmware 17下载地址 ***永久许可证&#xff1a;***5Y012-8HL8P-0J8U0-032Q6-93KKF CentOS 7 下载地址 一、配置CentOS 如下 创建新的虚拟机&#xff0c;选择典型&#xff0c;点击下一步 选择上述下载镜像存储位置&#xff0c;选择镜像&#xff0c;点击下一步 3.填写相关信息…

动态规划专练( 279.完全平方数)

279.完全平方数 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而 …

微信小程序wx.getLocation 真机调试不出现隐私弹窗

在小程序的开发过程中&#xff0c;首页中包含要获取用户地理位置的功能&#xff0c;所以在这里的onLoad&#xff08;&#xff09;中调用了wx.getLocation()&#xff0c;模拟调试时一切正常&#xff0c;但到了真机环境中就隐私框就不再弹出&#xff0c;并且出现了报错&#xff0…

智能生活新体验:小米香薰加湿器技术解码

在现代家居生活中&#xff0c;科技与舒适性日益交织&#xff0c;智能家居产品成为提升生活品质的重要工具。小米香薰加湿器作为一款集科技与生活美学于一体的产品&#xff0c;其独特的设计和多功能性受到了广泛欢迎。今天&#xff0c;我们就来详细拆解这款融合了科技与香薰元素…

Sony Camera Remote SDK在Windows上的使用

Sony官方提供了相机遥控软件开发包&#xff0c;允许用户自行开发应用软件&#xff0c;实现对相机的远程控制&#xff0c;包括拍摄、监看和文件传输等。截至目前最新的版本是2024.4.12发布的1.12.00版本&#xff0c;下载链接如下&#xff1a;Camera Remote SDK | LICENSE AGREEM…

初学python记录:力扣706. 设计哈希映射

题目&#xff1a; 不使用任何内建的哈希表库设计一个哈希映射&#xff08;HashMap&#xff09;。 实现 MyHashMap 类&#xff1a; MyHashMap() 用空映射初始化对象void put(int key, int value) 向 HashMap 插入一个键值对 (key, value) 。如果 key 已经存在于映射中&#x…

SpringCloud之LoadBalancer自定义负载均衡算法,基于nacos权重

LoadBalancer基于Nacos权重自定义负载算法 ReactorLoadBalancer接口&#xff0c;实现自定义负载算法需要实现该接口&#xff0c;并实现choose逻辑&#xff0c;选取对应的节点 public interface ReactorLoadBalancer<T> extends ReactiveLoadBalancer<T> {Mono<…

VMware Workstation部署最新版OpenWrt 23.05.3

正文共&#xff1a;1456 字 51 图&#xff0c;预估阅读时间&#xff1a;2 分钟 我们之前介绍了如何在VMware Workstation上安装OpenWrt&#xff08;软路由是啥&#xff1f;OpenWrt又是啥&#xff1f;长啥样&#xff1f;在VMware装一个瞅瞅&#xff09;&#xff0c;也介绍了如何…

【计算机毕业设计】物流管理系统设计与实现——后附源码

&#x1f389;**欢迎来到琛哥的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 琛哥&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 琛哥在深度学习任务中展现出卓越的能力&a…

ubuntu16.04安装Eclipse C/C++

1.安装 JDK 官网源码安装 首先打开JDK官网&#xff0c;JDK1.8的下载网址为&#xff1a;https://www.oracle.com/cn/java/technologies/downloads/#java8-windows&#xff0c;进入到网址如下图所示&#xff1a; 向下滑动到 JDK1.8的下载界面&#xff0c;如下图所示&#xff1a…

3_2Linux中内核级加强型火墙的管理

### 一.Selinux的功能 ### 观察现象 ①当Selinux未开启时 在/mnt中建立文件被移动到/var/ftp下可以被vsftpd服务访问 匿名用户可以通过设置后上传文件 当使用ls -Z /var/ftp查看文件时显示"?" ps auxZ | grep vsftpd 时显示&#xff1a; - root 8546 0.0 0.0 26952 …

四.音视频编辑-音频混合-概述

引言 当我们在前两篇博客中成功地构建了一个媒体组合&#xff0c;并且略过了音频部分时&#xff0c;我们意识到了我们需要对这个项目进行更详细的探讨。在本篇博客中&#xff0c;我们将会展示如何创建一个包含视频轨道、配音音频轨道以及背景音频轨道的完整媒体组合。更进一步…

【GDAL-Python】1-在Python中使用GDAL读写栅格文件

文章目录 1-概要2.代码实现 1-概要 提示&#xff1a;本教程介绍如何使用 Python 中的 GDAL 库将栅格数据读取为数组并将数组另存为GeoTiff 文件 视频地址&#xff1a;B站对应教程 目标&#xff1a; &#xff08;1&#xff09;读写GeoTiff影像&#xff1b; &#xff08;2&…

centos 9 安装mysql 到系统指定目录

在CentOS 9上安装MySQL并将其安装到系统指定目录的步骤如下&#xff1a; 首先&#xff0c;确认已经正确配置了CentOS 9的网络连接。 打开终端并使用root用户登录。 添加MySQL Yum存储库。执行以下命令&#xff1a; dnf install -y https://dev.mysql.com/get/mysql80-communi…