ES6模块化

发表于 更新于 分类于 ， 阅读次数： Waline： 本文字数： 1.9k 阅读时长 ≈ 2 分钟

ES6模块化 与 异步编程高级用法：
E6的模块化语法
使用Promise解决回调地狱的问题
使用 async/await 简化 Promise 的调用
什么是 EventLoop
宏任务 和 微任务 的执行顺序

模块化

  1. node.js中如何实现模块化
    node.js遵循了CommonJS的模块化规范。其中:

    • 导入其它模块使用require()方法
    • 模块对外共享成员使用module.exports对象

  2. 模块化的好处：
    大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。

前端模块化规范的分类

在ES6模块化规范诞生之前，JavaScript 社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。

这几个规范不是官方的模块化标准，而是社区的开发者经过反复的实践与尝试，提出来的规范

但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如:

  • AMD和CMD适用于浏览器端的Javascript模块化
  • CommonJS适用于服务器端的Javascript模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的ES6模块化规范诞生了!

ES6模块化规范

ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义:

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

在node.js中使用ES6模块化

node.js默认支持CommonJS模块化规范，如果要使用ES6模块化语法，需要配置：

  1. 确保安装了v14.15.1或更高版本的node.js
  2. 在package.json的根节点中添加"type":"module"节点

ES6模块化的基本语法

ES6的模块化主要包含如下3种用法:
1. 默认导出与默认导入
2. 按需导出与按需导入
3. 直接导入并执行模块中的代码

  1. 默认导出
    export dufault 默认导出的成员

    1
    2
    3
    4
    5
    6
    7
    8
    let n1 = 10
    let n2 = 20
    function show(){}

    export default {
      n1,
      show
    }

    注意事项：只允许默认导出一次(使用唯一的一次export default)

  2. 默认导入
    import 接收名称 from '模块标识符'

    1
    2
    import m1 from './1.默认导出.js'
    console.log(m1); //{ n1: 10, show: [Function: show] }

    注意事项：接收名称可以是任意名称，只要是合法的成员名称即可(只能以字符_$开头，不能以数字)

  3. 按需导出
    export 按需导出的成员

    1
    2
    3
    4
    5
    6
    7
    export let s1 = 'aaa'
    export let s2 = 'ccc'
    export function say(){}

    export default {
      a: 20
    }

    注意事项：可以使用多次，可以和默认导出一起使用。

  4. 按需导入
    import {s1} from '模块标识符'
    导入多个模块成员
    import {s1,s2,s3} from '模块标识符'

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import info, {s1, s2 as str2, say} from './3.按需导出.js'

    console.log(s1); // aaa
    // console.log(s2); // 报错，未定义
    console.log(str2); // ccc
    console.log(say);// [Function: say]

    // info 接收的默认导出的对象
    console.log(info); // { a:20 }

    注意事项：

    1. 按需导入的成员名称必须和按需导出的名称保持一致
    2. 按需导入时，可以使用 as关键字 进行重命名
    3. 按需导入可以和默认导入一起使用

  5. 直接导入并执行模块中的代码
    如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    // 05.js
    for (let i = 0; i < 3; i++) {
      console.log(i);  
    }

    // test.js
    import './5.直接运行模块中的代码.js'
    // node testjs 结果 --  0 1 2