ES6模块化

最新推荐文章于 2024-03-16 21:15:05 发布

Hst1120

最新推荐文章于 2024-03-16 21:15:05 发布

阅读量219

点赞数

分类专栏： es6模块化文章标签：前端 es6

本文链接：https://blog.csdn.net/Hst1120/article/details/122590639

版权

es6模块化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

node.js遵循了CommonJS的模块化规范

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

模块化的好处
大家都遵守同样的模块化规范写代码，降低沟通成本，极大方便了各模块之间的相互调用
前端模块化分类
在ES6模块化规范诞生之前，javascript社区提出了AMD,CMD,CommonJS等模块化规范
AMD,CMD值适用于浏览器的javaScript模块化
CommonJS适用于服务器的javaScript模块化
太多模块化规范增加了开发成本，因此，ES6模块化出现了

什么是ES6模块化规范
是浏览器与服务器通用的模块化规范

es6模块化规范中定义：

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

在node.js中体验es6模块化
node.js中，默认支持CommonJS模块化规范，若想基于node.js体验式学习es6模块化语法，可以按照如下两个步骤进行配置：

确保电脑已经安装v14.15.1或更高版本的node.js
在package.json的根节点中添加“type”:“module”节点

ES6模块化的基本语法

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

默认导出

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

//定义模块私有成员
let n1 = 10
//定义模块私有成员（外界访问不到 因为没有被共享出）
let n2 = 20
//定义模块私有方法 show
function show(){}
//使用export defalt默认导出语法，向外共享n1和show两个成员
export defalt{
	n1,
	show
}

默认导入

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

注意事项：

在每个模块中，只允许使用唯一的一次export default，否则会报错
默认的导入时的接收名称可以任意名称，只要是合法的成员名称即可

按需导出

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

//当前模块为03_m2.js
//向外按需导出变量s1
export let s1 = 'aaa'
//向外按需导出变量s2
export let s2 = 'bbb'
//向外按需导出方法say
export function say(){}

按需导入

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

import{s1,s2,say} from './03_m2.js'
console.log(s1)
console.log(s2)
console.log(say)

注意事项：

每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用as关键字进行重命名例如：s2 as str2
按需导入可以和默认导入一起使用

直接导入并执行模块中的代码，并不需要得到模块中向外共享的成员
此时，可以直接导入并执行模块代码

Promise

回调地狱
多层回调函数相互嵌套，就形成了回调低于
回调地狱特点：

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

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

Promise基本概念

Promise是一个构造函数

我们可以创建Promise的实例 const p = new Promise（）
new出来的Promise实例对象，代表一个异步操作
Promise.prototype上包含一个.then()方法
每一次new Promise()构造函数得到的实例对象，
度可以通过原型链的方式访问到.then()方法，例如p.then()

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

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

then-fs的基本使用
调用then-fs一共的readFile(）方法，可以比不读取文件内容，他的返回值是Promise的实例对象，因此可以调用.then()方法为每个Promise异步操作只能发成功和失败的回调函数

import  thenFs from 'then-fs'
thenFs.readFile('./files/1.txt','utf8').then((r1) =>{console.log(r1)})
thenFs.readFile('./files/2.txt','utf8').then((r2) =>{console.log(r2)})
thenFs.readFile('./files/3.txt','utf8').then((r3) =>{console.log(r3)})

注意：上述的代码无法保证文件的读取顺序，需要做进一步改进
then()方法特性
如果上一个.then方法中返回一个新的Promise实例对象，则可以通过下一个.then()继续进行处理。通过下一个.then()方法的链式调用，就解决回调地狱的问题

import thenFs from 'then-fs'
thenFs
.readFile('./files/1.txt','utf8')
.then((r1) = > {
	console.log(r1)
	return thenFs.readFile('./files/2.txt','utf8')
})
.then((r2)=>{
	console.log(r2)
	return thenFs.readFile('./files/3.txt','utf8')
})
.then((r3) = > {
	console.log(r3)
})

通过.catch捕获错误

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

import thenFs from 'then-fs'
thenFs
.readFile('./files/11.txt','utf8')
.then((r1) = > {
	console.log(r1)
	return thenFs.readFile('./files/2.txt','utf8')
})
.then((r2)=>{
	console.log(r2)
	return thenFs.readFile('./files/3.txt','utf8')
})
.then((r3) = > {
	console.log(r3)
}) 
.catch((err) = > {
	console.log(err.message)
})

如果不希望前面的错误导致后续.then无法正常执行，则可以将.catch的调用提前

import thenFs from 'then-fs'
thenFs
.readFile('./files/11.txt','utf8')
.catch((err) = > {
	console.log(err.message)
})
.then((r1) = > {
	console.log(r1)
	return thenFs.readFile('./files/2.txt','utf8')
})
.then((r2)=>{
	console.log(r2)
	return thenFs.readFile('./files/3.txt','utf8')
})
.then((r3) = > {
	console.log(r3)
})

promise.all()方法

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

const promiseArr = [
	thenFs.readFile('./files/11.txt','utf8'),
	thenFs.readFile('./files/2.txt','utf8'),
	thenFs.readFile('./files/3.txt','utf8'),
]
//
Promise.all(PromiseArr)
	.then(([r1,r2,r3]) = > {
		console.log(r1,r2,r3)
	})
	.catch(err = > {
		console.log(err.message)	
	})

Promise.race()方法

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

const promise = [
	thenFs.readFile('./files/1.txt','utf8'),
	thenFs.readFile('./files/2.txt','utf8'),
	thenFs.readFile('./files/3.txt','utf8'),
]
Promise.race(PromiseArr)
	.then(result = > {
		console.log(result )
	})
	.catch(err = > {
		console.log(err.message)	
	})

基于Promise封装读文件的方法
方法封装要求：

方法的名称要定义为getFile
方法接收一个形参fpath，表示要读取的文件路径
方法的返回值为Promise实例对象

getFile方法的基本定义

//1.方法的名称为getFile
//2.方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath){
	//3.方法的返回值为Promise
	return new Promise()
}

