一、ES6 模块化
(一)认识 ES6 模块化
1、JS 模块化分类
- 浏览器端:AMD、CMD
- 服务器端:CommonJS
- 官方通用:ES6 模块化
2、ES6 模块化定义
- 每个 JS 文件都是独立模块
- 导入其他模块使用 import 关键字
- 对外共享模块使用 export 关键字
3、node.js 中体验 ES6 模块化
- 安装 v14.15.1 或更高版本 node.js
- npm init -y 快速生成的 package.json 根节点中添加 “type”:“module”
(二)基本语法
1、默认导出/导入
- 默认导出:export default
导出成员
- 注意:每个模块仅允许导出一次
let n1 = 10 // 定义模块私有成员 n1
let n2 = 20 // 定义模块私有成员 n2,未导出故外界无法获取
function show(){} // 定义模块私有方法 show
export default{ // 默认导出语法,向外共享两成员 n1 和 show
n1,
show
}
- 默认导入:import
接收名称
from'模块标识符'
- 注意:接收名称任意但必须
合法(仅支持字母开头)
// 从模块 n1文档.js 中导入 export default 向外共享的成员,并用名称 m1 接收
import m1 from './01文档.js'
console.log(m1) // n1 :10, show:[Function: show]
2、按需导出/导入
- 按需导出:export 按需导出成员
- 注意
- 每个模块中可以使用
多次
按需导入 - 按需导入和按需导出成员
名称必须保持一致
- 按需导入时支持 as 关键字
重命名
- 支持按需导入和默认导入同时使用
- 每个模块中可以使用
export let s1 = 'aaa'
export let s2 = 'bbb'
export function dance(){}
export default { // 同时使用默认导出
s3: 'ccc'
}
- 按需导入:import {名称1, 名称2…} from ‘模块标识符’
import {s1, s2 as S2, dance} from './02文档.js'
import info, {s1, S2, dance} from './02文档.js' // 同时使用 info 进行默认导入
console.log(s1) // aaa
console.log(s2) // bbb
console.log(dance) // [Function: dance]
3、直接导入并执行
- 直接导入:import ‘模块标识符’
- 注意:仅执行某个模块中的代码,无需得到模块向外共享成员
import './03文档.js'
二、Promise
(一)回调地狱
- 定义:多层回调函数的互相嵌套
- 缺点
- 耦合性强,难以维护
- 冗余代码相互嵌套,可读性差
- 方案:ES6 中新增 Promise 解决回调地狱问题
(二)基本概念
1、构造函数
- 创建实例:const p = new Promise()
- 实例对象:代表异步操作
2、.then()
- Promise.prototype 上包含一个 .then() 方法
- 每次 new Promise() 得到的实例对象都可以通过
原型链
访问到 .then() - .then() 方法预先指定成功/失败回调函数
- p.then(成功回调函数, 失败回调函数)
- 成功回调必选,失败回调可选
p.then(result =>{}, error =>{})
(三)基本用法
1、基于 then-fs
- node.js 官方 fs 模块仅支持回调函数方式读文件,不支持 Promise 调用方式
- 安装 then-fs 第三方包,支持 Promise 调用方式
2、链式调用
- Promise 支持链式调用,解决回调地狱问题
3、.catch() 捕获错误
- Promise 支持链式调用,解决回调地狱问题
4、Promise.all()
5、Promise.race()
6、基于 Promise 封装文件
- 方法名称:getFile
- 形参:fpath,读取文件的路径
- 返回值:Promise 实例对象
// 形式的异步操作,不确定具体功能读文件/发送 ajax
function getFile(fpath){
return new Promise()
}
// 具体的异步操作,确定为读取文件
function getFile(fpath){
return new Promise(function(resolve, reject){
fs.readFile(fpath, 'utf-8', (err, dataStr) => {}) // 将具体的异步操作定义到 function 内部
})
getFile('路径').then(成功回调, 失败回调)
}
三、async/await
- 背景:.then() 链式调用操作过于冗余,阅读性差,不易理解
- 作用:ES8 引入的新语法,简化 Promise 异步操作
- 注意
- await 用在 promise 实例对象之前,async 必须搭配使用
- async 方法中,
第一个 await 之前的代码同步执行
,之后的代码异步执行
四、EventLoop
(一)同步任务和异步任务
- JS 是
单线程执行
的编程语言,同一时间只能做一件事。单线程执行任务队列时,如果前一任务非常耗时
,则后续任务一直等待导致程序假死
- 同步任务:
非耗时任务
,在主线程排队按序执行 - 异步任务:
耗时任务
,由 JS 委托给宿主环境执行
,执行完成后通知 JS主线程执行异步任务的回调函数
(二)同步异步任务执行机制
(三)EventLoop
- 事件循环:JS 主线程不断从任务队列中读取异步任务的回调函数,放到执行栈依次执行
五、宏任务和微任务
(一)概念
(二)执行机制
-
交替执行:每一个宏任务执行完成,都会检查
是否存在待执行的微任务
,优先执行完所有微任务再执行下一个宏任务
-
场景类比
六、API 接口案例
(一)案例需求
- 基于
MySQL 数据库 + Express
对外提供用户列表
的 API 接口服务 - 技术点
- 三方包 express 和 mysql2
- ES6 模块化
- Promise 和 async/await
(二)实现步骤
-
搭建项目基本结构
- ES6 模块化支持
- 安装第三方依赖包
npm install express@4.17.1 mysql2@2.2.5
-
创建基本服务器
-
创建 db 数据库操作模块
-
创建 user_ctrl 业务模块
-
创建 user_router 路由模块
-
导入并挂载路由模块
-
使用 try…catch 捕获异常
七、webpack
(一)基本概念
1、本质
- 第三方打包工具,整合、压缩、转义代码
2、作用
- 支持所有类型文件打包并减少文件数量
- 支持 less/sass 转为 css,支持 ES6/7/8 转为 ES5
- 提高浏览器打开速度
(二)使用步骤
1、准备
- 初始化包环境 package.json
yarn init // 传说中比 npm 更快的方式
- 安装依赖包
yarn add webpack webpack-cli -D
- package.json 配置自定义命令 scripts
"scripts":{
"build":"webpack"
}
- 编码:所有代码都要在
入口文件
引入
2、基础使用
- 打包入口:新建 src/index.js
- 操作函数:新建 src/操作函数.js 模块并导出
- 按需导入:index.js 引入模块并使用函数输出
- 进行打包:执行
yarn build
自定义命令进行打包生成 dist/main.js- 找到配置文件、入口和依赖关系以后,打包代码输出到指定位置
(三)配置
- 新建
webpack.config.js
进行配置 - webpack 默认打包
js 文件
- 开发环境编写代码,打包后运行代码
- webpack-插件:更多功能
- webpack-加载器:处理更多类型文件
1、修改默认入口和出口
- 默认入口:src/index.js
- 默认出口:dist/main.js
- 修改入口文件名
- 配置
module.exports = {
entry: './src/main.js', // 入口
output: { // 出口
path: path.resolve(__dirname, 'dist'), // 出口路径
filename: 'bundle.js', // 出口文件名
},
};
- 打包
yarn build
2、自动生成 html 文件
- 安装
yarn add html-webpack-plugin -D
- 配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin({ //plugin 插件配置
template:'./public/index.html' // 告知webpack 使用插件时,以自己 html 文件作为模板生成 dist/html 文件
})],
};
- 打包
yarn build
3、打包 css 文件
- 安装
yarn add css-loader style-loader -D
- 配置
module.exports = {
module: { // 加载器配置
rules: [ // 规则
{ // 一个具体规则
test: /\.css$/i, // 匹配 .css 结尾的文件
use: ["style-loader", "css-loader"],
// 让 webpack 使用两个 loader 处理 css 文件;
// 从右向左执行,不能颠倒顺序;
// css-loader:webpack 解析 css 文件,把css 代码一起打包进 js 中;
// style-loader:css 代码插入 DOM 中
},
],
},
};
- 打包
yarn build
4、更多
- 更多插件参考 webpack
(四)开发服务器
1、优点
- 服务器内存中打包,速度快
- 自动更新打包变化代码,实时返回浏览器
2、使用
- 安装
yarn add webpack-dev-server -D
- package.json 配置
"scripts":{
"build":"webpack",
"server":"webpack server"
}
- 启动
yarn serve