【前端进阶】前端进阶知识补充

一、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