ES6 模块

ES6 模块学习记录

ES6(ECMAScript 2015)模块是JavaScript官方的标准模块系统。它允许开发者以模块化的方式编写代码,模块可以在不同的文件之间进行组织和重用。

基本特征

默认导出(Default Exports):每个模块可以有一个默认导出。
命名导出(Named Exports):除了默认导出,模块还可以有多个命名导出。
导入(Imports):可以导入其他模块的导出内容。
静态结构:ES6模块的结构是静态的,这意味着导入和导出的绑定是在编译时确定的,而不是在运行时。

export 与 import

模块导入导出各种类型的变量,如字符串,数值,函数,类。

导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。
不仅能导出声明还能导出引用(例如函数)。
export 命令可以出现在模块的任何位置,但必需处于模块顶层。
import 命令会提升到整个模块的头部,首先执行。

export 导出


// 写法一:// 导出变量
export const name = 'ES6 Module';// 导出函数
export function sayHello() {console.log('Hello!');
}// 导出类
export class MyClass {constructor() {console.log('MyClass instance created');}
}// 写法二let myName = "Tom";
let myAge = 20;
let myfn = function(){return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {static a = "yeah!";
}
export { myName, myAge, myfn, myClass }

as 的用法(重新定义导出的接口名称,隐藏模块内部的变量)

export 命令导出的接口名称,须和模块内部的变量有一一对应关系。
导入的变量名,须和导出的接口名称相同,即顺序可以不一致。
用于不同模块导出接口名称命名重复, 便可以使用 as 重新定义变量名

方法一
/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom方法二
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry**exportimport 结合使用**/* ------- 特点 1 --------*/
// 普通改名
export { foo as bar } from "methods";
// 将 foo 转导成 default
export { foo as default } from "methods";
// 将 default 转导成 foo
export { default as foo } from "methods";/* ------- 特点 2 --------*/
export * from "methods";

import导入(import 是静态执行,所以不能使用表达式和变量)


// 导入命名导出
import { name, sayHello } from './myModule.js';// 导入所有并重命名
import * as myModule from './myModule.js';

export default 命令

  1. 在一个文件或模块中,export、import 可以有多个,export default 仅有一个
  2. export default 中的default 是对应的导出接口变量。
  3. 通过 export 方式导出,在导入时要加{ }, export default 则不需要
  4. export default 向外暴露的成员,可以使用任意变量来接收。
//导出默认函数
// myModule.js
export default function myFunction() {// ...
}import myFunction from './myModule.js';//导出默认类
// MyClass.js
export default class MyClass {// ...
}
import MyClass from './MyClass.js';//导出默认对象
// myObject.js
export default {key: 'value'
};
import myObject from './myObject.js';

结合使用 export 和 export default

import myFunction, { myValue, myOtherValue } from './myModule.js';

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46651.shtml

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

相关文章

PHP MySQL 读取数据

PHP MySQL 读取数据 PHP和MySQL是Web开发中的经典组合,广泛用于创建动态网站和应用程序。在PHP中读取MySQL数据库中的数据是一项基本技能,涉及到连接数据库、执行查询以及处理结果集。本文将详细介绍如何使用PHP从MySQL数据库中读取数据。 1. 环境准备…

基于python的京东VR眼镜口碑情感分析,包括lda和情感分析

第1章 绪论 1.1选题背景 在当今科技发展迅速的时代,虚拟现实(VR)技术作为一种前沿的数字体验方式受到越来越多人的关注。京东作为中国领先的电商平台,推出的VR眼镜备受消费者关注。通过对京东VR眼镜口碑进行情感分析&#xff0c…

Pycharm 报错 Environment location directory is not empty 解

删除项目中ven文件夹(已存在的),然后再添加新的ven虚拟环境就可以了

如何用手机压缩视频?手机压缩视频方法来了

高清视频的大文件大小常常成为分享和存储的障碍,尤其是在数据流量有限或存储空间紧张的情况下。幸运的是,无论是智能手机还是个人电脑,都有多种方法可以帮助我们轻松压缩视频文件,以适应不同的需求和情境。本文将介绍如何在手机上…

R语言学习笔记9-数据过滤-分组-融合

R语言学习笔记9-数据过滤-分组-融合 数据过滤基础数据过滤条件筛选数据使用dplyr包进行数据操作select 函数filter 函数subset函数 数据分组使用split()进行数据分组使用dplyr包进行数据分组使用data.table包进行数据分组 数据融合使用merge()进行数据融合使用dplyr包进行数据融…

格式工厂转换视频分辨率

1、下载和安装 http://www.pcfreetime.com/formatfactory/CN/index.html 2、打开视频 3、设置分辨率等参数 也可以选择保持原分辨率 4、执行导出 5、打开输出所在位置

CCF-CSP认证考试 202406-2 矩阵重塑(其二) 100分题解

更多 CSP 认证考试题目题解可以前往:CSP-CCF 认证考试真题题解 原题链接: 202406-2 矩阵重塑(其二) 时间限制: 1.0 秒 空间限制: 512 MiB 题目背景 矩阵转置操作是将矩阵的行和列交换的过程。在转置过程…

前端开发之盒子模型

目录 盒子分类 display属性 盒子内部结构特征 padding填充区 border边框区 margin外边距 盒子width和height边界 盒子分类 块级盒子(又叫块级元素、块级标签) 特征:独占一行,对宽度高度支持 如:p div ul li h1…

完整且详细的Yolov8复现+训练自己的数据集

Yolov8 的源代码下载:ultralytics/ultralytics: NEW - YOLOv8 🚀 in PyTorch > ONNX > CoreML > TFLite (github.com)https://github.com/ultralytics/ultralytics Yolov8的权重下载:Releases ultralytics/assets GitHubUltralyt…

Java 反射机制:概念、用途与示例

个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119qq.com] &#x1f4f1…

