ES6模块化

倔强的甜薯

已于 2023-11-04 16:34:03 修改

阅读量1.4k

点赞数 1

文章标签： es6 javascript 前端

于 2023-03-15 11:28:49 首次发布

本文链接：https://blog.csdn.net/qq_43721287/article/details/129463589

版权

1、模块化规范

1.1、ES6 模块化

属于ECMAscript规范

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

导入其它模块成员使用 import 关键字

向外共享模块成员使用 export 关键字

1.2、node模块化

支持commonJs模块化规范

导入其它模块成员使用 require

向外共享模块成员使用 exports或者module.exports

2、在node.js中使用es6模块化规范

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

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

3、ES6 模块化的基本语法

默认导出与默认导入
exportdefault { }  //导出
importm1from'./01.默认导出.js'   //导入
按需导出与按需导入
exportlets1='aaa'
exportlets2='ccc'
exportfunctionsay() {}
exportdefault { a:10 }
importinfo, { s1, s2asstr2, say } from'./03.按需导出.js'

export和export default的区别

export后面跟的是一个声明的表达式或者函数，可以使用多次

export default后面跟的是一个值（对象或者数组），只能使用一次

两者指向不一样

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

for (leti=0; i<3; i++) {
  console.log(i)
}
import'./05.直接运行模块中的代码.js'

每个模块中可以使用多次按需导出，只能使用一次默认导出

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

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

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

二、Promise

1、回调地狱

想让异步按顺序执行，所以进行嵌套，从而造成了回调地狱

回调地狱耦合性强，不利于维护

多层回调函数相互嵌套会造成回调地狱，promise用来解决回调地狱

2、Promise概述

Promise 是一个构造函数

Promise.prototype 上包含一个 .then() 方法

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

3、在node.js中想要基于 Promise 的方式读取文件需要导入then-fs包

4、.then()

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

5、.catch()

使用 Promise.prototype.catch 方法进行捕获和处理错误

6、Promise.all()方法

等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）

importthenFsfrom'then-fs'

constpromiseArr= [
  thenFs.readFile('./files/3.txt', 'utf8'),
  thenFs.readFile('./files/2.txt', 'utf8'),
  thenFs.readFile('./files/1.txt', 'utf8'),
]
Promise.all(promiseArr).then(result=> {
  console.log(result)
})

7、Promise.race()

只要任何一个异步操作完成，就立即执行下一步的.then 操作（赛跑机制）

Promise.race(promiseArr).then(result=> {
  console.log(result)
})

8、promise原理

import fs from 'fs'
function resolveFile(path) {
  const p = new Promise(function (resolve, reject) {
    fs.readFile(path, 'utf8', function (err, dataStr) {
      if (err) return reject(err.message);
      resolve(dataStr);
    })   
  })
   return p;
}

// 调用
resolveFile('./files/1.txt').then(res=> {
  console.log(res);
  return resolveFile('./files/2.txt')
}).then(res=> {
  console.log(res);
}).catch(err=> {
  console.log(err);
})

三、async / await

如果在 function 中使用了 await，则 function 必须被 async 修饰

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

importthenFsfrom'then-fs'

console.log('A')
asyncfunctiongetAllFile() {
  console.log('B')
  constr1=awaitthenFs.readFile('./files/1.txt', 'utf8')
  console.log(r1)
  constr2=awaitthenFs.readFile('./files/2.txt', 'utf8')
  console.log(r2)
  constr3=awaitthenFs.readFile('./files/3.txt', 'utf8')
  console.log(r3)
  console.log('D')
}

getAllFile()
console.log('C')

四、EventLoop

1、同步任务

非耗时任务，前一个任务执行完毕才执行下一个任务

同步任务由 JavaScript 主线程次序执行

2、异步任务

耗时任务，委托给宿主环境执行

已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行

JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行

3、同步和异步任务的执行过程

在JavaScript的主线程中，依次执行，看到同步任务直接执行，如果遇到异步任务，就委托给宿主环境去执行，主线程接着执行下面的同步任务，宿主环境将异步任务执行完毕之后，将异步任务的回调函数放到任务队列中等待主线程读取执行，在宿主环境中的异步任务是同时执行的，谁执行的快就将它的回调函数放到任务队列等待主线程读取执行。

4、回调函数