铺垫
什么是Vue.js?
- Vue.js 是目前最火的一个前端框架
- Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
- Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于于第三库或既有项目整合
- 一套用于构建用户界面的渐进式JavaScript框架
- 渐进式:就是一开始不需要你完全掌握它的全部功能特性,可以后续逐步增加功能。没有多做职责之外的事情
为什么学习Vue.js?
- 企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;
- 提高开发效率的发展历程:原生JS→jQuery等库→前端模板引擎→Vue.js
- 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放用户的双手,让程序员可以更多的时间去关注业务逻辑;
- 增强自己就业时候的竞争力
框架和库的区别
框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
怎么学习Vue.js?
1. 知识点自测最好做到了如指掌 - 做不到只能花30分钟去记住结论和公式
2. 记住Vue指令作用,基础语法 - 弄一个字典(一一映射关系)
3. 在课上例子,练习,案例,作业,项目中,反复磨练使用
4. 学会查找问题的方式和解决方式(弄个报错总结文档,避免反复进坑)
开发者:尤雨溪
- 2013年:受到Angular框架的启发,尤雨溪开发出了一款轻量级框架——Seed。同年12月,Seed更名为Vue,版本号0.6.0。
- 2014年:Vue正式对外发布,版本号0.8.0(Taylor otwell一个外国大佬)在 Twitter 上发表动态,说自己正在学习Vue.js
- 2015年:10月27日,正式发布Vue1.0.0 Evan个lion(新世纪福音战士)
- 2016年:10月1日,正式发布Vue2.0.0 Ghost in the Shell(攻壳机动队)
- 2018年:9月18日,正式发布Vue3.0.0 One Piece(海贼王)
一、ES6模块化
1. 回顾:node.js中如何实现模块化
node.js 遵循了 CommonJS 的模块化规范。其中:
- 导入其它模块使用 require() 方法
- 模块对外共享成员 module.exprots 对象
模块化的好处:
大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用,利人利己。
2. 前端模块化规范的分类
在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并且提出了AMD、CMD、CommonJS等模块化规范。
但是,这些由社区出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:
AMD、CMD 适用于浏览器端的 JS 模块化
CommonJS 适用于服务器端的 JS 模块化
太多的模块化规范给开发者增加学习的难度与开发的成本。因此,大一统的ES6模块化诞生了!
3. 什么是 ES6 模块化规范
ES6 模块化规范是浏览器端与服务器端通过的模块化开发规范。它的出现极大的降低前端开发者的模块化学习成本,开发者不需要额外学习AMD、CMD、CommonJS等模块化规范。
ES6 模块化规范中定义:
- 每个js文件都是一个独立的模块
- 导入其它模块成员使用 import 关键字
- 向外共享模块成员使用 export 关键字
4. 在 node.js 中体验 ES6 模块化
node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照如下俩个步骤进行配置:
① 确保安装了 v14.15.1 或者更高版本的 node.js
查看方法: cmd 命令输入
node -v
②在 package.json 的根节点中添加 "type": "module", 节点
如图所示:
5. ES6 模块化的基本语法
ES6的模块化主要包含如下3种用法:
- 默认导出与默认导入
- 按需导出与按需导入
- 直接导入并执行模块中的代码
5.1 ✅默认导出
默认导出的语法:export default 默认导出的成员
let sm = 10 //定义模块私有成员 sm
let smm = 250 //定义模块私有成员 smm(外界访问不到smm,因为它没有被共享出去)
function show() { }//定义模块私有方法 show
export default {
// 使用 export default 默认导出语法,向外共享 sm 和show 两个成员
sm,
show
}
5.2 ✅默认导入
import m1 from "./01.默认导出.js";
console.log(m1)
5.3 默认导出的注意事项
每个模块中,只允许使用唯一的一次export default ,否则会报错!
5.4 默认导入的注意事项
默认导入时的接收名称可以是任意名称,只要是合法的成员名称就可以:
5.5 ✅按需导出
按需导出的语法: export按需导出的成员
// 向外按需导出变量 s1
export let s1 = 'aaa'
// 向外按需导出变量 s2
export let s2 = 'ccc'
// 向外按需导出方法 say
export function say() { }
5.6 ✅按需导入
按需导出的语法: import {s1} from “模块标识符”
// 导入模块成员
import { s1, s2, say } from "./03.按需导出.js";
console.log(s1);//打印输出 s1
console.log(s2);//打印输出 s2
console.log(say);//打印输出 [Function: show]
5.7 按需导出与按需导入的注意事项
① 每个模块中可以使用多次按需导出
② 按需导入的成员名称必须和按需导出的名称保持一致
③ 按需导入时,可以使用 as关键字 进行重命名
④ 按需导入可以和默认导入一起使用
5.8 直接导入并执行模块中的代码
如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导入并执行模块代码:
二、Promise
1. 回调地狱
多层回调函数的互相嵌套,就形成了回调地狱。示例代码如下:
setTimeout(function () { //第一层
console.log('武林要以和为贵');
setTimeout(function () { //第二程
console.log('要讲武德');
setTimeout(function () { //第三层
console.log('不要搞窝里斗');
}, 1000)
}, 2000)
}, 3000)
回调地狱的缺点:
- 代码耦合性太强,牵一发而动全身,难以维护
- 大量冗余的代码互相嵌套,代码的可读性变差
2. 如何解决回调地狱的问题
为了解决回调地狱的问题,ES6中新增了 Promise 的概念
3. 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() 方法时,成功的回调函数是必选的,失败的回调函数是可选的
4. 基于回调函数按顺序读取文件内容
5. 基于 then-fs 读取文件内容
由于node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件,不支持 Promise 的调用方式。因此,需要先运行如下的命令,安装 then-fs 这个第三方的包,从而支持我们基于 Promise 的方式读取文件的内容:
npm install then-fs
5.1 then-fs 的基本使用
调用 then-fs 提供的 readFile() 方法,可以异步地读取文件的内容,它的返回值是 promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下:
注意:上述的代码无法保证文件的读取顺序,需要做进一步的改进!
5.2 ✅.then() 方法的特性
如果上一个.then() 方法中返回了一个新的 Promise 实例对象,则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用,就解决了回调地狱的问题
5.3 基于 Promise 按顺序读取文件的内容
Promise 支持链式调用,从而来解决回调地狱的问题。示例代码如下:
thenFs.readFile("./files/1.txt", 'utf8')// 1. 这个返回值是 Promise 的实例对象
.then((r1) => {// 2. 通过 .then 为第一个 Promise 实例指定成功之后的回调函数
console.log(r1)
return thenFs.readFile("./files/2.txt", 'utf8')// 3. 在第一个 .then 中返回一个新的 Promise 实例对象
},
() => { console.log('失败') }//3.5 如果错误就会触发
)
.then((r2) => {// 4.继续调用 .then 为上一个 .then 的返回值(新的 Promise 实例) 指定成功之后的回调函数
console.log(r2)
return thenFs.readFile("./files/3.txt", 'utf8')// 5. 在第二个 .then 中再返回一个新的 Promise 实例对象
})
.then((r3) => {// 6. 继续调用 .then 为上一个 .then 的返回值(新的 Promise 实例) 指定成功之后的回调函数
console.log(r3)
})
5.4 ✅通过 .cath捕获报错
在 Promise 的链式操作中如果发生了错误,可以使用 Promise .prototype.catch 方法进行捕获和处理:
注意两种用法:
- 将.catch() 放到代码最后会捕获所有的错误,但是一旦出现错误后面的代码就不会执行了
- 将.catch() 放到代码前面时候,会捕捉前一步的错误,但是在它后面的代码会继续执行
5.5 Promise.all() 方法
Promise.all() 方法会发起并行的 Promise 异步操作,等所有的异步操作全部结束后才会执行下一步的 .then操作(等待机制)。示例代码如下:
import thenFs from 'then-fs'
const promiseArr = [
thenFs.readFile('./files/1.txt', 'utf8'),
thenFs.readFile('./files/2.txt', 'utf8'),
thenFs.readFile('./files/3.txt', 'utf8')
]
//------------------
Promise.all(promiseArr).then(res => {
console.log(res);
}).catch(err => {
console.log(err.message);
})
注意:数组中 Promise 实例的顺序,就是最终结果的顺序!
5.6 Promise.race() 方法
Promise.race() 方法会发起并行的 Promise 异步操作,只要任何一个异步操作完成,就立即执行下一步的.then 操作(赛跑机制)。示例代码如下:
import thenFs from 'then-fs'
const promiseArr = [
thenFs.readFile('./files/1.txt', 'utf8'),
thenFs.readFile('./files/2.txt', 'utf8'),
thenFs.readFile('./files/3.txt', 'utf8')
]
Promise.race(promiseArr).then(res => {
console.log(res);
}).catch(err => {
console.log(err.message);
})
猜测:赛跑的话,谁跑的快就执行谁,其余的不执行
6. 基于 Promise 封装读文件的方法
方法的封装要求:
① 方法的名称要定义为 getFile
方法接受收一个形参 fpath ,表示要读取的文件的路径
③ 方法的返回值为 Promise 实例对象
6.1 getFile 方法的基本定义
import fs from 'fs'
// 1.方法的名称为 getFile
// 2.放过接收一个形参 fpath,表示要读取的文件路径
function getFile(fpath) {
// 3. 方法的返回值为 Promise 的实例对象
return new Promise()
}
注意:第6行代码中的 new Promise() 只是创建了一个形式上的异步操作。
6.2 创建具体的异步操作
如果想要创建具体的异步操作,则需要在 new Promise() 构造函数期间,传递一个 function 函数,将具体的异步操作定义到 function 函数内部。示例代码如下:
import fs from 'fs'
// 1.方法的名称为 getFile
// 2.放过接收一个形参 fpath,表示要读取的文件路径
function getFile(fpath) {
// 3. 方法的返回值为 Promise 的实例对象
return new Promise(function () {
// 4. 下面这行代码,表示这是一个具体的、读文件的异步操作
fs.readFiel(fpath, 'utf8', (err, dataStr) => { })
})
}
6.3 获取 .then的两个实参
通过 .then() 指定的成功和失败的回调函数,可以在 function 的形参中进行接受,示例代码如下:
6.4 调用 resolve 和 reject 回调函数
Promise 异步操作的结果,可以调用 resolve 或 reject 回调函数进行处理。示例代码如下:
//调用 基础的路径模块 fs
import fs from 'fs'
function getFile(fpath) {
// resolve 是“成功的”回调函数;reject 是“失败的”回调函数
return new Promise(function (resolve, reject) {
fs.readFile(fpath, 'utf8', (err, dataStr) => {
if (err) return reject(err) // 如果读取失败,则调用“失败的回调函数”
resolve(dataStr) // 如果读取成功,则调用“成功的回调函数”
})
})
}
// getFile 方法的调用过程
getFile('./files/1.txt').then(
(r1) => { console.log(r1); },//实参
(err) => { console.log(err.message); }//实参
).catch((err) => console.log(err.message))
三、async/await
1. 什么是 async/await
async/await 是 ES8(ESMAScript 2017)引入的新语法,用来简化 Promise 异步操作。在 async/await 出现之前,开发者只能通过链式 .then() 的方式处理 Promise 异步操作。示例代码看上面🚀(二 - 1.4.3)
.then 链式调用的优点:解决了回调地狱的问题
.then 链式调用的缺点:代码冗余、阅读性差、不易理解
2. ✅async/await 的基本使用
使用 async/await 简化 Promise 异步操作的示例代码如下:
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 = thenFs.readFile('./files/3.txt', 'utf8')
console.log(r3);//如果不写await 那就只能打印出来他是个Promise
}
getAllFile()
3. async/await 的使用注意事项
① 如果在 function 中使用了 await ,则function 必须被 async 修饰
② 在 async 方法中,第一个 await 之前的代码会同步执行,await之后的代码会异步执行
import thenFs from 'then-fs'
console.log('A')
async function getAllFile() {
console.log('B')
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);
console.log('D')
}
getAllFile()
console.log('C ')
四、Event Loop
1. JavaScript 是单线程的语言
JS 是一门单线程执行的编程语言。也就是说,同一时间只能做一件事情。
单线程执行任务队列的问题:
如果前一个任务非常耗时间,则后续的任务就不得不一直等待,从而导致程序假死的问题。
2. 同步任务和异步任务
为了防止某个耗时任务导致程序假死的问题,js 把待执行的任务分为了两类:
① 同步任务(synchronous)
- 又叫做非耗时任务,指的是在主线程上排队执行的那些任务
- 只有前一个任务执行完毕,才能执行后一个任务
② 异步任务(asynchronous)
- 又叫做耗时任务,异步任务由js委托给宿主环境(浏览器时候是浏览器,node.js是node.js)进行执行
- 当异步任务执行完成后,会通知 js 主线程执行异步任务的回调函数
3. 同步任务和异步任务的执行过程
① 同步任务由 js 主线程次序执行
② 异步任务委托给宿主环境执行
③ 已完成的异步任务对应的回调函数,会呗加入到任务队列中等待执行
④ js主线程的执行栈被清空后,会读取任务队列中的回调函数,次序执行
⑤ js主线程不断重复上面的第4步.
4. ✅EventLoop 的基本概念
由上图
依次执行。这个过程是循环不断的,所以整个的这种运行机制又称为 EventLoop (事件循环)。
4. 1 结合 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属于异步任务。他们的回调函数会被加入到任务队列中,等待主线程空闲时间再执行
五、宏任务和微任务
1. 什么是宏任务和微任务
js 把异步任务又做了进一步的划分,异步任务又分为两类,分别是:
① 宏任务(macrotaks)
- 异步 Ajax 请求
- setTimeout、setInterval
- 文件操作
- 其他宏任务
② 微任务(microtask)
- Promise.then 、.catch 和 .finally
- process.nextTick
- 其他微任务
2. ✅宏任务和微任务的执行顺序(交替执行)
每一个宏任务执行完之后,都会检查是否存在待执行的微任务,如果有,则执行完所有微任务之后,再继续执行下一个宏任务。
3. 去银行办业务的场景
① 小黄和小伦去银行办业务。首先,需要取号之后进行排队。
- 宏任务队列(两个人)
② 假设当前银行网点只有一个柜员,小黄在办理存款业务时,小伦只能等待
- 单线程,宏任务按次序执行
③ 小黄办完存款业务后,柜员询问他是否还想办理其他业务?
- 当前宏任务执行完,检查是否有微任务
④ 小黄告诉柜员:想要买理财产品、再办个信用卡
- 执行微任务,后续宏任务被推迟(小伦就得多等等)
⑤ 小黄离开柜台后,柜员开始为小伦办理业务
- 所有微任务执行完毕,开始执行下一个宏任务
4. 分析以下代码输出的顺序
setTimeout(function (){
console.log('1')
})
new Promise(function(resolve){
console.log('2')
resolve()
}).then(function(){
console.log('3')
})
console.log('4')
正确的输出顺序是:2→4→3→1
分析:
① 先执行所有的同步任务
- 执行第6行(new的时候Promise里面函数马上执行)、第12行代码
② 再执行微任务
- 执行第 9 行代码(.then)
③ 再执行下一个宏任务
- 执行第 2 行代码(setTimeout)
5. 经典面试题
请分析以下代码输出的顺序:
console.log('1');
setTimeout(function () {
console.log('2')
new Promise(function (resolve) {
console.log('3')
resolve()
}).then(function () {
console.log('4');
})
});
new Promise(function (resolve) {
console.log('5')
resolve()
}).then(function () {
console.log('6');
})
setTimeout(function () {
console.log('7')
new Promise(function (resolve) {
console.log('8')
resolve()
}).then(function () {
console.log('9')
})
})
六、API接口案例
1. 案例需求
基于 MySQL 数据库 + Express 对外提供用户列表的 API 接口服务。用到技术:
- 第三方包 express 和 mysql2
- ES6 模块化
- Promise
- async/await
2. 主要的实现步骤
① 搭建项目的基本结构
② 创建基本的服务器
③ 创建 db 数据库操作模块
④ 创建 user_ctrl 业务模块
⑤ 创建 user_router 路由模块
3. 搭建项目的基本结构
① 启用 ES6 模块化支持
- 在 package.json 中声明“type”:“module”
② 安装第三方依赖包
npm install express mysql2
4. 创建基本的服务器
// 使用 ES6 的默认导出语法
import express from 'express'
const app = express()
app.listen(3007, function () {
console.log("http://127.0.0.1:3007");
})
5. 创建 db 数据库操作模块
// ES6默认导入语法
import mysql from 'mysql2'
const pool = mysql.createPool({
host: '127.0.0.1',//本地
port: 3306,// 固定写法,好像是默认数据库端口
database: 'my_db_01',
user: 'root',
passwoed: 'admin123',
})
// 导出一个支持 Promise API 的 pool 操作
export default pool.promise()
6. 创建 user_ctrl 模块
import db from "../db/index.js"
//创建函数,创建按需导出 将 getAllUser 方法导出出去
export async function getAllUser(req, res) {
const str = 'select * from ev_users';//查询语句
const [rows] = await db.query(str)
//数据库执行默认返回的就是Promise,
//大数组中索引为0的是我们要的,所以结构赋值数据
// console.log(rows);//
res.send({
status: 0,
message: '获取用户列表数据成功!',
data: rows
})
}
getAllUser()
7. 创建 user_router 模块
import express from 'express'
// 按需导入的写法,注意有个花括号
import { getAllUser } from "../controller/user_ctrl.js"
// 定义路由对象
const router = new express.Router()
// 发起 get 请求请求 /user 是触发函数 getAllUser
router.get('/user', getAllUser)
// 使用ES6 的默认导出语法 将路由对象共享出去
export default router
8. 导入并挂载路由模块
// 1. 使用 ES6 的默认导出语法
import express from 'express'
import userRouter from './router/user_router.js'
const app = express()
// 2. 挂载永虎路由模块
app.use('/api', userRouter)
app.listen(3007, function () {
console.log("http://127.0.0.1:3007");
})
9. 使用 try...catch 捕获异常
import db from "../db/index.js"
//创建函数,创建按需导出 将 getAllUser 方法导出出去
export async function getAllUser(req, res) {
// 使用 try...catch 捕获 Promise 异步任务中产生的异常错误,并在 catch 块中进行处理
try {
// ev_users 表中没有 xxx 字段,所以此 SQL 语句会“执行异常”
const str = 'select username, email,xxx from ev_users';//查询语句
const [rows] = await db.query(str)
//数据库执行默认返回的就是Promise,
//大数组中索引为0的是我们要的,所以结构赋值数据
console.log(rows);
res.send({
status: 0,
message: '获取用户列表数据成功!',
data: rows
})
} catch (e) {
res.send({
status: 1,
message: '获取用户列表数据失败啦啦啦啦啦!',
desc: e.message
})
}
}