Vue 学习

伊人--

已于 2022-06-08 18:51:28 修改

阅读量150

点赞数

分类专栏：笔记文章标签：前端 vue es6

于 2022-06-08 18:46:33 首次发布

本文链接：https://blog.csdn.net/weixin_49827467/article/details/125190331

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

关于vue的学习总结

第一天学习总结

一、ES6模块化

1、回顾：node.js 中如何实现模块化？

node.js 遵循了 CommonJS 的模块化规范；其中
导入其他模块使用 require() 方法
模块对外共享成员使用 module.exports 对象

2、模块化的好处：

大家都准守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己；

3、前端模块化规范的分类：

AMD 和CMD使用与李玉兰器端的JavaScript 模块化
CommonJS适用于服务器端的JavaScript 模块化

大一统的ES6模块化规范；

4、什么是ES6模块化规范？

ES6模块化规范是浏览器和服务器端通用的模块化开发规范；
ES6 模块化规范中定义：
每个JS文件都是一个独立的模块
导入其他模块成员使用 import 关键字
向外共享模块成员使用 export 关键字

5、在 node.js 中体验 ES6 模块化；

node.js 中默认支持 CommonJS模块化规范，
若想在 node.js 中体验 ES6 模块化，可以按照如下两个步骤进行配置：
1、确保 node.js 的版本号是v14.15.1 或者是更高版本的
2、在package.json 的根节点中添加 “type”:"module"节点；

6、ES6 模块化的基本语法：

（1）默认导出和默认导入

默认导出的语法： export default {默认导出的成员}
默认导入的语法： import 文件名称 from ‘模块标识符’
【注意事项】
模块标识符，文件的路径
先导出，才能导入；
每个模块中，只允许使用唯一的一次 export default { }
接收的文件名称，可以任意名称，只要是合法的名称就可以；

（2）按需导出和按需导入

按需导出的语法： export 按需导出的成员
按需导入的语法： import {s1,s2,say} from ‘模块标识符’
需要什么成员，就导入什么成员；
【注意事项】

每个模块中可以多次按需导出按需导入的成员名称，必须和按需导出的名称保持一致；先导出，再导入；按需导入时，可以使用 AS
关键字进行重命名； import {s1 as str,s2,say} from ‘模块标识符’ ;s1
就不存在了，如果需要使用，就是str了；按需导入可以和默认导入一起使用；

（3）直接导入执行某个模块中的代码

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

01.js
//在当前模块中执行一个for 循环操作
for (let i=0;i<3;i++){
console.log(i)
}

02.js 想要执行01模块代码的文件
//直接导入并执行模块代码，不需要得到向外共享的成员
import './01.js'

二、Promise

1、回调地狱

多层回调函数的相互嵌套，就成了回调地狱；

setTimeout(()=>{
//第1层回调函数
consolo.log('延时 1 秒后输出')

setTimeout(()=>{
//第2层回调函数
consolo.log('延时 2秒后输出')

setTImeout(()=>{
//第3层回调函数
consolo.log('延时 3 秒后输出')
},3000)
},2000)
},1000)

回调地狱的缺点：

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

为了解决回调地狱的问题， ES6 中新增了 Promise 的概念；

2、Promise 的基本概念

(1) Promise是一个构造函数；说明可以 new 一个实例对象；

可以创建Promise的实例 const p = new Promise()
new 出来的 Promise实例对象，代表一个异步操作

(2) Promise.prototype 上包含一个 .then()方法

每一次 new Promise() 构造函数得到的实例对象，
都可以通过原型链的方式访问到 .then() 方法，例如：p.then();

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

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

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

fs.readFile('要读取的文件路径','utf8',(err1,r1) =>{
if(err1) return console.log(err1.message)
console.log(r1)
})

（1）如何解决回调地狱的问题？

由于 node.js 官方提供的fs模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式；

因此需要安装 then-fs 第三方包，从而支持 Promise 的方式读取文件的内容；

npm install then-fs

安装成功之后；就可以使用啦！

(2)通过Promise的 .then（）方法解决回调地狱的问题

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

thenFs.readFile('要读取的文件路径','utf8').then(
r1 => {console.log(r1)},error =>{console.log(error.message)})

但是上面的代码不能指定文件的读取顺序;

Promise 支持链式调用，从而来解决回调地狱的问题；以及顺序的问题；

thenFs.readFile('第一个要读取的文件路径','utf8')
.then((r1) => {console.log(r1)}
return thenFs.readFile('第二个要读取的文件路径','utf8')
)
.then((r2)=>{console.log(r2)}
return thenFs.readFile('第三个要读取的文件路径','utf8')
)
.then((r3)=>{console.log(r3)})

执行顺序是：r1,r2,r3

4、通过 .catch 捕获错误

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

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

5、promise .all() 方法

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

6、promise .race() 方法

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

7、基于Promise 封装读文件的方法

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

getFile 方法的基本定义

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

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

function getFile(fpath){
return new Promise(function(resolve,reject){
fs.readFile(fpath,'utf8',(err,dataStr)=>{})
})
getFile('要读取的文件路径')
.then((r1) =>{console.log(r1)
})
.catch((err)=>{console.log(err.message)})
}

三、async/await

1、什么是 async/await？

async/await 是ES8 引入的新语法，用来简化Promise 异步操作；

.then链式调用的优点：解决了回调地狱的问题；
.then 链式调用的缺点：代码冗余。阅读性差，不易理解

2、asynv/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()

【功能】：读取文件1，文件2，文件3