Vue.js

Vue.js

ES6模块化与异步编程高级用法

ES6 模块化

node.js 中如何实现模块化

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 模块化的基本语法

ES6 的模块化主要包含如下 3 种用法：
① 默认导出与默认导入
② 按需导出与按需导入
③ 直接导入并执行模块中的代码

默认导出与默认导入

默认导出的语法： export default 默认导出的成员。
示例代码如下：

let n1 = 10
let n2 = 20
function show() {}

export default {  //向外导出n1和show
  n1,
  show
}

默认导入的语法： import 接收名称 from ‘模块标识符’。
示例代码如下：

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

按需导出与按需导入

按需导出的语法： export 按需导出的成员。
示例代码如下：

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {}

按需导入的语法： import { s1 } from ‘模块标识符’。
示例代码如下：

import { s1, s2 as str2, say } from './03.按需导出.js'

console.log(s1)
console.log(str2)
console.log(say)

按需导出与按需导入的注意事项：
① 每个模块中可以使用多次按需导出。
② 按需导入的成员名称必须和按需导出的名称保持一致。
③ 按需导入时，可以使用 as 关键字进行重命名。
④ 按需导入可以和默认导入一起使用。

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

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：

Promise

回调地狱

多层回调函数的相互嵌套，就形成了回调地狱。示例代码如下：

回调地狱的缺点：

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

如何解决回调地狱的问题

为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。

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() 方法时，成功的回调函数是必选的、失败的回调函数是可选的

基于回调函数按顺序读取文件内容

基于 then-fs 读取文件内容

由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式。因此，需要先运行如下的命令，安装 then-fs 这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容：

then-fs 的基本使用

调用 then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下：

注意：上述的代码无法保证文件的读取顺序，需要做进一步的改进！

.then() 方法的特性

如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用，就解决了回调地狱的问题。

基于 Promise 按顺序读取文件的内容

Promise 支持链式调用，从而来解决回调地狱的问题。示例代码如下：

通过 .catch 捕获错误

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

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

Promise.all() 方法

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

Promise.race() 方法

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

基于 Promise 封装读文件的方法

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

getFile 方法的基本定义

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

创建具体的异步操作

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

获取 .then 的两个实参

通过 .then() 指定的成功和失败的回调函数，可以在 function 的形参中进行接收，示例代码如下：

调用 resolve 和 reject 回调函数

Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理。示例代码如下：

async/await

什么是 async/await

async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在 async/await 出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。
.then 链式调用的优点：解决了回调地狱的问题；
.then 链式调用的缺点：代码冗余、阅读性差、不易理解；

async/await 的基本使用

使用 async/await 简化 Promise 异步操作的示例代码如下：

async/await 的使用注意事项

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

EventLoop

JavaScript 是单线程的语言

JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。

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

同步任务和异步任务

为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：
① 同步任务（synchronous）

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

② 异步任务（asynchronous）

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

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

① 同步任务由 JavaScript 主线程次序执行；
② 异步任务委托给宿主环境执行；
③ 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行；
④ JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行；
⑤ JavaScript 主线程不断重复上面的第 4 步；

EventLoop 的基本概念

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

宏任务和微任务

什么是宏任务和微任务

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
① 宏任务（macrotask）

• 异步 Ajax 请求
• setTimeout、setInterval
• 文件操作
• 其它宏任务

② 微任务（microtask）

• Promise.then、.catch 和 .finally
• process.nextTick
• 其它微任务

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

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

webpack（模块打包工具）

webpack基本概念

为什么要学习webpack

1. 减少文件数量
2. 缩减代码体积
3. 提高浏览器打开的速度

webpack基本概述

webpack本质是一个第三方模块包, 用于分析, 并打包代码。

• 支持所有类型文件的打包
• 支持less/sass => css
• 支持ES6/7/8 => ES5
• 压缩代码, 提高加载速度

问题：什么是webpack呢? 作用是什么? 目的是?

1. 它是一个模块包
2. 识别代码, 翻译, 压缩, 整合打包
3. 提高打开网站的速度

webpack使用步骤

使用webpack需要做哪些准备工作?

1. 初始化文件夹包环境, 得到package.json文件
2. 下载webpack等模块包
3. 在package.json自定义命令, 为打包做准备

环境准备

1. 初始化包环境
   

2. 安装依赖包

3. 配置scripts (自定义命令)
   

webpack如何使用

1. 默认src/index.js - 打包入口文件
2. 需要引入到入口的文件才会参与打包
3. 执行package.json里的build命令，间接执行webpack打包命令
4. 默认输出dist/main.js的打包结果

代码增加后, 如何打包

1. 确保在src/index.js引入和使用
2. 重新执行yarn build打包命令

webpack的配置

webpack-入口和出口

问题: 能否更改webpack打包默认的入口和出口?

1. 新建webpack.config.js
2. 填入配置
3. 修改入口文件名
4. 打包观察效果

