ES6模块化与异步编程学习笔记

一、ES6模块化

1)ES6模块化定义

ES6模块化规范中定义：

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

2)ES6模块化的基本语法

ES6的模块化主要包含以下三种用法：

• 默认导出与默认导入
• 按需导出与按需导入
• 直接导入并执行模块中的代码

1.默认导出:

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

//1_m1.js
let n1 = 10 //定义模块私有成员n1
let n2 = 20 //定义模块私有成员n2（外界访问不到n2，因为它没有被共享出去）
function show(){
   } //定义模块私有方法show

export default{
    //使用export default默认导出语法，向外共享你和show两个对象
    n1,
    show
}

• 每个模块中，只允许使用唯一一次默认导出，否则会报错

默认导入的语法：import 接收名称 from ‘模块标识符’

//从01_m1.js模块中导入export default向外共享的成员
import m1 from './01_m1.js'

console.log(m1) //结果为{ n1: 10,show: [function:show] }

• 接收名称可以任意命名，只要合法就行（按照变量的命名规范，不能数字开头）

2.按需导出与按需导入

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

//03_m2.js
//按需导出s1,s2和say()
export let s1 = 'aaa'
export let s2 = 'ccc'
export function say(){
   }

**按需导入的语法：**import{s1} from ‘模块标识符’

//按需导入，用花括号包裹需要导入的成员
import {
   s1, s2, say} from './03_m2.js'

console.log(s1) //打印输出aa

注意事项：

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

import {
   s1, s2 as str2, say} from './03_m2.js' //把s2重命名为str2

import info, {
   s1, s2, say} from './03_m2.js' //info是默认导出的成员

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

//当前模块为05_m3.js
//在当前模块中执行一个for循环操作
for(let i = 0l i < 3; i++){
   
    console.log(i)
}

//直接导入并执行魔窟啊i代码，不需要得到向外共享的成员
import '05_m3.js'

3)Promise

1.回调地狱

多层回调函数相互嵌套，就形成了回调地狱

//回调地狱示例
setTimeout(() => {
   
    console.log('延迟1秒后输出')
    setTimeout(() => {
   
        console.log('再延迟2秒后输出')
        setTimeout(() => {
   
            console.log('再延迟3秒后输出')
        }, 3000)
    }, 2000)
}, 1000)

缺点：

• 代码耦合性太强，牵一发而动全身，难以维护
• 大量冗余的代码相互嵌套，代码的可读性变差

为了解决回调地狱的问题，ES6中新增了Promise的概念

2.Promise的基本概念

①Promise是一个构造函数

• 我们可以创建Promise的实例 const p = new Promise()
• new出来的Promise实例对象代表一个异步操作

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

• 每一次new Promise()构造函数得到的实例对象都可以通过原型链的方式访问到.then()方法，例如p.then()

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

• p.then(成功的回调函数，失败的回调函数)
• p.then(result =>{}, error => {})
• 调用.then()方法，成功的回调函数是必选的、失败的回调函数是可选的

3.基于then-fs异步读取文件内容

回调地狱写法

//读取文件1
fs.readFile('./files/1.txt','utf-8',(err1,r1) => {