注意：第5行代码中的new Promise（）只是创建了一个形式上的异步操作

创建具体的异步操作
如果想要创建具体的异步操作，则需要在new Promise()构造函数期间，传递一个function函数，将具体的异步操作定义到function函数内部

//方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath){
	//方法的返回值为Promise的实例对象
	return new Promise(function(){
		//创建一个具体的读文件的异步操作
		fs.readFile(fpath,'utf8',(err,dataStr) = > {})
	})
}

获取.then()的两个参数
通过.then()指定的成功和失败的回调函数，可以在function的形参中进行接收

function getFile(fpath){
	//resolve  形参是调用getFile()方法时，通过.then指定的"成功的"回调函数
	//reject  形参是调用getFile()方法时，通过.then指定的"是百度的"回调函数
	return new Promise(function(){
		fs.readFile(fpath,'utf8',(err,dataStr) => {})
	})
}
//getFile方法的调用过程
getFile('./files/1.txt').then()

调用resolve 和reject回调函数
Promise异步操作的结果，可以调用resolve或reject回调函数进行处理

function getFile(fpath){
	//resolve  形参是调用getFile()方法时，通过.then指定的"成功的"回调函数
	//reject  形参是调用getFile()方法时，通过.then指定的"是百度的"回调函数
	return new Promise(function(){
		fs.readFile(fpath,'utf8',(err,dataStr) => {
			//如果读取失败，则调用"失败的回调函数"
			//如果读取成功，则调用"成功的回调函数"
			if(err)return reject(err)
			resolve (dataStr)
		})
	})
}
//getFile方法的调用过程
getFile('./files/1.txt').then((r1) => {console.log}).catch(err => console.log(err.message))

什么是async/await

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

thenFs.readFile('./files/1.txt','utf8')
	.then(r1 => {
		console.log(r1)
		return thenFs.readFile('./files/2.txt','utf8')
	})
	.then(r2 => {
		console.log(r2)
		return thenFs.readFile('./files/3.txt','utf8')
	})
	.then(r3 => {
		console.log(r3)
	})

async/await的基本使用

import thenFs from 'then-fs'
async function getAllFile(){
	const r1 = await thenFs.readFile('./files/1.txt','utf8')
	console.log(r1)
	const r2 = await thenFs.readFile('./files/2.txt','utf8')
	console.log(r2)
	const r3 = await thenFs.readFile('./files/3.txt','utf8')
	console.log(r3)
}
getAllFile()

async/await的使用注意事项

如果在function中使用了await，则function必须被async修饰
在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行

console.log('A')
async function getAllFile(){
	consolelog('B')
	const r1 = await thenFs.readFile('./files/1.txt','utf8')
	const r2 = await thenFs.readFile('./files/2.txt','utf8')
	const r3 = await thenFs.readFile('./files/3.txt','utf8')
	console.log(r1,r2,r3)
	consloe.log('D')
}
getAllFile()
console.log('C')


A
B
C
111 222 333
D

EventLoop

JavaSript 是一门单线程的编辑语言
单线程执行任务队列问题：
如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题

同步任务和异步任务

为了防止某个耗时任务当前熬制程序假死问题，JavaScript把待执行任务分为两类
同步任务

又叫非耗时任务，指的是在主线程排队对的任务
只有前一个任务执行完毕，才能执行后一个任务

异步任务

又叫耗时任务，异步任务有JavaScript委托给宿主环境进行执行
当异步任务执行完毕后，会通知JavaScript主线程执行异步任务的回调函数

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