注意: webpack基于node, 所以导出, 遵守CommonJS规范。
总结：如何修改webpack入口和出口？

1. 新建webpack.config.js (webpack默认配置文件名)
2. 通过entry设置入口文件路径
3. 通过output对象设置出口路径和文件名

yarn build执行流程图

从yarn build开始都走了哪些流程呢?

重点: 所有要被打包的资源都要跟入口产生直接/间接的引用关系。
总结：运行yarn build后，执行webpack命令, 找到配置文件, 入口和依赖关系, 打包代码输出到指定位置。

用yarn下的包, 如何作用在前端项目中

1. 借助webpack, 把模块和代码打包
2. 把js文件引入到html执行查看效果

html-webpack-plugin插件

如何让webpack打包时, 自动生成html文件呢?

1. 依赖html-webpack-plugin插件, yarn下载此插件
2. 在webpack.config.js配置写入即可

步骤：

• 下载插件
  
• webpack.config.js添加配置
  

webpack打包css文件问题

编写css代码, 让webpack打包
报错:因为webpack默认只能处理js文件。

webpack-使用加载器处理css文件

如何才能让webpack识别和打包css文件呢?

• css-loader：让webpack能处理css类型文件；
• style-loader：把css插入到DOM中；

webpack如何支持css打包? 打包后样式在哪里? 如何生效?

1. 依赖css-loader和style-loader
2. css代码被打包进js文件中
3. style-loader会把css代码插入到head下style标签内

步骤：

1. 下载加载器
2. webpack.config.js配置
3. 打包观察效果
   

webpack-使用加载器处理less文件

webpack如何支持less打包? 需要注意什么?

1. 依赖less-loader和less模块包
2. 转换css后还需要css-loader和style-loader的处理

less-loader作用: 识别less文件；less 作用: 将less编译为css；

webpack处理图片文件

使用webpack打包体图片时会报错: 因为webpack无法自己处理图片文件。

webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader。
以前用url-loader和file-loader来处理看，现在webpack.config.js – 针对图片文件设置type: “assets“。

再次打包观察效果：小于8KB文件, 文件转base64打包在js中, 大于8KB, 文件自动命名输出到dist下。
小结：webpack如何支持图片打包? 对图片有哪2种处理方案?

1. webpack5, 在rules里, 针对图片文件设置type: asset；
2. 小于8KB转base64字符串进js里, 大于8KB输出文件；

图片翻译成了base64, 放到了js文件中：

• 好处: 浏览器不用发请求了，直接可以读取, 速度快 ；
• 坏处: 图片太大，再转base64就会让图片的体积增大 30% 左右,得不偿失；

webpack处理字体图标

1. src/assets 下 放入fonts字体相关文件夹
2. src/main.js 引入 assets/fonts/iconfont.css
3. src/main.js 创建一个i标签, 使用字体图标标签添加到body上
4. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)
5. 打包后运行网页观察效果

webpack如何处理图标字体文件呢?在webpack.configjs的rules里针对字体图标文件类型
设置asset/resource, 直接输出到dist下。

webpack对JS语法降级

高版本的js代码(箭头函数), 打包后, 直接原封不动打入了js文件中, 遇到一些低版本的浏览器就会报错。原因: webpack 默认仅内置了 模块化的 兼容性处理 import export。
babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法；
babel-loader: 可以让webpack转译打包的js代码；
步骤：

1. 在src/main.js – 定义箭头函数, 并打印箭头函数变量
2. 下载加载器
3. 配置到webpack.config.js上
4. 打包观察是否降级

webpack开发服务器

问题: 每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s)。
原因:

• 从0构建依赖
• 磁盘读取对应的文件到内存, webpack开始加载
• 再用对应的 loader 进行处理
• 将处理完的内容,输出到磁盘指定目录

解决: 起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用。
总结: webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示。
为什么要使用webpack开发服务器呢?

1. 打包在内存中, 速度快
2. 自动更新打包变化的代码, 实时返回给浏览器显示

webpack-dev-server模块使用

使用步骤：

1. 下载模块包
   
2. 自定义webpack开发服务器启动命令serve – 在package.json里
   
3. 启动当前工程里的webpack开发服务器
   
4. 重新编写代码, 观察控制台和浏览器是否自动打包和更新

如何使用webpack开发服务器实时打包我们代码呢?

1. 确保下载了webpack-dev-server到工程中。
2. 在package.json-配置自定义命令, 然后启动即可。
3. webpack-dev-server会给我们一个地址+端口浏览器，访问即可看到在内存中打包的index.html页面。

webpack-dev-server配置

1. 在webpack.config.js中添加如下配置即可
   
2. 重新启动webpack开发服务器观察效果

如何修改webpack开发服务器的配置呢?

1. 去文档查找配置项的名字
2. 在webpack.config.js – devServer选项里添加