ES6模块化

Posted 2021-08-29 有些东西学不会

ES6模块化

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

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

2. 导入其他模块使用import

3. 向外共享模块成员使用export

基本语法

默认导出：export default 默认导出成员

let n1 = 10
function show(){}
export default {
    n1,
    show
}

注意：默认导出在一个模块中只允许使用一次

默认导入 import 接收名称 from ‘模块’

import m1 from \'./01.js\'
console.log(m1)//{n1:10,show()}

按需导出 export 按需导入的成员

export let s1 = \'aaa\'
export function show (){}

按需导入 import {s1} from \'模块路径\'

import {s1} from \'./03.js\'
console.log(s1)//aaa

注意：按需导出的名称和导入的名称需要一致，eg：上面的s1

可以使用as关键字进行重命名

import {s1 as str1} from \'./03.js\'

直接导入 可以直接执行某个模块中的代码

在一个模块中执行一个for循环

for(let i =1;i < 3;i++){
    console.log(i)    
}

在另一个文件直接import导入即可

import \'./05.js\'

回调地狱

多层回调函数相互嵌套

setTimeout(()=>{
    setTimeout(()=>{
        setTimeout(()=>{
        },3000)
    },2000)
},1000)

代码可读性很差且难以维护

ES6通过Promise解决回调地狱

Promise是一个构造函数，通过构建Promise的实例对象代表一次异步操作

const p = new Promise()

通过.then方法来指定成功或失败的回调函数

p.then(result=>{},error=>{})

一般说只调用成功的回调函数

因为promise函数是异步操作，无法保证函数的执行顺序，可以通过在promise函数中return一个promise方法，使用链式的方法继续调用.then方法保证执行顺序

thenFs.readFile().then((r1)=>{
    return thenFs.readFile()
}).then(()=>{
})

在链式中声明一个catch方法捕获错误

thenFs.readFile().then((r1)=>{
    return thenFs.readFile()
}).then(()=>{
}).catch((err)=>{
    
})

注意：.catch方法在碰到错误后会阻止后续.then方法的执行，比如上述第一个文件读取失败，那么两个then方法都不会调用，解决方法是将.catch方法放到前面去

promise.all()会等所有异步操作执行完毕获取所有的结果才执行成功的回调函数

promise.race()方法只要任何一个异步操作执行完毕就立即执行成功的回调函数(类似赛跑)

封装异步读取文件的方法

import fs from \'fs\'
​
function getFile(fPath){
    //返回一个Proimse构造函数，resolve代表成功，reject代表失败
    return new Promise(function(resolve,reject)){
        //将参数传入并使用回调函数接收结果
         fs.readFile(fPath,\'utf-8\',(err,data)=>{
            if(err) return reject(err)
            resolve(data)
        })
    }
}

async/await

使用async和await简化promise.then的异步操作

import thenFs from \'then-fs\'
async function getAllFile(){
    const a1 = await thenFs.readFile()
    //此时a1指向的不是promise对象，而是.then方法返回的结果
}

注意：async和await必须成对出现

 

 

宏任务和微任务

JS将异步任务分为两类：宏任务和微任务

宏任务：

1. 异步ajax请求

2. setTimeout\\setInterval

3. 文件的读取等操作

4. 其他宏任务

微任务：

1. promise.rhen、catch和.finally

2. process.nextTick

3. 其他微任务

宏任务和微任务是交替执行的，执行完一个宏任务后会执行所有微任务，等微任务执行完毕后再执行下一个宏任务

宏任务和微任务的执行顺序：