vue 第一次复习（前置知识）

Lotus_fragrance

已于 2022-09-22 14:50:02 修改

阅读量236

点赞数

文章标签：前端 javascript

于 2022-09-18 11:40:59 首次发布

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/126801363

版权

1. JavaScript 是单线程的语言

#博学谷IT学习技术支持#

一、ES6 模块化

ES6 模块化规范中定义：

每个 js 文件都是一个独立的模块

导入其它模块成员使用 import 关键字

向外共享模块成员使用 export 关键字

1.1 默认导出/导入

export default 默认导出的成员

let a = 10
let b = { a: 1, b: 3 }
function fun(a, b) {
    return a + b
}
// 向外导出成员对象
export default {
    a,
    b,
    fun
}

默认导入的语法： import 接收名称 from '模块标识符'

import sum from './01 导出文件.js'
console.log(sum);  //{ a: 10, b: { a: 1, b: 3 }, fun: [Function: fun] }

1.2 按需导出/导入

按需导出的语法： export 按需导出的成员

// 按需导出
export function fun(a, b) {
    return a * b
}

按需导入的语法： import { s1 } from '模块标识符'

// 按需导入
import { fun } from './02 按需导出.js'
console.log(fun); //[Function: fun]

按需导出与按需导入的注意事项

每个模块中可以使用多次按需导出

按需导入的成员名称必须和按需导出的名称保持一致

按需导入时，可以使用 as 关键字进行重命名

按需导入可以和默认导入一起使用

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

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

入并执行模块代码，示例代码如下：

// 直接导出文件
for (var i = 0; i < 10; i++) {
    console.log(i);
}

// 直接导入文件
import './03 直接导出文件.js'

二、Promise

2.1 回调地狱

setTimeout(function () {
    console.log(1);
    setTimeout(function () {
        console.log(2);
        setTimeout(function () {
            console.log(3);
            setTimeout(function () {
                console.log(4);
            }, 1000)
        }, 1000)
    }, 1000)
}, 1000)

回调地狱的缺点：

代码耦合性太强，牵一发而动全身，难以维护

大量冗余的代码相互嵌套，代码的可读性变差

1.2 Promise 的基本概念

基于 then-fs 读取文件内容

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

式。因此，需要先运行如下的命令，安装 then-fs 这个第三方包，从而支持我们基于 Promise 的方

式读取文件的内容

import thenFs from 'then-fs'
// 基于Promise 的方式读取文件
thenFs.readFile('./1.txt', 'utf8').then(r1 => {
    console.log(r1)
    // 返回一个Promise对象
    return thenFs.readFile('./2.txt', 'utf8')
}).then(r1 => {
    console.log(r1)
    return thenFs.readFile('./3.txt', 'utf8')
}).then(r1 => {
    console.log(r1)
}).catch(err => {
    // 捕捉读取文件时发生的错误
    console.log(err)
})

三、async/await

async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在

async/await 出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。

async/await 的基本使用

import thenFs from 'then-fs'
async function getFile() {
    const r1 = await thenFs.readFile('./1.txt', 'utf8')
    console.log(r1) //111
    const r2 = await thenFs.readFile('./2.txt', 'utf8')
    console.log(r2) //222
    const r3 = await thenFs.readFile('./3.txt', 'utf8')
    console.log(r3) //333
}
getFile()

async/await 的使用注意事项

如果在 function 中使用了 await，则 function 必须被 async 修饰

在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行

示例：

import thenFs from 'then-fs'

console.log('a')
async function getFile() {
    console.log('b')
    const r1 = await thenFs.readFile('./1.txt', 'utf8')
    console.log(r1)
    const r2 = await thenFs.readFile('./2.txt', 'utf8')
    console.log(r2)
    const r3 = await thenFs.readFile('./3.txt', 'utf8')
    console.log(r3)
    console.log('c')
}
getFile()
console.log('d')
// 打印的结果是：a b d 111 222 333 c

四、EventLoop

1. JavaScript 是单线程的语言

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

2. 同步任务和异步任务

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

同步任务（synchronous）

又叫做非耗时任务，指的是在主线程上排队执行的那些任务

只有前一个任务执行完毕，才能执行后一个任务

异步任务（asynchronous）

又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行

当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数

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

4. EventLoop 的基本概念

JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是

循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）。