es6中的import导入模块 和 export导出模块

news/2024/7/10 23:13:21 标签: es6, 前端

es6中的import导入模块 和 export导出模块

  • 一、定义
  • 二、使用
    • 1.默认导出导入
    • 2..命名导出导入
    • 3.命名导出(Named Export)与默认导出(Default Export)结合使用
  • 三、总结

一、定义

功能:用于导入和导出模块的内容。
静态加载:import 是静态加载模块的方式,在编译阶段进行检查和解析,使得工具可以进行优化和静态分析。
异步加载:支持异步按需加载模块。
作用域:import 和 export 存在块级作用域,可以灵活地控制变量和函数的可见性。
浏览器支持:需要使用打包工具(如 webpack 或 Rollup)将 ES6 模块转换为浏览器可识别的格式,或者在现代浏览器中使用

二、使用

1.默认导出导入

// 导出一个默认的值或对象
export default myModule;
//或
import myModule from './myModule';

2…命名导出导入

// 导出单个变量、函数或类
export const var1 = "Value 1";
export function func() { /* 函数体 */ }
export class MyClass { /* 类定义 */ }
//或
import { var1, func, MyClass } from './myModule';

3.命名导出(Named Export)与默认导出(Default Export)结合使用

/ 导出默认值及其他变量、函数或类
export default myModule;
export const var1 = "Value 1";
export function func() { /* 函数体 */ }
export class MyClass { /* 类定义 */ }
//或
import myModule, { var1, func, MyClass } from './myModule';
//请注意,导入和导出的模块路径应该根据实际情况指定正确的文件路径。此外,你可以在 import 语句中使用相对路径或绝对路径。

三、总结

总结起来,require 是 CommonJS 模块系统中用于导入模块的关键字,采用同步加载方式;而 import 和 export 是 ES6 模块系统中用于导入和导出模块的关键字,采用静态加载方式,并且支持异步加载。要根据你所使用的环境和模块规范选择合适的关键字和模块系统。


http://www.niftyadmin.cn/n/5212210.html

相关文章

waitnotify

文章目录 代码演示wait() - 阻塞等待notify() - 通知唤醒notifyAll() - 全部唤醒wait 和 sleep 的比较 由于线程之间是 抢占式执行的,因此 线程之间执行的先后顺序难以预知. 但是实际开发中有时候我们希望 合理的协调多个线程之间的执行先后顺序。join()方法也可…

Arduino库之 LedControl 库说明文档

LedControl 库最初是为基于 8 位 AVR 处理器的 Arduino 板编写的。但由于该代码不使用处理器的任何复杂的内部功能,因此具有高度可移植性,并且应该在任何支持 和 功能的 Arduino(类似)板上pinMode()运行digitalWrite() 。 单个 M…

Go语言的学习笔记2——Go语言源文件的结构布局

用一个只有main函数的go文件来简单说一下Go语言的源文件结构布局,主要分为包名、引入的包和具体函数。下边是main.go示例代码: package mainimport "fmt"func main() { fmt.Println("hello, world") }package main就是表明这个文件…

linux 安装yum

问题1:File "/usr/libexec/urlgrabber-ext-down", line 28 except OSError, e: ^ 问题2:yum File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: ^ vim /usr/…

Java反射调用kotlin中的类,Object类,Companion对象

Java反射调用kotlin中的类,Object类,Companion对象 1. Java反射调用kotlin中的普通类 kotlin普通类: package com.common; class TestNormal {fun get():String{return "Nolmal abc"}fun showNum(v:Int){println("Nolmal s…

DGL在异构图上的GraphConv模块

回顾同构图GraphConv模块 首先回顾一下同构图中实现GraphConv的主要思路(以GraphSAGE为例): 在初始化模块首先是获取源节点和目标节点的输入维度,同时获取输出的特征维度。根据SAGE论文提出的三种聚合操作,需要获取所…

通用功能——git 攻略

摘要 本文主要介绍git常用命令的使用方法,同时介绍一些常见问题的处理方法,持续更新中… git命令通用选项 大多数git命令都适用的选项列表如下: -v, --verbose show hash and subject, give twice for upstream branch -q, --quie…

C语言进阶之路-基本数据小怪篇

目录 一、学习目标: 二、数据基本类型 整型 浮点型 / 实型 字符 字符串 布尔型数据 三、重要的杂七杂八知识点 常量与变量 标准输入 sizeof运算符: 类型转换 数据类型的本质 整型数据尺寸 可移植性整型 拿下第一个C语言程序 总结 一、学…