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

es6中的import导入模块 和 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 模块系统中用于导入和导出模块的关键字，采用静态加载方式，并且支持异步加载。要根据你所使用的环境和模块规范选择合适的关键字和模块系统。

ES6模块化（默认导入导出、按需导入导出、直接导入）

一、介绍ES6模块化

    ES6 模块化规范是浏览器端与服务器端通用的模块化规范，ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。

 二、ES6 模块化规范中定义：

1.每个 js 文件都是一个独立的模块
2.导入其它模块成员使用 import 关键字
3.向外共享模块成员使用 export 关键字

三、默认导入导出

默认导出语法：export   default  默认导出的成员

默认导入语法：import 接收名  from  ‘模块的路径’

注意：

每个模块中，只能有一次的 export default，不然就会报错。

导入的语法的接收名自己取合法合理就行。

四、按需导入导出 

按需导出语法：  export   需要按需导出的成员 

按需导入语法：

基础语法：import   {按需导入的名称}  from ‘模块的路径’

导入多个：import   {按需导入的名称1,按需导入的名称2.....}  from  '模块路径'

起别名：import {按需导入的名称  as  自己起个别名}  from  ‘模块路径’

批量导入：import * as  起的别名  from ‘模块路径'

 注意： 

1.每个模块可以多次按需导出

2.按需导出没有default

3.按需导入的成员名必须与按需导出的名称保持一致

4.当不同的组件导出的模块名相同，我们想在同一个文件中导入可以给其中一个起别名来进行区分和避免冲突   使用 as 关键字进行起别名（import   导出的名  from  起的别名  ”路径“）

5.使用批量导出 一定要as起别名 否则没法用

 总结：

1.按需导入导出可以一起使用

2.当文件中只导出一个成员的时候 通常使用默认导出（不强迫）

3.当文件中只导出多个成员的时候 通常使用按需导出（不强迫）

五、直接导入

不需要谁去用，直接就像执行某模块中的代码可以直接导入

import ”路径“

注意：没有名字，没有form 导入直接调用了

到此这篇关于es6中的import导入模块 和 export导出模块的文章就介绍到这了,更多相关es6 导入导出模块内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！