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

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

一、定义

功能:用于导入和导出模块的内容。

静态加载:import 是静态加载模块的方式,在编译阶段进行检查和解析,使得工具可以进行优化和静态分析。

异步加载:支持异步按需加载模块。

作用域:import 和 export 存在块级作用域,可以灵活地控制变量和函数的可见性。

浏览器支持:需要使用打包工具(如 webpack 或 Rollup)将 ES6 模块转换为浏览器可识别的格式,或者在现代浏览器中使用

二、使用

1.默认导出导入

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

2...命名导出导入

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

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

javascript 复制代码
/ 导出默认值及其他变量、函数或类
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 模块系统中用于导入和导出模块的关键字,采用静态加载方式,并且支持异步加载。要根据你所使用的环境和模块规范选择合适的关键字和模块系统。

相关推荐
福兮说1 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理2 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6663 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)3 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan3 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_4 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒4 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技4 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu5 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
默_笙6 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript