ES6 模块化

2024-01-10 11:50:16

ES6 模块化

  • nodeJs 如何将文件里面的成员向外暴露

    • module.exports

    • exports

  • nodeJs 导入模块

    • require() 用户自定义模块需要加路径

  • 什么是es6模块化规范

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

  • es6 模块化规范的定义

    • 每一个js文件都是一个独立的模块

    • 向外共享成员使用 export

    • 导入成员使用 import

在 node.js 中体验 ES6 模块化

  • 确保安装了 v14.15.1 或更高版本的 node.js

  • 在 package.json 的根节点中添加 "type": "module" 节点

ES6 模块化语法

  • 默认导出与默认导入

  • 按需导出与按需导入

  • 直接导入并执行模块中的代码

默认导出与默认导入

  • 默认导出语句：export default 需要导出的成员

    const n1 = 10
const n2 = 20
​
const show = () => {
  console.log('hello')
}
​
export default {
  n1,
  show
}

  • 默认导入语法：import 接收的名字 from '需要导入模块的路径'

    import m1 from './1.默认导出.js'
console.log(m1)

  • 默认导出与默认导入的注意事项

    • 每个模块中，只允许使用唯一的一次 export default，否则会报错！

    • 默认导入时的接收名称可以任意名称，只要是合法的成员名称即可

按需导入与按需导出

  • 按需导出的语法

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

      export const n1 = 10
​
export const n2 = 20

  • 按需导入的语法：

    • 按需导入的语法： import { m1 } from '模块标识符'

      import { n1 } from './3.按需导出.js'
​
console.log(n1)

  • 按需导入与按需导出的注意事项：

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

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

    3. 按需导入时，可以使用 as 关键字进行重命名

    4. 按需导入可以和默认导入一起使用

直接导入并执行模块中的代码

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

es6 模块化语法小结

  • 默认导入与默认导出

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

    • 默认导入语法: import 要接受的名称 from '模块标识符'

  • 按需导入与按需导出：

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

    • 按需导入语法: import {要接受成员的名称} from '模块标识符'

  • 直接导入

    • 直接导入的语法：import '要直接导入的模块'

回调地狱

什么是回调地狱：多层回调函数的相互嵌套，就形成了回调地狱

  • 如何解决回调地狱？

    • 使用promise来解决回调地狱的问题

promise的基本概念

  1. promise是一个构造函数，就可以通过 new Promise() 得到promise实例对象

  2. Promise.prototype 上包含一个 .then() 方法 实例化对象可以访问then方法

  3. then() 方法用来预先指定成功和失败的回调函数

promise的基本用法

const p1 = new Promise((resolve,reject) => {
    // 成功的时候 可以调用 resolve()方法 
    // 失败的时候 可以调用 reject()方法
})
const fs = require('fs')
const path = require('path')
​
const p1 = new Promise((resolve,reject) => {
    fs.readFile(文件的路径,'utf8',(err,data) => {
        // err 是一个对象 就表示读取失败 
        // err 是 null 就表示读取成功
        if (err) return reject(err.message)
        resolve(data)
    })
})
​
p1.then(res => console.log(res), err => console.log(err))
​

.then() 方法的特性

  • 如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个 .then() 继续进行处理。通 过 .then() 方法的链式调用，就解决了回调地狱的问题。

通过 .catch 捕获错误

  • 在 Promise 的链式操作中如果发生了错误，可以使用 Promise.prototype.catch 方法进行捕获和处理

Promise.all() 方法

Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）

Promise.race() 方法

Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的 .then 操作（赛跑机制）

async 与 await (重点 必用)

async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在 async/await 出 现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作

  • 语法

    async function fn() {
   const r1 = await Promise对象
}
​
const fn = async () => {
    const r1 = await Promise对象
}

  • 注意事件

    • await关键字后面要跟 Promise对象

    • await关键字仅仅只能出来在被async修饰的函数里面

    • 在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行

EventLoop

进行任务队列的监听，如果在任务列表中有任务需要执行，就会依次执行

  1. js是单一线程，会造成线程死锁，同步会阻塞后面代码的执行

  2. js将非耗时任务在主线程来执行，耗时任务就让委托给宿主环境来执行

  3. 宿主环境有：浏览器 nodejs

  4. 如果在主线程中有异步操作，就会将异步操作委托给宿主环境来执行，宿主环境中执行完异步操作之后，会将回调函数添加到任务队列中，主线程如果执行完所有非耗时任务，就会自动的扫描任务队列中是否有任务需要执行，如果有，就会依次执行

上一篇：promise学习---异常穿透


下一篇：理解Promise