Go语言并发编程-案例_3

案例 并发目录大小统计 业务逻辑 统计目录的文件数量和大小(或其他信息)。示例输出: // 某个目录:2637 files 1149.87 MB 实现思路 给定一个或多个目录,并发的统计每个目录的size,最后累加到一起。 当…

Spring纯注解开发

前言 Spring3.0引入了纯注解开发的模式,框架的诞生是为了简化开发,那注解开发就是简化再简化。Spring的特性在整合MyBatis方面体现的淋漓尽致哦 一.注解开发 以前跟老韩学习SE时他就说:注解本质是一个继承了Annotation 的特殊接口,其具体实…

智慧农业新纪元:解锁新质生产力,加速产业数字化转型

粮食安全乃国家之根本,“浙江作为农业强省、粮食生产重要省份,在维护国家粮食安全大局中肩负着重大使命。浙江粮食产业经济年总产值已突破4800亿元,稳居全国前列,然而,同样面临着规模大而不强、质量效益有待提升、数字…

C语言 ——— 打印水仙花数

目录 何为水仙花数 题目要求 代码实现 何为水仙花数 “水仙花数”是指一个n位数,其各位数字的n次方之和等于该数本身 如:153 1^3 5^3 3^3,则153就是一个“水仙花数” 题目要求 求出0~100000的所有“水仙花数”并输出 代码实现 #i…

深入探索 SQL 中的 LIKE 右模糊匹配(LIKE RIGHT)与左模糊匹配(LIKE LEFT)

引言 在数据库操作中,LIKE 子句是执行模糊搜索的强大工具,用于匹配列中的数据与指定的模式。本文将详细介绍 LIKE 子句中的两种常用模式:右模糊匹配(LIKE RIGHT)和左模糊匹配(LIKE LEFT)&#…

python实现自动更新prometheus规则

由于公司需要监控目标类型较多,不能手动去改动prometheus规则然后reload,所以就通过python写了个程序自动更新prometheus配置 基本环境准备 python 3.10.10flask 2.3.2prometheus 2.52.0 基本流程 将接口传来的prometheus规则信息保存到数据表中取数…

人工智能算法工程师(高级)课程1-单类目标识别之人脸检测识别技术MTCNN模型介绍与代码详解

大家好,我是微学AI,今天给大家介绍一下人工智能算法工程师(高级)课程1-单类目标识别之人脸检测识别技术MTCNN模型介绍与代码详解。本文深入探讨了基于PyTorch的人脸检测与识别技术,详细介绍了MTCNN模型、Siamese network以及center loss、sof…

11、实现基于共享内存的二叉树set

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github:codetoys,所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的,可以在任何平台上使用。 实现数组肯定不是我们的目标&a…

从数据库查询数据 写入Excel 写出JAVA代码

以下是一个示例代码,演示了如何从数据库中查询数据,然后将数据写入到Excel文件中: import java.io.FileOutputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import org.apache.poi.ss.user…

PostgreSQL创建表和自增序列

一、创建表: 注意: 1、在mysql没有序列的概念,id自增通过auto_increment实现; 2、pgsql没有auto_increment的概念,如何实现id自增?有两种方式: 方式一:创建序列,绑定…