插入图片解释同步任务和异步任务

JavaScript主线程从"任务队列"中读取异步任务的回调函数，放到执行栈中一次执行，这个过程是循环不断的，所以整个的这种运行机制又称为EventLoop

import thenFs from 'then-fs'
console.log('A')
thenFs.readFile('./files/1.txt','utf8').then(dataStr => {
	console.log('B')
})
setTimeout(() => {
	console.log('C')
},0)
console.log('D')

A
D
C
B

A和D属于同步任务，会根据代码先后顺序执行
C和B属于异步任务，他们的回调函数会被加入到任务队列中，等待主线程空闲时再执行

宏任务和微任务

JavaScript 把异步任务有做了进步一划分，异步任务有分为两类，分别是
宏任务

异步Ajax请求
setTimeout，setInterval
文件操作
其他宏任务

微任务

Promise.then .catch .finally
process.nextTick
其他任务

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

每个宏任务执行完毕之后，都会检查是否存在待执行的微任务
如果有，则执行完所有微任务之后，再继续执行下一个宏任务

//宏任务
setTimeout(function(){
	console.log('1')
})
//执行函数同步执行
new Promise(function(resolve){
	console.log('2')
	resolve()
//微任务
}).then(function(){
	console.log('3')
})
//同步任务
console.log('4')

2431

分析：
先执行所有同步任务 24
再执行同步任务里面的微任务 3
最后执行宏任务 1

API接口案例
1.案例需求
基于MySQL数据库+Express对外提供用户列表的API接口服务
第三方包express和mysql
es6模块化
Promise
async/await
主要的实现步骤
搭建项目的基本结构
创建基本的服务器
创建db数据库操作模块
创建user_ctrl业务模块
创建user_router路由器模块

搭建项目的基本结构
启用ES6模块化支持

在package.json中声明“type”:“module”
安装第三方依赖包
运行npm install express@4.17.1 mysal@2.2.5
创建基本的服务器

//使用ES6的默认导入语法
import express from 'express'
const app = express()
app.listen(80,() => {
	console.log('server running at http://127.0.0.1')
})

创建db数据库操作模块

import mysql from 'mysql2'
const pool = mysql.createPool({
	host:'127.0.0.1',
	port:3306,
	//操作数据库名称
	database:'my_db_01',
	//登录数据库到的用户名
	user:'root',
	//登录数据库密码
	password:'admin123'
})
//默认导出一个支持Promise API的pool
export default pool.promise()

创建user_ctrl模块

import db from '../db/index.js'
//使用es6的按需导出语法导出 getAllUser方法
 export async function getAllUser(req,res){
    const [rows] = await db.query('select id,username,nickname from ev_users')
    // console.log(rows)
    res.send({
        status:0,
        message:'获取用户列表数据成功',
        data: rows,
    })
}
getAllUser()

创建user_router模块

import express from 'express'
//按需导入getAllUser方法
import {getAllUser} from '../controller/user-ctrl.js'
//创建路由实例对象
const router =  new express.Router()
//调用router.get()方法，监听客户端get请求，当客户端请求'/user'地址，让getAllUser处理函数去处理
router.get('/user',getAllUser)

export default router

导入并挂载路由模块

import userRouter from './router/user_router.js'
app.user('/api',userRouter)

使用try…catch捕获异常

export async function(req,res){
//使用try...catch捕获Promise异步惹怒我中产生的异常错误，并在catch块中进行处理
try{
	//	ev_users表中没有xxx字段，所有此SQL 语句会执行异常
	const [rows] = await db.query('selsct id,username,nickname,xxx from ev_users')
	res.send({status:0,
	message:'获取用户列表数据成功',
	data:rows,
	})
}catch(e){
	res.send({status:1,
	message:'获取用户列表失败！',
	desc:e.message,
	})
}
}

小节
能够知道如何使用ES6的模块化语法

默认导出与默认导入
按需导出与按需导入

能够知道如何使用Promise解决回调地狱问题

promise.then()
promise.catch()

讷讷够使用async/await简化Promise的调用

方法中用到await，则方法需要被async修饰

能够说出什么是EventLoop

EventLoop示意图

能够说出宏任务和微任务的执行顺序

在执行下一个宏任务之前，先检查是否有带执行的微任务

Hst1120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6模块化

node.js遵循了CommonJS的模块化规范导入其他模块使用require()模块对外共享成员使用module.exports对象模块化的好处大家都遵守同样的模块化规范写代码，降低沟通成本，极大方便了各模块之间的相互调用前端模块化分类在ES6模块化规范诞生之前，javascript社区提出了AMD,CMD,CommonJS等模块化规范AMD,CMD值适用于浏览器的javaScript模块化CommonJS适用于服务器的javaScript模块化太多模块化规范增加了开发成本，因此，E
复制链接

扫一扫