diff --git a/404.html b/404.html index 35b1376a..add8e566 100644 --- a/404.html +++ b/404.html @@ -22,7 +22,7 @@

主题切换

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- + \ No newline at end of file diff --git "a/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html" "b/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html" index e70d94f6..04594425 100644 --- "a/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html" +++ "b/BackEnd/NodeJS/MongoDB\347\254\224\350\256\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、相关概念 ​

MongoDB是文档型的NoSQL数据库。

image-20220508194905648

image-20220507220553150

优点：

  1. 高性能

  2. 高可用性

  3. 可扩展分片集群

应用场景：（数据量大、读写操作频繁、对事务要求不高）

二、数据库操作 ​

查看所有数据库

sh
show databases
 show dbs
 #连接数据库后默认在test库
 use testdb01   #切换数据库
show databases
@@ -521,8 +521,8 @@
     required: true,
   },
 })
-module.exports = articleSchema
- +module.exports = articleSchema + \ No newline at end of file diff --git "a/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html" "b/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html" index 22bee452..d8c09e2c 100644 --- "a/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html" +++ "b/BackEnd/NodeJS/Node\345\244\247\346\226\207\344\273\266\344\270\212\344\274\240.html" @@ -21,11 +21,11 @@ -
ZerDocs

Node大文件上传 ​

  1. 创建文件唯一 HASH
  2. 发请求检查文件是否已传过
    1. 传过:提示'秒传成功'
    2. 未传过:开始切片并上传，创建任务池，循环上传切片
    3. 传过未传完:从下一切片开始传
  3. 上传完成，发送合并切片请求

Vue 前端代码 ​

vue
<template>
   <el-upload :http-request="customRequest">
     <template #trigger>
       <el-button type="primary">选择文件</el-button>
@@ -269,8 +269,8 @@
 .upload-demo {
   margin: 100px 100px;
 }
-</style>
- +</style> + \ No newline at end of file diff --git "a/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html" index 79f8430e..ba94f1b1 100644 --- "a/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html" +++ "b/BackEnd/NodeJS/Node\345\255\246\344\271\240\347\254\224\350\256\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、读取文件 ​

js
const fs = require('node:fs')
 fs.readFile('1.txt', 'utf8', (err, data) => {
   console.log('data: ', data) // 失败为undefined
   console.log('err: ', err) // 成功为null,否则为错误对象
@@ -989,8 +989,8 @@
 
 app.listen(8888, () => {
   console.log('Express server running at http://127.0.0.1:8888')
-})
- +}) + \ No newline at end of file diff --git "a/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html" "b/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html" index 6d77ebfb..cd81907d 100644 --- "a/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html" +++ "b/BackEnd/NodeJS/Node\347\256\200\345\215\225\344\270\212\344\274\240\346\226\207\344\273\266.html" @@ -21,11 +21,11 @@ -
ZerDocs

Node 简单上传文件 ​

Vue 前端代码 ​

vue
<script setup>
 import axios from 'axios'
 function onUpload(e) {
   const formData = new FormData()
@@ -171,8 +171,8 @@
 
 app.listen(3000, () => {
   console.log('server is running at http://localhost:3000')
-})

可以借助接口调试工具测试或直接访问：http://localhost:3000/upload/index

image-20230213141712478

image-20230213141820443

- +})

可以借助接口调试工具测试或直接访问：http://localhost:3000/upload/index

image-20230213141712478

image-20230213141820443

+ \ No newline at end of file diff --git "a/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html" index 7117910b..e0980644 100644 --- "a/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html" +++ "b/BackEnd/Server/Docker\345\255\246\344\271\240\347\254\224\350\256\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、解决痛点 ​

  1. 环境不一致
  2. 版本不一样
  3. 配置不一致，配置费力费时

    把源码+配置+环境+版本打包成镜像，装载在Dokcer容器引擎上，达到跨平台无缝接轨运作。 一次镜像，处处运行，从搬家到搬楼。

二、优点和应用 ​

  1. 便捷升级和快速扩容
  2. 更简单的系统运维
  3. 镜像小、更高效的计算资源
  4. 更快的应用交付和平缓迁移
  5. 利用宿主机内核，不需要加载操作系统OS内核

三、基本组成 ​

  1. 镜像：一个只读的模板，用于创建容器，一个镜像可以创建多个容器。
  2. 容器：镜像创建出来的虚拟化运行环境容器实例（简易的Linux环境）。
  3. 仓库：集中存放镜像的场所，分为公开库和私有库。

四、工作原理 ​

五、CentOS安装Docker ​

bash
sudo yum install -y yum-utils
 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
 sudo yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin
 docker version
@@ -241,8 +241,8 @@
 docker run -d -p 8082:8080 --network my_network --name tomcat82 tomcat
 #ip、域名互ping都能通（维护好主机和ip的关系）
docker run -d -p 8081:8080 --network my_network --name tomcat81 tomcat
 docker run -d -p 8082:8080 --network my_network --name tomcat82 tomcat
-#ip、域名互ping都能通（维护好主机和ip的关系）

十、容器编排 ​

意义：集中快速管理多个容器

1. 安装Compose ​

bash
curl -SL https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose
curl -SL https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose

2. 常用命令 ​

3. 安装 Portainer ​

- +#ip、域名互ping都能通（维护好主机和ip的关系）

十、容器编排 ​

意义：集中快速管理多个容器

1. 安装Compose ​

bash
curl -SL https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose
curl -SL https://github.com/docker/compose/releases/download/v2.14.2/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose

2. 常用命令 ​

3. 安装 Portainer ​

+ \ No newline at end of file diff --git "a/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html" index 23469068..fc9bbb19 100644 --- "a/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html" +++ "b/BackEnd/Server/Nginx\345\255\246\344\271\240\347\254\224\350\256\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、Nginx安装 ​

1.安装命令 ​

Ubuntuapt install nginx
CentOS(Red Hat系列)yum install nginx

2.Linux目录结构 ​

3.基础命令 ​

nginx -v/nginx -V查看nginx版本等信息
systemctl start/stop nginx启动/停止nginx
systemctl status nginx查看nginx运行状态
ps -ef | grep nginx查看nginx进程

| kill -QUIT 进程号 kill -TERM 进程号 | 从容停止 | | kill -TERM 进程号 kill -INT 进程号 | 快速停止 | | pkill -9 nginx | 强制停止 |

编写配置 ​

bash
nginx -t  #检查配置文件有没有问题
 grep -Ei  "\{|\}"   nginx.conf #检查配置文件括号配对问题
 nginx -s reload #重载配置
nginx -t  #检查配置文件有没有问题
 grep -Ei  "\{|\}"   nginx.conf #检查配置文件括号配对问题
@@ -35,8 +35,8 @@
 systemctl restart network #重启网络
ip a #查看网卡
 cd /etc/sysconfig/network-scripts
 vi ifcfg-ens160 #把ONBOOT=no ===> 改为yes
-systemctl restart network #重启网络
- +systemctl restart network #重启网络 + \ No newline at end of file diff --git "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" index 4dee103a..3cbb1c5f 100644 --- "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" +++ "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" @@ -21,11 +21,11 @@ -
ZerDocs

Angular基础总结一 ​

一、NgModule ​

WARNING

被@NgModule所装饰的类被称为angular module

@NgModule元数据 ​

  • declarations —— 该模块的依赖项（该模块用到的组件、指令、管道）。
  • imports —— 导入其他的ngModule。
  • providers —— 提供各种服务。
  • bootstrap —— 根组件，Angular 创建它并插入 index.html 宿主页面

declarations 数组 ​

js
1.模块中使用的组件必须先在declarations 数组中声名
 2.一个组件只能被一个模块声名
 3.在declarations中的组件默认只能在当前模块中使用，在其他模块使用必须exports导出
1.模块中使用的组件必须先在declarations 数组中声名
 2.一个组件只能被一个模块声名
@@ -399,8 +399,8 @@
   background-color: ##bfa;
 }
:host-context(.light) .title {
   background-color: ##bfa;
-}

样式模块化 ​

在 @Component 的元数据中指定的样式只会对该组件的模板生效

组件的样式不会影响到子组件中的模板

组件的样式不会影响到投影内容

视图封装模式 ​

ShadowDom -- 不进不出，没有样式能进来，组件样式出不去, 就自己玩

Emulated --只进不出， 默认选项，全局样式能进来，组件样式出不去

None -- 能进能出，此时组件的样式是全局生效的，注意与其他组件发生样式冲突，（对父组件样式也能生效）

- +}

样式模块化 ​

在 @Component 的元数据中指定的样式只会对该组件的模板生效

组件的样式不会影响到子组件中的模板

组件的样式不会影响到投影内容

视图封装模式 ​

ShadowDom -- 不进不出，没有样式能进来，组件样式出不去, 就自己玩

Emulated --只进不出， 默认选项，全局样式能进来，组件样式出不去

None -- 能进能出，此时组件的样式是全局生效的，注意与其他组件发生样式冲突，（对父组件样式也能生效）

+ \ No newline at end of file diff --git "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html" "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html" index 9dc04288..510bd0d6 100644 --- "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html" +++ "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\270\211.html" @@ -21,11 +21,11 @@ -
ZerDocs

组件投影 ​

📝shadow.component.html

html
<p>
   shadow works!
   <ng-content select=".head"></ng-content>
   <ng-content select="[attr-content]"></ng-content>
@@ -903,8 +903,8 @@
   ngOnInit(): void {
   }
 
-}
- +} + \ No newline at end of file diff --git "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html" "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html" index 5f8dc56d..13bf8d35 100644 --- "a/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html" +++ "b/Framework/Angular/Angular\345\237\272\347\241\200\346\200\273\347\273\223\344\272\214.html" @@ -21,11 +21,11 @@ -
ZerDocs

双向绑定 ​

1. 基本双向绑定 ​

方法一：

📝父组件：

typescript
import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -809,8 +809,8 @@
 export class AppComponent {
   size = 16;
   constructor() { }
-}

操作符 ​

管道 | ​

WARNING

模板变量可以通过一条或多条管道格式化数据，

默认的管道都是纯的，Angular 会忽略复合对象中的变化，即管道只会检查原始值或对象引用，

如果数组中的元素变化，增删改，引用没有变化，而不会执行管道的逻辑。

管道名称作用
DatePipe格式化日期
DecimalPipe数字转字符串，并可以指定格式
KeyValuePipe使ngFor可以循环Object或Map对象
JsonPipe将值转成json格式
TitleCasePipe把首字母大写，其它小写
SlicePipe截取Array或String
PercentPipe数字转百分比
LowerCasePipe转化为小写
UpperCasePipe转化为大写
AsyncPipe自动订阅模板中的Observable或Promise

安全链? ​

用于可能为空的引用需要使用时，对null、undefined进行保护，保证数据请求前能正常渲染模板

html
<p>{{person?.name}}</p>
<p>{{person?.name}}</p>

非空断言! ​

DANGER

在ts中，开启--strictNullChecks后，将一个可能是undefined或null的变量赋给一个有确切类型的变量时，会报错。在特定情况下，我们断定变量一定不是undefined或null，就可以使用非空断言操作符。

使用非空断言的两个步骤：

tsconfig.json中设置"strictNullChecks": true

tslint.json中设置 "no-non-null-assertion": false

类型转换函数$any() ​

绑定的表达式不能或很难指定类型时使用

假设无法确定item的类型，也就不能确定item是否有bestByDate，这时就会报错。

可以用$any()把item视为any类型，避免其报错（也可以用这个函数绑定组件中不存在的变量）

typescript
<p> {{$any(item).bestByDate}}</p>
<p> {{$any(item).bestByDate}}</p>
- +}

操作符 ​

管道 | ​

WARNING

模板变量可以通过一条或多条管道格式化数据，

默认的管道都是纯的，Angular 会忽略复合对象中的变化，即管道只会检查原始值或对象引用，

如果数组中的元素变化，增删改，引用没有变化，而不会执行管道的逻辑。

管道名称作用
DatePipe格式化日期
DecimalPipe数字转字符串，并可以指定格式
KeyValuePipe使ngFor可以循环Object或Map对象
JsonPipe将值转成json格式
TitleCasePipe把首字母大写，其它小写
SlicePipe截取Array或String
PercentPipe数字转百分比
LowerCasePipe转化为小写
UpperCasePipe转化为大写
AsyncPipe自动订阅模板中的Observable或Promise

安全链? ​

用于可能为空的引用需要使用时，对null、undefined进行保护，保证数据请求前能正常渲染模板

html
<p>{{person?.name}}</p>
<p>{{person?.name}}</p>

非空断言! ​

DANGER

在ts中，开启--strictNullChecks后，将一个可能是undefined或null的变量赋给一个有确切类型的变量时，会报错。在特定情况下，我们断定变量一定不是undefined或null，就可以使用非空断言操作符。

使用非空断言的两个步骤：

tsconfig.json中设置"strictNullChecks": true

tslint.json中设置 "no-non-null-assertion": false

类型转换函数$any() ​

绑定的表达式不能或很难指定类型时使用

假设无法确定item的类型，也就不能确定item是否有bestByDate，这时就会报错。

可以用$any()把item视为any类型，避免其报错（也可以用这个函数绑定组件中不存在的变量）

typescript
<p> {{$any(item).bestByDate}}</p>
<p> {{$any(item).bestByDate}}</p>
+ \ No newline at end of file diff --git "a/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" "b/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" index e48b36dc..c0ae7aa6 100644 --- "a/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" +++ "b/Framework/React/React\345\237\272\347\241\200\346\200\273\347\273\223\344\270\200.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、前置知识 ​

虚拟DOM ​

jsx
const VDOM = (/* 此处一定不要写引号，因为不是字符串 */
   <h1 id="title">
     <span>Hello,React</span>
   </h1>
@@ -504,8 +504,8 @@
     3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
        仅用于渲染列表用于展示，使用index作为key是没有问题的。
 
-3.  开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。2.如果确定只是简单的展示数据，用index也是可以的。
- +3. 开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。2.如果确定只是简单的展示数据，用index也是可以的。 + \ No newline at end of file diff --git "a/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.html" "b/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.html" index a2401380..b5c5e11c 100644 --- "a/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.html" +++ "b/Framework/Vitest/\346\265\213\350\257\225\346\265\201\347\250\213.html" @@ -21,11 +21,11 @@ -
ZerDocs

大致步骤 ​

  1. 准备数据
  2. 验证

准备数据 ​

数据的位置 ​

  1. 内联
  2. 隐式

准备方式 ​

  1. 后门(偷懒式)
js
it('should be ok', () => {
   // 通过后门的方式准备数据（不推荐：暴露逻辑结构，不利于后续维护）
   const todo = {
     id: 1,
@@ -73,8 +73,8 @@
       "console": "integratedTerminal"
     }
   ]
-}
  1. Vitest 插件
  2. vitest --ui
- +}
  1. Vitest 插件
  2. vitest --ui
+ \ No newline at end of file diff --git "a/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html" "b/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html" index d5aacae1..8df74ea1 100644 --- "a/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html" +++ "b/Framework/Vue/Vite\345\216\237\347\220\206\345\255\246\344\271\240.html" @@ -21,12 +21,12 @@ -
ZerDocs

Vite底层原理学习 ​

构建工具承担： ​

  1. 模块化开发支持：ES Module、CommonJS、AMD、CMD等
  2. 处理代码兼容性：babel语法降级，less/sass/stylus等语法转换
  3. 提升项目性能：压缩代码，合并代码，图片压缩，代码分割，懒加载，预加载等
  4. 优化开发体验：热更新，自动刷新，代理服务器，自动打开浏览器等
  5. 统一开发标准：eslint代码检查，prettier代码格式化，git提交规范等
+ \ No newline at end of file diff --git "a/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.html" "b/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.html" index 3d0ec677..2a35082f 100644 --- "a/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.html" +++ "b/Framework/Vue/Vue2\351\241\271\347\233\256\350\277\201\347\247\273Vite5.html" @@ -21,11 +21,11 @@ -
ZerDocs

迁移意义 ​

  1. 项目性能提升
  2. 开发体验优化
  3. 更好理解 Vite 原理

迁移步骤 ​

  1. 切换到新分支 git checkout -b vite，不成功还能回到原来的分支
  2. 删除 node_modules pnpm i rimraf -g rimraf node_modules
  3. 删除 package-lock.json rimraf package-lock.json
  4. 删除 package.json 中与 webpack 相关的开发依赖 (devDependencies)，配置 vite 脚本
  5. 安装 vite pnpm i vite -D
  6. 安装 vue2 支持插件 pnpm i @vitejs/plugin-vue2 -D
  7. 迁移 vue.config.js 到 vite.config.js
  8. 把 public/index.html 移动到根目录 index.html，并修改占位符 href="<%= BASE_URL %>favicon.ico"
  9. 语法转换：动态导入，浏览器环境获取环境变量

index.html 迁移 ​

webpack: public/index.html + .env
env
VUE_APP_TITLE=NAAS SDWAN
 BASE_URL=/xxx/admin
VUE_APP_TITLE=NAAS SDWAN
 BASE_URL=/xxx/admin
html
<!doctype html>
 <html lang="">
@@ -387,8 +387,8 @@
   base: process.env.BASE_URL, 
   base: import.meta.env.BASE_URL, 
   routes,
-})
- +}) + \ No newline at end of file diff --git "a/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html" "b/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html" index 766e9c3c..fcce4ff9 100644 --- "a/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html" +++ "b/Framework/Vue/Vue3\350\241\245\346\274\217\347\254\224\350\256\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

inheritAttrs ​

唯一一个需要用额外的 script 块书写的选项

$attrs

透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是 组件自定义事件的 attributes 和 事件处理函数。

html
<template>
   <Home :attr="12345" :val="false" />
 </template>
<template>
   <Home :attr="12345" :val="false" />
@@ -97,8 +97,8 @@
    }
     props: ['val']
   }
-</script>

image-20230219215510922

- +</script>

image-20230219215510922

+ \ No newline at end of file diff --git "a/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html" "b/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html" index ddc1b6f1..b69c1ed6 100644 --- "a/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html" +++ "b/Framework/Vue/\345\210\206\351\241\265\344\270\216\346\220\234\347\264\242\346\235\241\344\273\266\350\256\260\345\275\225\345\271\266\345\233\236\346\230\276\344\274\230\345\214\226.html" @@ -21,11 +21,11 @@ -
ZerDocs

分页与搜索条件记录并回显优化 ​

整体逻辑 ​

image-20230215205106488

Store ​

js
export default new Vuex.Store({
     state: {
         pageOptions: {
             background:true,
@@ -361,8 +361,8 @@
     handleCurrentChange(page) {
       this.currentChange(page)
     },
-   }
- + } + \ No newline at end of file diff --git "a/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html" "b/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html" index 0a9801a0..7c5e6eb9 100644 --- "a/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html" +++ "b/Framework/Vue/\345\210\227\350\241\250\346\234\200\345\220\216\344\270\200\346\235\241\346\225\260\346\215\256\345\210\240\351\231\244\345\244\204\347\220\206.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、删除最后一条数据跳转到上一页 ​

方案一

js
/*
 paginationOptions: {
     currentPage: 1,
     pageSize: 10,
@@ -103,8 +103,8 @@
             message: `账号${name}删除失败`,
         })
     }
-},
- +}, + \ No newline at end of file diff --git "a/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.html" "b/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.html" index 82b563a8..7b936084 100644 --- "a/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.html" +++ "b/Framework/Vue/\347\275\221\347\253\231\346\267\273\345\212\240 PWA.html" @@ -21,11 +21,11 @@ -
ZerDocs

PWA 优点 ​

  • 可以让网站像原生应用一样被添加到主屏幕上
  • 可以离线访问
  • 可以接收推送系统级通知

原理 ​

通过 JS 主线程注册 Service Worker 线程，Service Worker 线程拦截网络请求， 从缓存中读取资源，如果没有缓存则从网络请求资源，然后将资源返回给主线程，主线程再将资源返回给浏览器渲染。

配置 ​

在 Vite+Vue3 项目中，借助vite-plugin-pwa插件，可以很方便的配置 PWA。

1.安装插件 ​

zsh
pnpm i vite-plugin-pwa -D
pnpm i vite-plugin-pwa -D

2.配置插件 ​

js
export default defineConfig(({ _, mode }) => {
   return {
     plugins: [
       // 其他插件 ...
@@ -81,8 +81,8 @@
       }),
     ]
   }
-})

3.调整图标，放在 public 目录下 ​

TIP

图标放在 public 目录下，若网站是部署在二级目录下，则需要加上二级目录名 如：

- +})

3.调整图标，放在 public 目录下 ​

TIP

图标放在 public 目录下，若网站是部署在二级目录下，则需要加上二级目录名 如：

+ \ No newline at end of file diff --git "a/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html" "b/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html" index 2b6b8a54..e43d712e 100644 --- "a/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html" +++ "b/FrontEnd/CSS/Grid\345\270\203\345\261\200\345\255\246\344\271\240\347\254\224\350\256\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

Grid布局学习笔记 ​

实用网站 ​

基本概念 ​

image-20230216202917923

image-20230216203121127

容器属性 ​

开启 Grid布局 ​

css
.box {
   display: grid;
 }
.box {
   display: grid;
@@ -257,8 +257,8 @@
   justify-self: start | end | center | stretch;
   align-self: start | end | center | stretch;
   /* 简写 place-self: <align-self> <justify-self>; */
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html" "b/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html" index 7fe4c489..091ce7d9 100644 --- "a/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html" +++ "b/FrontEnd/CSS/\345\270\270\347\224\250\344\273\243\347\240\201\346\256\265.html" @@ -21,11 +21,11 @@ -
ZerDocs

CSS常用代码段 ​

单行与多行溢出隐藏 ​

css
.text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -209,8 +209,8 @@
 input:-internal-autofill-previewed,
 input:-internal-autofill-selected {
   transition: background-color 999999999s !important;
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html" "b/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html" index 5db6e22f..99c4c40e 100644 --- "a/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html" +++ "b/FrontEnd/CSS/\346\217\255\347\247\230\350\257\273\344\271\246\346\221\230\350\246\201.html" @@ -21,11 +21,11 @@ -
ZerDocs

妙妙怪的《CSS 揭秘》读书摘要 ​

看这本书前：看书，现在短视频时代，正经人谁看书啊，要看也是看视频教程和大佬博客啊！

看完这本后：似乎有一点香！(轻松有趣)

从这本书字里行间可以感受到作者也是个有趣的灵魂。

看了这本书知识浅显易懂、挺有趣的，重新让我拾回看书的一些兴趣；

这本书让我感受到 CSS 一些巧妙的技巧，故摘抄以便往后快捷运用。

背景与边框 ​

多重边框 ​

css
box-shadow:
   0 0 0 10px #655,
   0 0 0 15px deeppink,
   0 2px 5px 15px #ccc;
box-shadow:
@@ -431,8 +431,8 @@
   100% {
     opacity: 0;
   }
-}

2023-02-04 16.57.27

- +}

2023-02-04 16.57.27

+ \ No newline at end of file diff --git "a/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html" "b/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html" index 8540efdf..d69c9016 100644 --- "a/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html" +++ "b/FrontEnd/Git/Git\345\270\270\347\224\250\346\223\215\344\275\234.html" @@ -21,11 +21,11 @@ -
ZerDocs

Git常用操作 ​

拉取最新提交 ​

zsh
  git fetch -p  #或 git fetch -p origin
  git fetch -p  #或 git fetch -p origin

git fetch -p （或者 --prune）命令用于从远程仓库中拉取最新的提交记录，同时也会删除 本地不存在的远程分支；不会更新本地分支和远程分支之间的关联关系，需要手动执行 git merge 或 git rebase 命令，或者使用 git pull 命令。例：删除远程 dev分支后，使用此命令，本地的远程分支也会被清理。

git fetch 命令用于将远程仓库中的最新提交记录拉取到本地仓库中，但是不会自动合并（merge）这些提交；不会删除本地不存在的远程分支，可能会导致本地分支列表过长，不便于管理。

删除远程分支 ​

zsh
git branch / git branch -r        #列出所有本地/远程分支
 git branch -D 分支名              #删除本地库分支
 git push origin --delete 分支名   #删除远程库分支
git branch / git branch -r        #列出所有本地/远程分支
 git branch -D 分支名              #删除本地库分支
@@ -147,8 +147,8 @@
   "path": "cz-conventional-changelog"
 }
{
   "path": "cz-conventional-changelog"
-}

作用：提交代码并生成变更日志

使用 commitizen 提交代码时，会自动启动 cz-conventional-changelog 插件，

并根据 conventional-commit 规范提示用户输入提交信息。

输入完毕后，会自动将提交信息转换成符合规范的格式，并将其写入到 CHANGELOG.md 文件中。

浅克隆 github 仓库，push 到 gitee 仓库 ​

报错：

! [remote rejected] main -> main (shallow update not allowed) :::

zsh
git fetch --unshallow origin  # 取消浅克隆，拉取完整的仓库
git fetch --unshallow origin  # 取消浅克隆，拉取完整的仓库

Git Module ​

拉取依赖其他模块的项目时，需要初始化子模块，下列两种方式均可：

  1. git clone --recursive https://github.com/xxx/yyy.git
  2. git clone https://github.com/xxx/yyy.git，git submodule update --init --recursive
- +}

作用：提交代码并生成变更日志

使用 commitizen 提交代码时，会自动启动 cz-conventional-changelog 插件，

并根据 conventional-commit 规范提示用户输入提交信息。

输入完毕后，会自动将提交信息转换成符合规范的格式，并将其写入到 CHANGELOG.md 文件中。

浅克隆 github 仓库，push 到 gitee 仓库 ​

报错：

! [remote rejected] main -> main (shallow update not allowed) :::

zsh
git fetch --unshallow origin  # 取消浅克隆，拉取完整的仓库
git fetch --unshallow origin  # 取消浅克隆，拉取完整的仓库

Git Module ​

拉取依赖其他模块的项目时，需要初始化子模块，下列两种方式均可：

  1. git clone --recursive https://github.com/xxx/yyy.git
  2. git clone https://github.com/xxx/yyy.git，git submodule update --init --recursive
+ \ No newline at end of file diff --git "a/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html" "b/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html" index 0a7a5971..a29b65ee 100644 --- "a/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html" +++ "b/FrontEnd/Git/Terminal\347\273\210\347\253\257\347\276\216\345\214\226.html" @@ -21,11 +21,11 @@ -
ZerDocs

安装Oh My Posh ​

可以先去Microsofe Store 安装winget，会比较方便

bash
winget install JanDeDobbeleer.OhMyPosh
winget install JanDeDobbeleer.OhMyPosh

安装完:

会在C:\Users\自己用户名\AppData\Local\Programs\oh-my-posh\themes>有很多主题

预览所有主题命令 ​

bash
Get-PoshThemes
Get-PoshThemes

image-20220426123111651

初始化并应用主题 ​

bash
oh-my-posh --init --shell pwsh --config "自己的安装目录\oh-my-posh\themes\schema.json" | Invoke-Expression
 #schema.json ---- 选择themes目录下的一款主题文件
oh-my-posh --init --shell pwsh --config "自己的安装目录\oh-my-posh\themes\schema.json" | Invoke-Expression
 #schema.json ---- 选择themes目录下的一款主题文件

分隔符乱码问题 ​

但会发现分隔符会有乱码的问题

乱码问题解决方式:

安装Nerd Fonts字体，在Terminal>Power Shell选择自己安装的字体，保存重启就生效啦。

PS：刚开始以为没有我常用的JetBrain Mono字体,就没在意这种解决方案,没想到里面字体挺丰富.

配置PowerShell ​

因为应用的主题只在当前窗口有效果，所以需要配置每次PowerShell启动时都会执行应用主题的脚本

1.打开配置文件方式一 ​

  • 获取到PowerShell配置文件绝对路径
bash
$PROFILE
$PROFILE

image-20220426124525580

  • 找到这个文件位置，打开并添加需要Power Shell启动时执行的脚本，保存文件重新打开Terminal看效果
bash
oh-my-posh --init --shell pwsh --config "自己的安装目录\oh-my-posh\themes\schema.json" | Invoke-Expression
oh-my-posh --init --shell pwsh --config "自己的安装目录\oh-my-posh\themes\schema.json" | Invoke-Expression

2.打开配置文件方式二 ​

如果安装了VS Code，如下命令可以直接打开Power Shell配置文件

bash
code $PROFILE
code $PROFILE

自定义主题 ​

可借鉴的up主题文件：https://gitee.com/NilTor/public/blob/master/oh-my-posh-config.json

更多配置可查看官网配置文档

VS Code终端配置 ​

没有配置打开VS Code终端报错:

bash
The term 'oh-my-posh' is not recognized as a name of a cmdlet, function, script file, or executable program. Check the spelling of the name, or if a path was included, verify
      | that the path is correct and try again.
The term 'oh-my-posh' is not recognized as a name of a cmdlet, function, script file, or executable program. Check the spelling of the name, or if a path was included, verify
@@ -53,8 +53,8 @@
   "source": "Windows.Terminal.PowershellCore",
   "commandline": "C:\\Program Files\\WindowsApps\\Microsoft.PowerShell_7.2.2.0_x64__8wekyb3d8bbwe\\pwsh.exe -NoLogo",
   "startingDirectory": null
-}

image-20220426233614912

- +}

image-20220426233614912

+ \ No newline at end of file diff --git "a/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.html" "b/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.html" index efcffd74..6711109e 100644 --- "a/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.html" +++ "b/FrontEnd/Git/\351\205\215\347\275\256 Ubuntu \346\234\215\345\212\241\345\231\250\345\205\215\345\257\206\347\231\273\345\275\225.html" @@ -21,11 +21,11 @@ -
ZerDocs

1.生成公钥和私钥 ​

bash
cd ~/.ssh # 进入.ssh目录
 ssh-keygen
 # 第一步输入生成的公、私钥文件名，例如：aws-root
 # 密码不用填 直接回车
cd ~/.ssh # 进入.ssh目录
@@ -69,8 +69,8 @@
 Host 192.227.112.172
 HostName 192.227.112.172
 User root
-IdentityFile ~/.ssh/aws-root

6.大功告成，可以每次轻松愉快一键连接远程服务器啦！ ​

注意：若同时安装了 Remote Repositories 和 Remote - SSH 插件，需要在最顶部进行选择切换到 Remote - SSH 插件，并点击顶部刷新按钮，这样才能看到 ssh/config 文件配置的所有主机。

- +IdentityFile ~/.ssh/aws-root

6.大功告成，可以每次轻松愉快一键连接远程服务器啦！ ​

注意：若同时安装了 Remote Repositories 和 Remote - SSH 插件，需要在最顶部进行选择切换到 Remote - SSH 插件，并点击顶部刷新按钮，这样才能看到 ssh/config 文件配置的所有主机。

+ \ No newline at end of file diff --git "a/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html" "b/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html" index 6b85fda7..f27ad217 100644 --- "a/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html" +++ "b/FrontEnd/Git/\351\205\215\347\275\256\345\244\232\344\270\252\345\271\263\345\217\260SSH.html" @@ -21,11 +21,11 @@ -
ZerDocs

1.生成公钥和私钥 ​

bash
ssh-keygen -t rsa -C '88888@qq.com'  #换成自己邮箱,可以随便填,相当于一个标识
 #密码不用填 直接回车
ssh-keygen -t rsa -C '88888@qq.com'  #换成自己邮箱,可以随便填,相当于一个标识
 #密码不用填 直接回车

image-20220416211353115

ls 查看生成的文件

image-20220416212417100

2.在代码托管平台设置公钥 （一般在：设置 ---> SSH） ​

  • 查看生成的公钥.pub文件 例如: cat github.pub
  • 复制对应公钥所有内容 ，在 github/gitee/gitlab 分别添加

3. 配置 SSH，创建 config 文件，打开编辑 ​

注意：文件名就是 config，没有文件后缀，编辑完保存前记得去掉注释

定义一系列 SSH 连接的配置信息，当你使用 SSH 连接到这些平台时，SSH 客户端会根据这个配置文件选择正确的私钥进行身份验证。

bash
Host github.com   #Github主机地址
 HostName github.com   #Github主机名
@@ -77,8 +77,8 @@
 
 ssh -T git@github.com
 
-ssh -T git@gitlab.xxx.cn

SSH公钥私钥加密解密原理 ​

- +ssh -T git@gitlab.xxx.cn

SSH公钥私钥加密解密原理 ​

+ \ No newline at end of file diff --git "a/FrontEnd/JavaScript/async\344\270\216await.html" "b/FrontEnd/JavaScript/async\344\270\216await.html" index a7a34e08..b08755a3 100644 --- "a/FrontEnd/JavaScript/async\344\270\216await.html" +++ "b/FrontEnd/JavaScript/async\344\270\216await.html" @@ -21,11 +21,11 @@ -
ZerDocs

Javascript实现异步 ​

INFO

Javascript是单线程执行语言

方式一：回调函数 ​

js
const timer = setTimeout(() => {
   console.log('3秒后打印的')
 }, 3000)
 console.log('比setTimeout回调函数先执行')
@@ -235,8 +235,8 @@
 		//...
    } //等待所有异步操作执行完毕在执行后面代码
     console.log('done')
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html" "b/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html" index 9e8e5373..e07f6cd8 100644 --- "a/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html" +++ "b/FrontEnd/JavaScript/\344\273\243\347\240\201\345\210\206\346\224\257\344\274\230\345\214\226.html" @@ -21,11 +21,11 @@ -
ZerDocs

if else 多分支优化 ​

简单分支 ​

js
//优化前
 function speak(name){
   if(name==='老牛'){
     console.log('老牛哞哞叫')
@@ -141,8 +141,8 @@
   }else {
     console.log('xxx')
   }
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" "b/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" index 3556d80b..8ef08e4e 100644 --- "a/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" +++ "b/FrontEnd/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.html" @@ -21,11 +21,11 @@ -
ZerDocs

JS 图片懒加载 ​

方案一：监听滚动 ​

TIP

监听图片顶部到达视口底部，把自定义属性 data-src赋值给src

js
const images = document.querySelectorAll('img')
 window.addEventListener('scroll', (e) => {
   images.forEach(
     (image) => {
@@ -75,8 +75,8 @@
 const observer = new IntersectionObserver(callback)
 images.forEach((image) => {
   observer.observe(image)
-})
- +}) + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html" "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html" index 7472dc17..d0d179b4 100644 --- "a/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html" +++ "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\270\200.html" @@ -21,11 +21,11 @@ -
ZerDocs

1.算术运算符 ​

隐式类型转换

除了加法和其他字符串运算时，它先将其他值转为字符串，在进行拼接；其他运算它先将其他值转为数字，在进行运算

js
a = 10 - '5' // 5
 a = 10 - true // 9
 a = 10 - false // 10
 a = 10 - undefined // NaN
@@ -131,8 +131,8 @@
 Object
// 原始值(7种):
 Number, String, Boolean, Null, Undefined, BigInt, Symbol
 // 引用值(对象)
-Object
- +Object + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html" "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html" index cad8ba0a..44d117b0 100644 --- "a/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html" +++ "b/FrontEnd/JavaScript/\345\237\272\347\241\200\345\244\215\344\271\240\344\272\214.html" @@ -21,11 +21,11 @@ -
ZerDocs

this指向 ​

根据函数调用方式的不同，this的值也不同：

TIP

  1. 以函数形式调用，this是window
  2. 以方法形式调用, this是调用方法的对象
  3. 构造函数中，this是新建的对象
  4. 箭头函数没有自己的this, 由外层作用域决定
  5. 通过call和apply调用的函数，它们的第一个参数就是函数的this
  6. 通过bind返回的函数，this由bind第一个参数决定（无法修改）
js
function fn() {
   console.log(this) // window
 }
 const obj = {
@@ -437,8 +437,8 @@
      newInstance.__proto__ = MyClass.prototype
      this = newInstance
      return newInstance */
-}

对象的分类：

  1. 内建对象: 由ES标准所定义的对象
  2. 宿主对象: 由浏览器提供的对象
  3. 自定义对象: 由开发人员自己创建的对象(Vue, React)
- +}

对象的分类：

  1. 内建对象: 由ES标准所定义的对象
  2. 宿主对象: 由浏览器提供的对象
  3. 自定义对象: 由开发人员自己创建的对象(Vue, React)
+ \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html" "b/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html" index 7c133c6b..e1ca73f9 100644 --- "a/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html" +++ "b/FrontEnd/JavaScript/\345\270\270\350\247\201\347\256\227\346\263\225.html" @@ -21,11 +21,11 @@ -
ZerDocs

括号匹配 ​

js
const str1 = '{[]}' // true
 const str2 = '{[[]}' // false
 const str3 = '{[]}[' // false
 const str4 = '{[()]}' // true
const str1 = '{[]}' // true
@@ -1721,8 +1721,8 @@
     .join("");
 }
 const n = bigChinese(1000100001); // 拾億零壹拾萬零壹
-console.log("[ n ]-66", n);
- +console.log("[ n ]-66", n); + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html" "b/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html" index d85a0317..ca466963 100644 --- "a/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html" +++ "b/FrontEnd/JavaScript/\346\211\213\345\206\231Promise.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、声名Promise并绑定this ​

js
class Promise {
   // 1.定义三个状态
   static PENDING = 'pending'
   static FUFILLED = 'fulfilled'
@@ -1185,8 +1185,8 @@
       })
     })
   }
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html" "b/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html" index 82ea139a..5bfe56e5 100644 --- "a/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html" +++ "b/FrontEnd/JavaScript/\346\225\260\346\215\256\345\216\273\351\207\215.html" @@ -21,11 +21,11 @@ -
ZerDocs

去重的核心：要根据实际业务怎么定义'重'

基本数据类型 ​

js
const arr = [1, 2, 1, 3];
 //用Set去重
 const uniqueArr = [...new Set(arr)]; // [1, 2, 3]
 //用filter去重
@@ -569,8 +569,8 @@
     }
   }
 ]
-// uniqueArr(objArr1)
- +// uniqueArr(objArr1) + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html" "b/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html" index 264d3901..f34b3f8c 100644 --- "a/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html" +++ "b/FrontEnd/JavaScript/\346\225\260\347\273\204\346\261\202\351\233\206\345\220\210.html" @@ -21,11 +21,11 @@ -
ZerDocs

JS常用的求交集、并集、差集的方法 ​

普通数组 ​

示例数组

js
const a = [1, 2, 3]
 const b = [4, 3, 2]
const a = [1, 2, 3]
 const b = [4, 3, 2]

一、并集(A∪B) ​

js
//方法一：
 ;
@@ -183,8 +183,8 @@
 const diff = (arr1, arr2) => arr1.filter(i => arr2.every(j => i.id !== j.id))
 //  const diff = (arr1, arr2) =>  arr1.filter(i => !arr2.some(j => i.id === j.id))
// 找出arr1数组中，arr2数组没有的对象
 const diff = (arr1, arr2) => arr1.filter(i => arr2.every(j => i.id !== j.id))
-//  const diff = (arr1, arr2) =>  arr1.filter(i => !arr2.some(j => i.id === j.id))
- +// const diff = (arr1, arr2) => arr1.filter(i => !arr2.some(j => i.id === j.id)) + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html" "b/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html" index 97cde193..d26a4b2a 100644 --- "a/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html" +++ "b/FrontEnd/JavaScript/\346\226\207\344\273\266\347\263\273\347\273\237.html" @@ -21,11 +21,11 @@ -
ZerDocs

Blob与 File ​

js
const blob = new Blob(['1,2,3'])
 const file = new File(['1,2,3'], 'test.txt', { type: 'text/plain' })
const blob = new Blob(['1,2,3'])
 const file = new File(['1,2,3'], 'test.txt', { type: 'text/plain' })

ArrayBuffer ​

js
const blob = new Blob(['1,2,3'])
 const file = new File(['1,2,3'], 'test.txt', { type: 'text/plain' })
@@ -195,8 +195,8 @@
     url.value = e.target?.result as string
   }
   fr.readAsDataURL(await response.blob())
-}

源码地址

参考资料 ​

MDN Blob API 参考
MDN File API 参考
谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64

- +}

源码地址

参考资料 ​

MDN Blob API 参考
MDN File API 参考
谈谈JS二进制：File、Blob、FileReader、ArrayBuffer、Base64

+ \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.html" "b/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.html" index 0f21ab2b..7ebca778 100644 --- "a/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.html" +++ "b/FrontEnd/JavaScript/\346\230\223\346\267\267\346\267\206\347\232\204\344\275\215\347\275\256\345\261\236\346\200\247.html" @@ -21,11 +21,11 @@ -
ZerDocs

易混淆的位置属性 ​

clientWidth、clientLeft、offsetWidth、offsetLeft、screenX、scrollWidth、innerWidth、pageX ​

js
clientWidth = width + padding // 元素内部宽度
 clientLeft = left + margin + border // 元素内部左边距
 
 offsetWidth = width + padding + border + scrollbar
@@ -45,8 +45,8 @@
 
 e.pageX // 鼠标相对于文档的水平偏移量
 
-getBoundingClientRect() // 返回盒模型信息及其相对于视口的位置
- +getBoundingClientRect() // 返回盒模型信息及其相对于视口的位置 + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html" "b/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html" index 18bfefb1..65032e38 100644 --- "a/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html" +++ "b/FrontEnd/JavaScript/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.html" @@ -21,11 +21,11 @@ -
ZerDocs

资料参考：LearnRegex ​

应用场景 ​

  1. 表单校验
  2. 字符串匹配和替换、解析(vue模板解析)

可视化工具： ​

  1. Regulex
  2. Regexper

1. 或者 | ​

javascript
const tel = '020-99999999'
 console.log(/(010|020)-\d{8}/.test(tel))// true
const tel = '020-99999999'
 console.log(/(010|020)-\d{8}/.test(tel))// true

2. 原子表[]、原子组() ​

javascript
//原子表
 let reg = /[123456]/ //出现在其中就匹配成功
@@ -257,8 +257,8 @@
 
 ?<! //前面不是数字
 let reg = /(?<!\d+)[a-z]+/i
-'baidu88baidu'.match(reg) //baidu

将链接替换为想要的网址 ​

image.png ​

将不含oss的替换 ​

image.png ​

模糊电话后四位 ​

image.png ​

案例练习 ​

替换练习 ​

image.png ​

给原子组起别名 ​

image.png ​

- +'baidu88baidu'.match(reg) //baidu

将链接替换为想要的网址 ​

image.png ​

将不含oss的替换 ​

image.png ​

模糊电话后四位 ​

image.png ​

案例练习 ​

替换练习 ​

image.png ​

给原子组起别名 ​

image.png ​

+ \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html" "b/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html" index 819a1bd1..62afdbb9 100644 --- "a/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html" +++ "b/FrontEnd/JavaScript/\350\216\267\345\217\226\347\233\256\345\275\225\347\273\223\346\236\204.html" @@ -21,11 +21,11 @@ -
ZerDocs

获取目录结构(纯前端) ​

vue
 <button @click="onSelectDir" class="select-btn">
 选择文件夹
 </button>
 <button @click="onSelectDir" class="select-btn">
 选择文件夹
@@ -121,8 +121,8 @@
       await getDirData(entry, children)
     }
   }
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html" "b/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html" index 8f1c0027..6be2b1ef 100644 --- "a/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html" +++ "b/FrontEnd/JavaScript/\351\253\230\351\230\266\345\207\275\346\225\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

高阶函数之filter ​

定义 ​

  • 通过提供函数实现的依次测试的所有元素，true 则表示通过，如果为 false 则失败。
  • 返回值是一个新数组，由通过测试为 true 的所有元素组成
  • 如果没有任何数组元素通过测试，则返回空数组。

TIP

  1. 原始数组不发生改变
  2. 不会对空数组进行检测
  3. 满足条件的留下，是对原数组的过滤。

语法 ​

js
array.filter(function(currentValue, index, arr), thisValue)
 //currentValue  必须，遍历到的当前元素值
 //index         可选，当前元素的索引值
 //arr           可选，当前元素属于的数组对象
array.filter(function(currentValue, index, arr), thisValue)
@@ -357,8 +357,8 @@
 }
 const lenArray = mapForEach(strArray, str => str.length)
 
-console.log(lenArray) // [10,3,4,1,6]
- +console.log(lenArray) // [10,3,4,1,6] + \ No newline at end of file diff --git "a/FrontEnd/Other/Mac\347\263\273\347\273\237\347\216\257\345\242\203\345\277\253\351\200\237\346\220\255\345\273\272.html" "b/FrontEnd/Other/Mac\347\263\273\347\273\237\347\216\257\345\242\203\345\277\253\351\200\237\346\220\255\345\273\272.html" index 0d29cba5..966bb277 100644 --- "a/FrontEnd/Other/Mac\347\263\273\347\273\237\347\216\257\345\242\203\345\277\253\351\200\237\346\220\255\345\273\272.html" +++ "b/FrontEnd/Other/Mac\347\263\273\347\273\237\347\216\257\345\242\203\345\277\253\351\200\237\346\220\255\345\273\272.html" @@ -21,11 +21,11 @@ -
ZerDocs

Mac系统环境快速搭建 ​

本文记录一下重装系统后，个人 Mac 环境快速搭建步骤。

一、安装 HomeBrew，并设置清华源 ​

zsh
#  从国内源安装 Homebrew
 
 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
#  从国内源安装 Homebrew
 
@@ -73,8 +73,8 @@
 git clone https://github.com/zsh-users/zsh-completions
 git clone https://github.com/zdharma-continuum/fast-syntax-highlighting.git

配置 ZSH 主题： 安装P10K，或 starship ​

删除 ABC 输入法 ​

  1. 进入 App Store， 安装 PlistEdit Pro

  2. M1 芯片电脑开机时长按电源，直至进入 '启动项 -> 选项 -> 点头像-> 下一步 -> 点顶部使用工具 -> 终端'

zsh
csrutil disable # 选 yes ，输入密码
 csrutil status  # 查看是否禁用成功
csrutil disable # 选 yes ，输入密码
-csrutil status  # 查看是否禁用成功
  1. 重启后终端输入 sudo open ~/Library/Preferences/com.apple.HIToolbox.plist，输入开机密码，打开的文件全部展开，删除所有 Value 是 ABC 的项，保存配置（顶部菜单栏点 File -> Save 或 CMD + S），重启电脑
- +csrutil status # 查看是否禁用成功
  1. 重启后终端输入 sudo open ~/Library/Preferences/com.apple.HIToolbox.plist，输入开机密码，打开的文件全部展开，删除所有 Value 是 ABC 的项，保存配置（顶部菜单栏点 File -> Save 或 CMD + S），重启电脑
+ \ No newline at end of file diff --git "a/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.html" "b/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.html" index 4a3e79d7..4ccc0597 100644 --- "a/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.html" +++ "b/FrontEnd/Other/package\346\226\207\344\273\266\350\257\246\350\247\243.html" @@ -21,11 +21,11 @@ -
ZerDocs
json
{
   "name": "theme-vitesse-dark-custom", // 包名，扩展ID: publisher.name
   "displayName": "Vitesse Dark Custom", // 发布扩展显示的名称
   "version": "0.0.10", // 和 name 组成唯一标识
@@ -215,8 +215,8 @@
   },
   "preview": true,
   "private": true // 私有包:会被拒绝发布到npm
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html" "b/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html" index 8c0159b9..d32807c8 100644 --- "a/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html" +++ "b/FrontEnd/Shell/\350\207\252\345\212\250\351\203\250\347\275\262\350\204\232\346\234\254.html" @@ -21,11 +21,11 @@ -
ZerDocs

自动部署 ​

脚本 ​

sh
#!/usr/bin/env sh
 
 set -e
 
@@ -195,8 +195,8 @@
           # Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错
           gitee-repo: ${{ env.REPO_NAME }}
           # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
-          branch: gh-pages
- + branch: gh-pages + \ No newline at end of file diff --git "a/FrontEnd/Shell/\350\216\267\345\217\226\351\241\265\351\235\242\346\211\200\346\234\211\345\237\237\345\220\215\345\271\266\345\216\273\351\207\215.html" "b/FrontEnd/Shell/\350\216\267\345\217\226\351\241\265\351\235\242\346\211\200\346\234\211\345\237\237\345\220\215\345\271\266\345\216\273\351\207\215.html" index 58addda7..28cc7b96 100644 --- "a/FrontEnd/Shell/\350\216\267\345\217\226\351\241\265\351\235\242\346\211\200\346\234\211\345\237\237\345\220\215\345\271\266\345\216\273\351\207\215.html" +++ "b/FrontEnd/Shell/\350\216\267\345\217\226\351\241\265\351\235\242\346\211\200\346\234\211\345\237\237\345\220\215\345\271\266\345\216\273\351\207\215.html" @@ -21,11 +21,11 @@ -
ZerDocs

获取当前页所有域名并写入剪切板 ​

js
javascript:(async function () {
   const domains = new Set()
   window.performance.getEntriesByType('resource').forEach((resource) => {
     const url = new URL(resource.name)
@@ -101,8 +101,8 @@
   const output = Array.from(new Set(matches)).join('\n')
   console.log('%c字符串：\n', 'color: green; font-weight: bold;', output)
   copy(output)
-})()
- +})() + \ No newline at end of file diff --git "a/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html" "b/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html" index 6d355680..ac66a7ca 100644 --- "a/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html" +++ "b/FrontEnd/TypeScript/\345\210\235\345\255\246\347\254\224\350\256\260.html" @@ -21,11 +21,11 @@ -
ZerDocs

基础语法 ​

一、基础类型 ​

JS类型 ​

js
boolean
 number
 string
 array
@@ -1007,8 +1007,8 @@
         }
     ]
 }
-...
- +... + \ No newline at end of file diff --git "a/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html" "b/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html" index b539536e..99ee5b0e 100644 --- "a/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html" +++ "b/FrontEnd/TypeScript/\350\277\233\351\230\266\344\275\277\347\224\250\346\212\200\345\267\247.html" @@ -21,11 +21,11 @@ -
ZerDocs

松散类型自动推推导 ​

ts
//1.
 type Size = "sm" | "xs"
 
 interface IconProps {
@@ -77,8 +77,8 @@
 type LooseAutoComplete<T extends string> = T | Omit<string, T>
 interface IconProps {
   size:Size // size 可以推导为 "sm" | "xs" | string ,保留模版类型提示
-}
- +} + \ No newline at end of file diff --git "a/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html" "b/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html" index cb87443a..0aab0c46 100644 --- "a/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html" +++ "b/FrontEnd/TypeScript/\351\205\215\347\275\256\346\226\207\344\273\266\350\257\246\350\247\243.html" @@ -21,11 +21,11 @@ -
ZerDocs

Typescript 配置文件（tsconfig.json）解析 ​

TypeScript带来的类型系统以及强大的IDE支持，让前端开发也变得严谨而流畅。但TypeScript不是原生的Javascript代码，需要进行编译才能转换为Javascript代码。

tsconfig.json是编译TypeScript的配置文件，对书写TypeScript代码十分重要。因为有些选项如果你没配置，则需要严格按照TypeScript的规则来书写，对初期使用TypeScript的同学而言，稍不留神就会书写出不符合规则的代码，从而导致编译报错，打击自信心。其实早期可以通过关闭一些规则设置，从而更愉快的从js转为ts开发。笔者根据项目实战经历来解释一些常用的编译选项，文末也会附上笔者整理的所有tsconfig.json选项的解释。

1. experimentalDecorators ​

是否启用实验性的ES装饰器。boolean类型，默认值：false。官方解释(opens new window)

TypeScript和ES6中引入了Class的概念，同时在stage 2 proposal (opens new window)提出了Java等服务器端语言早就有的装饰器模式。通过引入装饰器模式，能极大简化书写代码，把一些通用逻辑封装到装饰器中。很多库都有用到该特性，比如vue-class-component 及 vuex-class等库。当你使用这些库时，必须开启experimentalDecorators。

ts
function f() {
     console.log("f(): evaluated");
     return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
         console.log("f(): called");
@@ -289,8 +289,8 @@
   "extends": "./config/base",
   // 让IDE在保存文件的时候根据tsconfig.json重新生成文件
   "compileOnSave": true // 支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件
-}
- +} + \ No newline at end of file diff --git a/GoodTool/index.html b/GoodTool/index.html index 18121e29..5b0d8b90 100644 --- a/GoodTool/index.html +++ b/GoodTool/index.html @@ -26,7 +26,7 @@

主题切换

- + \ No newline at end of file diff --git "a/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html" "b/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html" index a2b1e219..7d04d58d 100644 --- "a/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html" +++ "b/Interview/Brower/\344\272\213\344\273\266\345\276\252\347\216\257\346\234\272\345\210\266.html" @@ -21,12 +21,12 @@ -
ZerDocs

事件循环机制 ​

进程与线程 ​

描述

进程是操作系统分配资源的基本单位，线程是操作系统调度的基本单位，线程可以看做轻量级的进程。

  1. 一个进程中至少包含一个线程，线程不能包含进程，不能单独存在，必须由进程启动和管理

  2. 多个进程间不能共享资源，都有自己私有的程序计数器（记录执行指令地址）,线程可以共享同一个进程间的资源

  3. 上下文切换：进程慢，线程快（从一个切换到另一个）

  4. 操纵者不同：进程操纵者是操作系统，线程操纵者一般为程序员

image-20230223165307358

浏览器的线程与进程 ​

浏览器是一个多进程多线程的应用程序

  1. 浏览器进程：负责浏览器界面展示、用户交互、子进程管理等；浏览器进程内部会启动多个线程处理不同的任务。
  2. 网络进程：负责加载网络资源，网络进程内部会启动多个线程来处理不同的网络任务。
  3. 渲染进程：渲染进程启动后，会启动一个渲染主进程，主进程负责执行 HTML、CSS、JS 代码。

    默认每个标签页开启一个新进程，以保证标签页之间不互相影响。

渲染进程任务 ​

  1. 解析 HTML
  2. 解析 CSS
  3. 计算 样式
  4. 页面布局
  5. 处理图层
  6. 每秒把页面渲染 60 次
  7. 执行全局 JS 代码
  8. 执行事件处理函数
  9. 执行定时器的回调函数

事件循环 ​

2023-03-05-21-01-25

事件循环解释

  1. 在最开始的时候，渲染主线程会进入一个无限循环

  2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。

  3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的未尾。在添加新任务时，“如果主线程是休眠状态，则会将其唤醒以绁续循环拿取任务；如此循环往复，持续进行。

异步与事件循环理解

单线程是异步产生的原因，事件循环是异步的实现方式。

如何理解异步 ​

Js是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担渲染页面、执行 JS 等诸多的任务。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。

这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理;

自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的未尾排队，等待主线程调度执行。

在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。使用异步的方式，渲染主线程永不阻塞。

消息队列 ​

任务没有优先级，在消息队列中先进先出。但是 消息队列有优先级。

每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。

在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。

浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行。

JS 中的计时器能做到精确计时吗

不行，因为有操作系统计时函数偏差、事件循环机制的损耗：

1．计算机硬件没有原子钟，无法做到精确计时

2．操作系统的计时函数本身就有少量偏差！ 由于 JS 的计时器最终调用的是操作系统的函数，也就携带了此偏养

3．按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，间隔时间少于 4 毫秒，则会增加到 4 毫秒 这又带来了偏差

4． 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差。

2023-03-05-21-56-25

+ \ No newline at end of file diff --git "a/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html" "b/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html" index 59849ab5..0e746ad1 100644 --- "a/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html" +++ "b/Interview/Brower/\346\265\217\350\247\210\345\231\250\347\275\221\351\241\265\350\257\267\346\261\202\350\277\207\347\250\213.html" @@ -21,12 +21,12 @@ -
ZerDocs

浏览器网页请求过程 ​

  1. 网络：请求资源
  2. 渲染：处理渲染

完整的 HTTP 请求过程

域名解析 ==> 与服务器建立连接 ==> 发起 HTTP 请求 ==> 服务器响应 HTTP 请求，浏览器得到 html 代码 ==> 浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片） ==> 浏览器对页面进行渲染呈现给用户

一、域名解析 ​

  1. Chrome 浏览器 会首先搜索浏览器自身的 DNS 缓存，有且没有过期则解析到此结束。
  2. 如果浏览器自身的缓存里面没有找到对应的条目，会搜索操作系统自身的 DNS 缓存，有且没有过期则停止搜索解析到此结束

Windows 系统：ipconfig/displaydns 命令查看

  1. 如果在 Windows 系统的 DNS 缓存也没有找到，则读取 hosts 文件

hosts 位于 ‪C:\Windows\System32\drivers\etc\hosts

  1. hosts 文件中也没有找到对应的条目，浏览器就会发起一个 DNS 的系统调用，就会向本地配置的首选 DNS 服务器发起域名解析请求

    并返回给 Windows 系统内核，内核又把结果返回给浏览器。（这是递归的请求，也就是运营商的 DNS 服务器必须得提供并返回该域名的 IP 地址）

  2. 经过以上的 4 个步骤，还没有解析成功

注：一般会进行以下几步

操作系统就会查找 NetBIOS name Cache == > WINS 服务器 ==> 客户端就要进行广播查找 ==> 客户端就读取 LMHOSTS 文件

如果还没有解析成功，那么就宣告这次解析失败，那就无法跟目标计算机进行通信。只要其中有一步可以解析成功，那就可以成功和目标计算机进行通信。

二、与服务器建立连接 ​

  1. TCP 连接的建立

客户端的请求到达服务器，首先就是三次握手建立 TCP 连接

三次握手的目的：试探一下对方是否遵循 TCP/IP 协议，为了在不可靠的信道上建立起可靠的连接

为什么要进行第三次握手：为了防止服务器端开启一些无用的连接，增加服务器开销；

以及防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

img

三、发起 HTTP 请求 ​

http 协议：计算机通过网络进行通信的规则，是一个基于请求与响应，无状态的，应用层的协议，常基于 TCP/IP 协议传输数据。

请求报文结构 ​

请求报文包括四个部分：请求行，请求头，空行，请求体。

img

四、服务器端响应 HTTP 请求，浏览器得到 HTML 代码 ​

HTTP 的响应报文也由四部分组成：响应行、响应头、空行、响应体

img

报文结构参考

五、浏览器渲染过程 ​

2023-03-05-22-05-19

  1. 解析 html 结构，形成 Dom 树
  2. 解析 CSS，生成 cssom
  3. 将 CSSOM 和 DOM 合并形成 render 树
  4. 计算 layout 布局
  5. 将布局渲染到屏幕上

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画

一、解析 HTML ​

解析过程中遇到 CSS 解析 CSS，遇到 JS执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和外部的JS 文件。

如果主线程解析到 link 位置，此时外部的CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 css 的工作是在预解析线程中进行的。这就是csS 不会阻塞 HTML 解析的根本原因。

如果主线程解析到 script 位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 Js 代码的执行过程可能会修改当前的DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阳塞 HTML 解析的根本原因。

第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。 2023-03-05-22-07-542023-03-05-22-29-15

解析成对象，提供 JS 可操作的能力

二、解析 CSS ​

2023-03-05-22-10-48

document.styleSheets、document.styleSheets[0].addRule('div':'border :2px solid red') 可查看、操作浏览器样式表

三、样式计算 ​

主线程会遍历得到的DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。

在这一过程中，很多预设值会变成绝对值，比如 red 会变成 rgb；相对单位会变成绝对单位，比如 em 会变成 px

这一步完成后，会得到一棵带有样式的DOM 树

2023-03-05-22-31-23

四、布局Layout ​

DOM树和 Layout 不一定是一一对应的，比如head默认样式display:none,::before在 Layout 树阶段，布局完成后形成布局树。

2023-03-05-22-38-44

五、分层Layer ​

主线程使用复杂的策略对布局树进行分层。

六、绘制Paint ​

为每个层生成绘制指令

七、分块Tiling ​

分块工作交给多个线程同时进行

八、光栅化Raster ​

合成线程将信息交给 GPU 进程，将每个快变成位图，优先处理靠近视口的块，此过程会用到 GPU 加速，提升运算速率。

九、画Draw ​

合成线程计算出每个位图在屏幕上的位置，交给 GPU 进行呈现。变形（旋转，缩放，倾斜）等发生在合成线程，与渲染主线程无关，这是 transform 效率高的本质原因。

2023-03-06-21-54-14

回流reflow ​

2023-03-06-21-56-10

reflow 的本质就是重新计算 layout 树。

当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。

为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 ref1ow 是异步完成的。

也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息浏览器在反复权衡下，最终决定获取属性立即 ref1ow。

引起回流属性和方法：任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

  1. 页面首次渲染
  2. 添加或者删除可见的DOM元素
  3. 元素尺寸或位置发生改变
  4. 元素字体大小变化
  5. 浏览器窗口大小发生改变
  6. 激活CSS伪类（例如：:hover）
  7. 查询某些属性或调用某些方法

重绘repaint ​

repaint 的本质就是重新根据分层信息计算了绘制指令。

当改动了可见样式后，就需要重新计算，会引发 repaint。

由于元素的布局信息也属于可见样式，所以reflow 一定会引起 repaint。

2023-03-06-22-20-02

为什么 transform 的效率高?

因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」 阶段由于 draw 阶段在合成线程中；

所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌．也不会影响 transform 的变化。

需要更新属性，只是影响元素的外观、风格，不影响布局。改变 ​color​​​,​ ​background-color​​​, ​​visibility 等属性

参考链接

六、浏览器对页面进行渲染呈现给用户，关闭连接 ​

四次挥手 ​

img

问题一：

为什么连接的时候是三次握手，关闭的时候却是四次握手？

为了保障数据发送完再断开连接

问题二：

为什么要等待一段时间在关闭连接？

因为客户端发送完 ack 包后中途可能丢失，此时服务端未收到 ack 包会重发 fin 包，客户端在发送 ack 包刷新等待时间，

确保服务端关闭再 关闭客户端

参考视频 1

参考视频 2

+ \ No newline at end of file diff --git "a/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html" "b/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html" index d89086d3..b77669ac 100644 --- "a/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html" +++ "b/Interview/Brower/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234.html" @@ -21,12 +21,12 @@ -
ZerDocs

http与https区别 ​

http：超文本传输协议，明文传输，信息不安全。用的是80端口

https：具有安全性的ssl加密传输协议，信息安全。用的443端口

前端缓存 ​

HTTP缓存 ​

在服务器代码上设置

  1. 强缓存：使用Expires、Cache-Control（优先级高

    判断过程： 请求再次发起 -> 浏览器根据 expires 和 cache-control 判断目标资源是否命中"强缓存" -> 若命中，直接从缓存获取资源，不再与服务器发生通讯。

  2. 协商缓存：协商缓存主要有四个头字段，它们两两组合配合使用,当命中协商缓存的时候，服务器会返回HTTP状态码304，让客户端直接 从本地缓存里面读取文件。

浏览器缓存 ​

localStorage、sessionStorage、cookie

+ \ No newline at end of file diff --git "a/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" "b/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" index 99005c4a..37c309a1 100644 --- "a/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" +++ "b/Interview/CSS/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" @@ -21,11 +21,11 @@ -
ZerDocs

CSS基础面试题 ​

伪类与伪元素 ​

解释

都不需要添加额外的HTML元素的情况下为文档添加样式和效果。

伪类：开头为单冒号:，伪类是选择器的一种，用于给元素某种状态（滑动、点击等）添加对应的样式，在原本元素上修改

伪元素：开头为双冒号::，用于创建一些不在文档树中的又可以通过 CSS 控制样式的虚拟元素，向元素添加额外的内容或样式。

image-20230227112239445

image-20230227112221284

:nth-child() 与:nth-of-type()

:nth-child(n) ：匹配到第 n 个兄弟

:nth-of-type(n)：匹配到同类型的第 n 个兄弟元素

水平垂直居中 ​

  1. 行内元素：text-align 与 line-height 块级元素：
  2. flex + margin:auto、grid + margin:auto
css
.parent {
   display: flex; /* grid */
 }
 .children {
@@ -177,8 +177,8 @@
   margin: 10px;
   overflow: hidden;
   border: 1px solid #ccc;
-}

父子相邻 margin 重叠

（1）给父元素添加透明边框

（2）给父元素添加overflow: hidden;

（3）给父元素添加position: fixed;

（4）给父元素添加display: table/flex/grid;

（5）将子元素都margin改为父元素的padding

可替换元素 ​

在 HTML 中， 是指其内容不受文档流影响，而是由外部资源定义的元素。

这些元素的内容可以通过 CSS 样式或者 JavaScript 来修改，但是本身的标签和属性并不能直接控制其显示效果。

常见的可替换元素包括 img、input、textarea、select、video、audio

Canvas和SVG区别 ​

Canvas和SVG都是用于创建图形的HTML5元素，但它们有着不同的工作原理和适用场景。

Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布中创建像素级别的图形，可以制作出非常复杂的动态效果。Canvas要求开发者掌握像素级别的操作，需要自己编写代码来实现各种绘图功能，因此相对较难掌握。

而SVG是基于矢量图形的绘图技术，它利用XML描述二维图形，并通过浏览器解析渲染出来。由于SVG是基于矢量图形的绘图技术，所以它具有无限放大和缩小不失真的优势。另外，SVG也具有更好的可访问性和SEO性能。

总的来说，如果需要制作交互式和复杂的图形应用程序，Canvas是更好的选择；而如果需要制作高质量的静态图形、图表或图标等，则SVG更适合。

矢量图形

矢量图形是由数学方程描述的二维图形，通常使用直线、曲线、多边形和文本等基本几何形状来创建。相比于位图图像（如JPEG、PNG等），矢量图形不会失真或模糊，无论放大或缩小都保持清晰度，因为它们是基于数学公式创建的，并且可以被无限放大或缩小而不会失去精度。此外，矢量图形还可以编辑和修改，使得它们在设计、制作标志、海报、传单、名片、网站等方面的应用非常广泛。

使用Base64编码的图片具有以下优点： ​

  1. 减少HTTP请求：将多个小图片合并为一个Base64编码字符串，可以减少浏览器与服务器之间的HTTP请求次数，提高页面加载速度。

  2. 更好的页面性能：由于Base64编码后的图片是直接嵌入在HTML或CSS中的，而不需要额外的文件下载，因此可以更快地加载页面，提高页面性能。

  3. 简单易用：使用Base64编码的图片无需考虑图片路径等问题，只需要将编码后的字符串嵌入到HTML或CSS代码中即可。

  4. 可减少服务器负载：由于使用Base64编码的图片无需额外的文件下载，减少了服务器的负载。这对于高流量网站来说非常重要。

缺点：

  1. 图片大小增大：由于Base64编码会将图片转换成文本形式，因此会使得图片的大小增加约1/3左右。

  2. 编码和解码需要计算资源：由于编码和解码都需要进行大量的计算，因此可能会影响页面加载速度。

  3. 不适合大型图片：对于较大的图片（尤其是超过几百KB的图片），使用Base64编码会导致HTML或CSS文件变得非常大，影响页面加载速度。

优化大量图片的加载方法，提高用户体验： ​

  1. 压缩图片：使用图片压缩工具，将图片大小进行压缩，可以减少图片文件的大小，从而加快加载速度。

  2. 使用图片CDN：将图片存储在专门的CDN（内容分发网络）服务器上，可以使得图片加载更快，同时也减轻了原始服务器的负载。

  3. 延迟加载：将页面上非关键图片设置为延迟加载，当用户滚动到页面的对应位置时再加载图片，可以减少初始加载时的负担，提高页面的加载速度和响应性。

  4. 使用矢量图形代替位图：对于一些简单的图标和装饰性元素，可以使用矢量图形代替位图。矢量图形在放大或缩小时不会失真，并且通常比位图更小。

  5. 利用浏览器缓存：将图片缓存在用户的浏览器中，可以减少重复加载同一张图片的次数，提高页面加载速度。

  6. 懒加载：懒加载可以避免在页面中加载不必要的图片，只有用户需要查看某张图片时才会被加载。这种方式可以大幅减少初始页面加载时间，提高用户体验。

  7. 合并多个小图片成一张大图：将多张小图片合并到一张大图中，通过CSS定位显示指定位置的小图片，可以减少请求次数，提高页面加载速度。

优雅降级和渐进增强 ​

优雅降级：在编写项目时，直接针对最高级、最稳定的版本进行开发。然后在后续对低版本进行兼容。 渐进增强：在编写项目时，针对自己想个兼容的最低版本进行开发。然后在后续对高版本的新特性开发，或者更好的体验

新项目css架构设计入手方向 ​

  1. 公共变量（主题色/主要空隙/主要字号字体等）
  2. 编译器（scss/less/postcss/stylus）
  3. 自适应方案（栅格/rem/vw/pt）
  4. 目录约定（mixin/common/theme/module/response）
  5. 私有化方案（scoped/css module/css in js）

Tailwindcss断点对应设备 ​

Breakpoint prefixMinimum widthCSS代表设备
不写--手机
sm640px@media (min-width: 640px) { ... }大屏手机
md768px@media (min-width: 768px) { ... }768-1024代表 Ipad（Ipad Mini = 768）
lg1024px@media (min-width: 1024px) { ... }iPad Pro
xl1280px@media (min-width: 1280px) { ... }小型笔记本
2xl1536px@media (min-width: 1536px) { ... }电脑显示器
- +}

父子相邻 margin 重叠

（1）给父元素添加透明边框

（2）给父元素添加overflow: hidden;

（3）给父元素添加position: fixed;

（4）给父元素添加display: table/flex/grid;

（5）将子元素都margin改为父元素的padding

可替换元素 ​

在 HTML 中， 是指其内容不受文档流影响，而是由外部资源定义的元素。

这些元素的内容可以通过 CSS 样式或者 JavaScript 来修改，但是本身的标签和属性并不能直接控制其显示效果。

常见的可替换元素包括 img、input、textarea、select、video、audio

Canvas和SVG区别 ​

Canvas和SVG都是用于创建图形的HTML5元素，但它们有着不同的工作原理和适用场景。

Canvas是一种基于位图的绘图技术，它使用JavaScript在HTML5画布中创建像素级别的图形，可以制作出非常复杂的动态效果。Canvas要求开发者掌握像素级别的操作，需要自己编写代码来实现各种绘图功能，因此相对较难掌握。

而SVG是基于矢量图形的绘图技术，它利用XML描述二维图形，并通过浏览器解析渲染出来。由于SVG是基于矢量图形的绘图技术，所以它具有无限放大和缩小不失真的优势。另外，SVG也具有更好的可访问性和SEO性能。

总的来说，如果需要制作交互式和复杂的图形应用程序，Canvas是更好的选择；而如果需要制作高质量的静态图形、图表或图标等，则SVG更适合。

矢量图形

矢量图形是由数学方程描述的二维图形，通常使用直线、曲线、多边形和文本等基本几何形状来创建。相比于位图图像（如JPEG、PNG等），矢量图形不会失真或模糊，无论放大或缩小都保持清晰度，因为它们是基于数学公式创建的，并且可以被无限放大或缩小而不会失去精度。此外，矢量图形还可以编辑和修改，使得它们在设计、制作标志、海报、传单、名片、网站等方面的应用非常广泛。

使用Base64编码的图片具有以下优点： ​

  1. 减少HTTP请求：将多个小图片合并为一个Base64编码字符串，可以减少浏览器与服务器之间的HTTP请求次数，提高页面加载速度。

  2. 更好的页面性能：由于Base64编码后的图片是直接嵌入在HTML或CSS中的，而不需要额外的文件下载，因此可以更快地加载页面，提高页面性能。

  3. 简单易用：使用Base64编码的图片无需考虑图片路径等问题，只需要将编码后的字符串嵌入到HTML或CSS代码中即可。

  4. 可减少服务器负载：由于使用Base64编码的图片无需额外的文件下载，减少了服务器的负载。这对于高流量网站来说非常重要。

缺点：

  1. 图片大小增大：由于Base64编码会将图片转换成文本形式，因此会使得图片的大小增加约1/3左右。

  2. 编码和解码需要计算资源：由于编码和解码都需要进行大量的计算，因此可能会影响页面加载速度。

  3. 不适合大型图片：对于较大的图片（尤其是超过几百KB的图片），使用Base64编码会导致HTML或CSS文件变得非常大，影响页面加载速度。

优化大量图片的加载方法，提高用户体验： ​

  1. 压缩图片：使用图片压缩工具，将图片大小进行压缩，可以减少图片文件的大小，从而加快加载速度。

  2. 使用图片CDN：将图片存储在专门的CDN（内容分发网络）服务器上，可以使得图片加载更快，同时也减轻了原始服务器的负载。

  3. 延迟加载：将页面上非关键图片设置为延迟加载，当用户滚动到页面的对应位置时再加载图片，可以减少初始加载时的负担，提高页面的加载速度和响应性。

  4. 使用矢量图形代替位图：对于一些简单的图标和装饰性元素，可以使用矢量图形代替位图。矢量图形在放大或缩小时不会失真，并且通常比位图更小。

  5. 利用浏览器缓存：将图片缓存在用户的浏览器中，可以减少重复加载同一张图片的次数，提高页面加载速度。

  6. 懒加载：懒加载可以避免在页面中加载不必要的图片，只有用户需要查看某张图片时才会被加载。这种方式可以大幅减少初始页面加载时间，提高用户体验。

  7. 合并多个小图片成一张大图：将多张小图片合并到一张大图中，通过CSS定位显示指定位置的小图片，可以减少请求次数，提高页面加载速度。

优雅降级和渐进增强 ​

优雅降级：在编写项目时，直接针对最高级、最稳定的版本进行开发。然后在后续对低版本进行兼容。 渐进增强：在编写项目时，针对自己想个兼容的最低版本进行开发。然后在后续对高版本的新特性开发，或者更好的体验

新项目css架构设计入手方向 ​

  1. 公共变量（主题色/主要空隙/主要字号字体等）
  2. 编译器（scss/less/postcss/stylus）
  3. 自适应方案（栅格/rem/vw/pt）
  4. 目录约定（mixin/common/theme/module/response）
  5. 私有化方案（scoped/css module/css in js）

Tailwindcss断点对应设备 ​

Breakpoint prefixMinimum widthCSS代表设备
不写--手机
sm640px@media (min-width: 640px) { ... }大屏手机
md768px@media (min-width: 768px) { ... }768-1024代表 Ipad（Ipad Mini = 768）
lg1024px@media (min-width: 1024px) { ... }iPad Pro
xl1280px@media (min-width: 1280px) { ... }小型笔记本
2xl1536px@media (min-width: 1536px) { ... }电脑显示器
+ \ No newline at end of file diff --git "a/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" "b/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" index b9ec3987..fc557ff9 100644 --- "a/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" +++ "b/Interview/CSS/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" @@ -21,11 +21,11 @@ -
ZerDocs

实现一个元素的宽高比 ​

css
.wrapper {
   width: 100%;
   height: 0;
   padding-top: 56.25%; /* 16:9 宽高比 */
@@ -167,8 +167,8 @@
   color: white;
   border: none;
   padding: 10px;
-}
- +} + \ No newline at end of file diff --git "a/Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" "b/Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" index 0fc09c31..26d3acf0 100644 --- "a/Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" +++ "b/Interview/CSS/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" @@ -21,12 +21,12 @@ -
ZerDocs
+ \ No newline at end of file diff --git "a/Interview/JavaScript/Promise\347\233\270\345\205\263.html" "b/Interview/JavaScript/Promise\347\233\270\345\205\263.html" index b2088329..3ed3ae4f 100644 --- "a/Interview/JavaScript/Promise\347\233\270\345\205\263.html" +++ "b/Interview/JavaScript/Promise\347\233\270\345\205\263.html" @@ -21,11 +21,11 @@ -
ZerDocs

前端如何做到并发请求 ​

  1. 使用AJAX及其各种高级封装的异步技术，如jQuery的$.ajax()、axios等；
  2. 使用Promise(ES6)异步编程，如使用axios.all()或者Promise.all()多个请求并发发出；
  3. 使用Web Workers技术，将任务并发分发到多个Web Worker中执行；
  4. 使用WebSocket技术，可单个持久链接上进行多次请求；
  5. 使用Stream API技术，浏览器可以同时消费多个数据流，实现多个请求的并发；
  6. 使用定时器setInterval()及setTimeout()，可定时发出多个需要并发请求；

方法一:封装队列 ​

js
class taskQueue {
   constructor() {
     this.queue = []
     this.result = []
@@ -311,8 +311,8 @@
 // 写法 4
 onmessage = function (e) {
   // ...
-}

Service Worker ​

服务器与浏览器之间的中间人，如果网站中注册了Service Worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在Service Worker 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等先关操作，其中最重要且广泛的的作用就是离线资源缓存。

特性 ​

  1. 基于web worker（JavaScript主线程的独立线程，如果执行消耗大量资源的操作也不会堵塞主线程）
  2. 在web worker的基础上增加了离线缓存的能力
  3. 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器
  4. 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
  5. 由事件驱动的,具有生命周期
  6. 可以访问cache和indexDB
  7. 支持消息推送
  8. 并且可以让开发者自己控制管理缓存的内容以及版本
  9. 可以通过 postMessage 接口把数据传递给其他JS 文件
  10. 更多无限可能

WARNING

不能访问 DOM、不能同步操作

- +}

Service Worker ​

服务器与浏览器之间的中间人，如果网站中注册了Service Worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在Service Worker 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等先关操作，其中最重要且广泛的的作用就是离线资源缓存。

特性 ​

  1. 基于web worker（JavaScript主线程的独立线程，如果执行消耗大量资源的操作也不会堵塞主线程）
  2. 在web worker的基础上增加了离线缓存的能力
  3. 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器
  4. 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
  5. 由事件驱动的,具有生命周期
  6. 可以访问cache和indexDB
  7. 支持消息推送
  8. 并且可以让开发者自己控制管理缓存的内容以及版本
  9. 可以通过 postMessage 接口把数据传递给其他JS 文件
  10. 更多无限可能

WARNING

不能访问 DOM、不能同步操作

+ \ No newline at end of file diff --git "a/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html" "b/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html" index 2180d9ca..624b0c04 100644 --- "a/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html" +++ "b/Interview/JavaScript/\345\216\237\345\236\213\344\270\216\345\216\237\345\236\213\351\223\276.html" @@ -21,11 +21,11 @@ -
ZerDocs

new 对象的执行过程 ​

  1. 创建一个新对象：new操作符会创建一个新对象，该对象会继承自构造函数的原型对象。

  2. 设置对象的原型：新对象的__proto__属性会被设置为构造函数的原型对象prototype。

  3. 执行构造函数：构造函数会被执行，this 指向新创建的对象。在构造函数内部，可以通过this关键字来添加属性和方法到新对象中。

  4. 对构造函数有返回值的处理判断：

    1. 如果构造函数没有显式地返回对象，返回新创建的对象；(基本类型忽略)
    2. 如果构造函数返回了一个对象，则返回该对象。(引用类型返回)
js
function Person(name, age) {
   this.name = name
   this.age = age
 }
@@ -115,8 +115,8 @@
 	Parent.call(this);
 }
 let o3 = new Child();
-console.log( o3,o3.name,o3.age );
- +console.log( o3,o3.name,o3.age ); + \ No newline at end of file diff --git "a/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" "b/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" index 123c4ac6..12df6bcd 100644 --- "a/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" +++ "b/Interview/JavaScript/\345\237\272\347\241\200\351\235\242\350\257\225\351\242\230.html" @@ -21,11 +21,11 @@ -
ZerDocs

常见基础面试题 ​

数据类型 ​

原始类型：number,string,boolean,null,undefined,bigint,symbol

引用类型：Object

  • 标准普通对象：Object
  • 标准准特殊对象：Array,Date,Math,Error,RegExp
  • 非标准特殊对象（包装类型）：Number,String,Boolean
  • 可执行对象：Function

Symbol应用

  1. 对象唯一值属性
  2. 唯一标识统一管理（pinia 中的 storeId）
  3. iterator底层实现机制

类型检测方式 ​

  1. typeof：所有数据类型，在计算机底层都是按照‘64 位二进制’进行存储的， typeof是按照二进制值进行检测类型的
    详细转换机制
  2. 若二进制前三位是‘0’,并且实现了 call 方法，则返回 function，没有实现则返回 object
  3. null是 64 个 ‘0’，typeof null ---> 'object'(局限性)
  4. 检测未被声明的变量，返回 undefined :::
js
const isObj = option => option !== null && (typeof option === 'object' || typeof option === 'function')
const isObj = option => option !== null && (typeof option === 'object' || typeof option === 'function')

数据类型转换 ​

其他类型转为数字类型 ​

规则：

  1. 宇符串转换为数宇：空宇符串变为0，如果出现任何非有效数宇宇符，结果都是NaN

  2. 把布尔转换为数宇：true->1 ; false->0

  3. null->0 ; undefined->NaN

  4. Symbol无法转换为数宇，会报错：Uncaught TypeError

  5. BigInt转为数字，会去除“n”（超过安全数宇的，会按照科学计数法处理）

  6. 把对象转换为数字：

  • 先调用对線的 Symbol.toPrimitive 这个方法，如果不存在这个方法
  • 再调用对泉的 valueof 获取原始值，如果获取的值不是原始值，比如数组
  • 再调用对線的 toString 把其变为字符串
  • 最后再把宇符串基于Number方法转换为数字
js
parseInt(val,radix) parseFloat(val)
 parseInt(null) 和 parseInt(undefined) -> NaN
 /*  规则：val 必须是字符串，不是则自动转为字符串；
       然后再 从左往右 找符合 radix（进制）有效数字，一个没找到则返回 NaN，
@@ -409,8 +409,8 @@
       newObj[key] = deepClone(obj[key])
   }
   return newObj
-}

事件捕获和冒泡机制 ​

事件传播过程：事件捕获 ---> 目标阶段---> 事件冒泡

事件捕获：从根元素(html)向内传播，直到目标元素，途中会触发绑定事件捕获元素的回调。element.addEventListener(event, function, true)。

事件冒泡：从目标元素向外传播，直到根元素，途中会触发绑定事件冒泡元素的回调。onclick、addEventListener默认绑定冒泡阶段。

阻止冒泡：event.stopPropagation()

阻止默认行为：event.preventDefault(),例如：a标签跳转，表单按钮数据提交至服务器。

阻止同一节点其他后绑定事件执行：event.stopImmediatePropagation()

Promise链式调用 ​

是指在一个Promise对象上多次调用then方法，每个then方法都可以接收上一个Promise对象的返回值，

并返回一个新的Promise对象，从而形成一个Promise链 ，从而实现多个异步操作的顺序执行和数据传递。

如果then方法中抛出了异常，那么后续的then方法会被跳过，直接执行catch方法。

如果then方法中返回了一个Promise对象，那么后续的then方法会等待该Promise对象的状态发生改变后再执行。

可以避免回调地狱，使得代码更加清晰易读。

- +}

事件捕获和冒泡机制 ​

事件传播过程：事件捕获 ---> 目标阶段---> 事件冒泡

事件捕获：从根元素(html)向内传播，直到目标元素，途中会触发绑定事件捕获元素的回调。element.addEventListener(event, function, true)。

事件冒泡：从目标元素向外传播，直到根元素，途中会触发绑定事件冒泡元素的回调。onclick、addEventListener默认绑定冒泡阶段。

阻止冒泡：event.stopPropagation()

阻止默认行为：event.preventDefault(),例如：a标签跳转，表单按钮数据提交至服务器。

阻止同一节点其他后绑定事件执行：event.stopImmediatePropagation()

Promise链式调用 ​

是指在一个Promise对象上多次调用then方法，每个then方法都可以接收上一个Promise对象的返回值，

并返回一个新的Promise对象，从而形成一个Promise链 ，从而实现多个异步操作的顺序执行和数据传递。

如果then方法中抛出了异常，那么后续的then方法会被跳过，直接执行catch方法。

如果then方法中返回了一个Promise对象，那么后续的then方法会等待该Promise对象的状态发生改变后再执行。

可以避免回调地狱，使得代码更加清晰易读。

+ \ No newline at end of file diff --git "a/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html" "b/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html" index 42793bd3..507a064d 100644 --- "a/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html" +++ "b/Interview/JavaScript/\345\255\227\347\254\246\344\270\262\345\270\270\347\224\250\346\226\271\346\263\225.html" @@ -21,11 +21,11 @@ -
ZerDocs

字符串常用方法 ​

​ 都不会影响原字符串：因为字符串是不可变的！

  1. 增删改：replace,replaceAll

  2. 增：repeat,concat,padStart,padEnd

  3. 删：substr,substring,slice,trim,trimStart,trimEnd

  4. 改：split,toLowerCase,toUpperCase,toLocaleLowerCase, ​ toLocaleUpperCase, String.fromCharCode()

  5. 查：valueOf,at,charAt,charCodeAt,indexOf,lastIndexOf, ​ search,includes,match,startsWith,endsWith

charCodeAt与fromCharCode ​

js
'ABC'.charCodeAt(2) // 67 返回指定索引位的 ASCII 码
 String.fromCharCode(65, 66, 67) // 'ABC' 返回 ASCII 码对应的字符
'ABC'.charCodeAt(2) // 67 返回指定索引位的 ASCII 码
 String.fromCharCode(65, 66, 67) // 'ABC' 返回 ASCII 码对应的字符

slice 与 substring区别 ​

slice 与 substring

slice 结束索引大于等于 0 时且小于起始索引时，返回空；结束索引大于0从前面计数，小于0从后面计数的原则。

substring 中如果结束索大于起始索引，则会自动将其调换后截取，当参数小于0 时按0处理。

js
let y = "www.map.baidu.com";
 console.log(y.slice(4,11)); //map.bai
@@ -57,8 +57,8 @@
 new Date().valueOf() // 1677728421211
Number(10).toString(2) // '1010'
 Number(10).valueOf(2) // 10
 new Date().toString() // 'Thu Mar 02 2023 11:39:56 GMT+0800 (中国标准时间)'
-new Date().valueOf() // 1677728421211
- +new Date().valueOf() // 1677728421211 + \ No newline at end of file diff --git "a/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" "b/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" index d9a55c4c..c9fec414 100644 --- "a/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" +++ "b/Interview/JavaScript/\350\277\233\351\230\266\351\235\242\350\257\225\351\242\230.html" @@ -21,11 +21,11 @@ -
ZerDocs

常见进阶面试题 ​

模块化 ​

JS运行的环境全局对象
浏览器window直接支持ES6Module，但是不支持CommonJS
Nodeglobal支持CommonJS，但是不支持ES6Module
WebpackCommon JS&ES6Module都支持，支持相互之间的“混用
Vite基于ES6Module规范，实现模块之间的相互引用

闭包 ​

闭包：作用域的一种特殊应用，内层函数作用域用到了外层函数作用域的变量。由于被内层函数引用，导致外层函数执行完变量不会被释放，就形成了闭包。

闭包案例
js
function func() {
   const val = 10
   return function () {
     console.log(val)
@@ -425,8 +425,8 @@
       node.children && nodes.push(...node.children)
   }
   return nodes
-}

两者的区别 ​

  • 广度优先遍历需要使用队列逐层扫描节点，而深度优先遍历需要使用递归或栈来遍历节点。
  • 广度优先遍历的空间复杂度比深度优先遍历高，因为广度优先遍历需要使用队列来存储节点，而深度优先遍历只需要使用递归或栈。

广度优先遍历的应用 ​

广度优先遍历可以用于许多问题，例如：

  • 查找最短路径：遍历距离起点最近的节点。
  • 查找连通块：可以找到由相邻节点组成的连通块。
  • 查找图的最小生成树

深度优先遍历的应用 ​

  • 查找连通块：可以找到由相邻节点组成的连通块。
  • 查找拓扑排序：可以找到图的拓扑排序，即节点的一个线性序列，使得对于每个有向边 (u,v)，都有 u 在序列中排在 v 的前面。
  • 查找强联通分量：通过深度优先遍历，可以找到图的强联通分量，即任意两点之间都存在一条路径的最大子图。

图文详解深度优先，广度优先遍历

loader和plugin区别 ​

Loader

是用来处理单个模块的转换，将各种类型的文件（如 js、css、sass、less、图片等）转换为 Webpack 可以处理的模块；

执行顺序是从后往前依次执行，每个 Loader 都会对文件进行处理，直到最后一个 Loader 将文件转换为模块。

Plugin

是扩展 Webpack 功能的函数，可以在构建过程中执行一系列的任务，遍历所有的 Plugin，并执行它们的 apply 方法。

例如生成 HTML 文件（HtmlWebpackPlugin）、压缩代码（UglifyJsPlugin）、提取公共代码等。

Plugin 在 Loader 执行完成之后执行，可以访问 Webpack 的内部环境，并对其进行修改和优化。

前端模块化规范 ​

前端模块化规范是为了解决前端代码复杂度、可维护性和可扩展性等问题而产生的。目前常用的前端模块化规范有CommonJS、AMD、CMD和ES6 Module等，它们之间的区别如下：

CommonJS规范：主要用于服务器端的JavaScript编程，Node.js采用了该规范。采用同步加载模块的方式，即在需要使用某个模块时，通过require函数同步加载该模块，然后才能执行后续代码。

ES6 Module：是ECMAScript 6标准中新增的模块化规范。 采用静态加载模块的方式，即在编译时就确定模块之间的依赖关系，然后再执行代码。

与其他模块化规范不同的是，ES6 Module不需要使用特定的函数或语法来定义和导入模块，而是使用import和export关键字来实现。

- +}

两者的区别 ​

广度优先遍历的应用 ​

广度优先遍历可以用于许多问题，例如：

深度优先遍历的应用 ​

图文详解深度优先，广度优先遍历

loader和plugin区别 ​

Loader

是用来处理单个模块的转换，将各种类型的文件（如 js、css、sass、less、图片等）转换为 Webpack 可以处理的模块；

执行顺序是从后往前依次执行，每个 Loader 都会对文件进行处理，直到最后一个 Loader 将文件转换为模块。

Plugin

是扩展 Webpack 功能的函数，可以在构建过程中执行一系列的任务，遍历所有的 Plugin，并执行它们的 apply 方法。

例如生成 HTML 文件（HtmlWebpackPlugin）、压缩代码（UglifyJsPlugin）、提取公共代码等。

Plugin 在 Loader 执行完成之后执行，可以访问 Webpack 的内部环境，并对其进行修改和优化。

前端模块化规范 ​

前端模块化规范是为了解决前端代码复杂度、可维护性和可扩展性等问题而产生的。目前常用的前端模块化规范有CommonJS、AMD、CMD和ES6 Module等，它们之间的区别如下：

CommonJS规范：主要用于服务器端的JavaScript编程，Node.js采用了该规范。采用同步加载模块的方式，即在需要使用某个模块时，通过require函数同步加载该模块，然后才能执行后续代码。

ES6 Module：是ECMAScript 6标准中新增的模块化规范。 采用静态加载模块的方式，即在编译时就确定模块之间的依赖关系，然后再执行代码。

与其他模块化规范不同的是，ES6 Module不需要使用特定的函数或语法来定义和导入模块，而是使用import和export关键字来实现。

+ \ No newline at end of file diff --git "a/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" "b/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" index d66a9979..f482ac30 100644 --- "a/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" +++ "b/Interview/JavaScript/\351\253\230\347\272\247\351\235\242\350\257\225\351\242\230.html" @@ -21,11 +21,11 @@ -
ZerDocs

常见高级面试题 ​

怎么禁止下载图片（midjourney实现） ​

方案一：禁止右键

html
<img src="image.png" oncontextmenu="return false;" />
<img src="image.png" oncontextmenu="return false;" />
js
window.onload = function () {
   document.oncontextmenu = function (event) {
     event.returnValue = false
   }
@@ -143,8 +143,8 @@
          onTouchStart={preventDefaultListener}
          onContextMenu={preventDefaultListener}
      />
- )
- + ) + \ No newline at end of file diff --git "a/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" "b/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" index fb353c9f..01a0a51b 100644 --- "a/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" +++ "b/Interview/Vue/Vue\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" @@ -21,12 +21,12 @@ -
ZerDocs

数组劫持原理 ​

  1. 使用 Object.create(Array.prototype) 备份原型上的方法
  2. 利用 AOP 思想，对 7 个变异方法进行重写，重写函数：先调用原来对应方法，再对新增的每一项进行数据劫持
+ \ No newline at end of file diff --git "a/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html" "b/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html" index 5962b9e8..233dc2c9 100644 --- "a/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html" +++ "b/Interview/Vue/Vue\345\237\272\347\241\200\347\257\207.html" @@ -21,12 +21,12 @@ -
ZerDocs

对MVVM的理解 ​

MVVM 由 MVC 模型演变而来，M(Model)代表数据模型，V(View)代表用户操作的界面，VM(ViewModel)代表业务逻辑层，

充当数据模型与视图界面的桥梁，可以把数据绑定到页面，页面操作触发数据更新，数据修改自动触发视图更新。

Mixins的原理 ​

Vue 的 mixins混入 可以抽离封装Vue 组件选项达到复用的效果。

data、provide：后者的值将对前者的值进行扩展，相同属性名（非对象）则以后者的属性值为准，如果两者的值是对象，但值不相等，则继续进行合并，

生命周期钩子函数：将后者的生命周期钩子函数拼接到前者的生命周期钩子函数，调用时依次执行；

components、filters、directives：对前者的属性进行拷贝扩展，属性相同则后者覆盖前者；

**watch：**与生命周期钩子函数类似，将后者的 watch拼接到前者的 watch后面；

props、methods、inject、computed：定义一个对象 ret，遍历前者的属性或方法，对 ret进行扩展，再遍历后者的属性或方法，后者将覆盖前者的属性或方法；

默认策略：策略中没有定义的策略，后者有则返回后者，否则返回前者；

+ \ No newline at end of file diff --git "a/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html" "b/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html" index 376d3e0a..82dabb6d 100644 --- "a/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html" +++ "b/Interview/Vue/Vue\345\243\260\346\230\216\345\221\250\346\234\237.html" @@ -21,11 +21,11 @@ -
ZerDocs

Vue声明周期 ​

js
// 自带 8 个
 beforeCreate
 created
 beforeMount
@@ -83,8 +83,8 @@
 activated
 
 // 第二次：多次进入详情页，在activated钩子中，判断 id 相同则不需要发请求
-activated

虚拟 DOM(VNode) 和 DOM ​

  1. VNode是一个纯 JavaScript 对象，用来描述真实 DOM 中的一个节点，属性比真实 dom 精简许多。

虚拟 DOM 的优点包括：

性能优化：由于真实 DOM 操作非常耗费性能，而虚拟 DOM 可以在内存中进行操作，然后再一次性渲染到真实 DOM 上，从而减少了不必要的 DOM 操作，提高了性能。

跨平台：虚拟 DOM 可以轻松地支持多种平台，比如浏览器、移动端、服务器端等。

组件化开发：Vue 的组件是以 VNode 为基础的，通过对 VNode 的操作，可以方便地实现组件的开发。

Vue3.0性能提升 ​

  1. 响应式系统不需要深度遍历就可以对整个对象监听
  2. 在diff算法中增加了静态标记
  3. 源码体积减小，所有 API 都可以按需引入
- +activated

虚拟 DOM(VNode) 和 DOM ​

  1. VNode是一个纯 JavaScript 对象，用来描述真实 DOM 中的一个节点，属性比真实 dom 精简许多。

虚拟 DOM 的优点包括：

性能优化：由于真实 DOM 操作非常耗费性能，而虚拟 DOM 可以在内存中进行操作，然后再一次性渲染到真实 DOM 上，从而减少了不必要的 DOM 操作，提高了性能。

跨平台：虚拟 DOM 可以轻松地支持多种平台，比如浏览器、移动端、服务器端等。

组件化开发：Vue 的组件是以 VNode 为基础的，通过对 VNode 的操作，可以方便地实现组件的开发。

Vue3.0性能提升 ​

  1. 响应式系统不需要深度遍历就可以对整个对象监听
  2. 在diff算法中增加了静态标记
  3. 源码体积减小，所有 API 都可以按需引入
+ \ No newline at end of file diff --git "a/Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html" "b/Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html" index 221b1346..eb7113b5 100644 --- "a/Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html" +++ "b/Interview/Vue/Vue\350\277\233\351\230\266\347\257\207.html" @@ -21,12 +21,12 @@ -
ZerDocs
+ \ No newline at end of file diff --git "a/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html" "b/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html" index 7d5f6d33..89610aca 100644 --- "a/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html" +++ "b/Interview/Vue/npm run xxx\346\211\247\350\241\214\350\277\207\347\250\213.html" @@ -21,12 +21,12 @@ -
ZerDocs

npm run xxx执行过程 ​

vue cli 项目 ​

  1. npm run 会先把 node_modules/.bin 加入到 PATH 环境变量

  2. 找到项目根目录 package.json 文件中 scripts 对应的脚本并执行对应命令

  3. 相当于执行 vue-cli-service serve ，并去找到npm i (npm i @vue/cli-service)所生成的软连接 ./bin/vue-cli-service

  4. 接着去执行软连接指向的 node_modules/@vue/cli-service/bin/vue-cli-service.js （package-lock.json记录了映射关系）

    1. vue-cli-service.js主要解析和比对 node 版本，不匹配则报错
    2. 获取和解析命令行参数，启动服务执行命令

vite项目 ​

  1. npm run 会先把 node_modules/.bin 加入到 PATH 环境变量
  2. 找到项目根目录 package.json 文件中 scripts 对应的脚本并执行对应命令
  3. 去找.bin/vite 软链接，进而找到 node_modules/.pnpm/vite@4.1.1/node_modules/vite/bin/vite.js执行
+ \ No newline at end of file diff --git "a/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html" "b/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html" index 9ec1d57e..9a95c136 100644 --- "a/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html" +++ "b/Interview/Vue/\345\211\215\347\253\257\351\241\271\347\233\256\344\274\230\345\214\226.html" @@ -21,11 +21,11 @@ -
ZerDocs

前端项目优化 ​

HTML ​

CSS ​

JavaScript ​

构建优化 ​

移除console ​

npm install babel-plugin-transform-remove-console --D

js
// babel.config.js
 const proPlugins = []
 if (process.env.NODE_ENV === 'production')
   proPlugins.push('transform-remove-console')
@@ -111,8 +111,8 @@
         },
       },
     },
-  },
- + }, + \ No newline at end of file diff --git "a/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html" "b/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html" index c95bac4b..f94cb7e2 100644 --- "a/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html" +++ "b/Interview/Vue/\345\270\270\350\247\201Path\345\214\272\345\210\253.html" @@ -21,11 +21,11 @@ -
ZerDocs

VueRouter的 base ​

VueRouter的base属性是指应用的基路径，它会影响到所有使用了vue-router的路由路径，包括 routes 配置中的路径和 通过 $router.push() 或 $router.replace() 调用的路径。

在router对象中，base属性可以通过以下方式设置：

javascript
const router = new VueRouter({
   base: '/my-app/'
 })
const router = new VueRouter({
   base: '/my-app/'
@@ -59,8 +59,8 @@
 OUTPUT_DIR=dist
 BASE_URL=/
#.env.buildlocal   --本地打包预览环境变量
 OUTPUT_DIR=dist
-BASE_URL=/
- +BASE_URL=/ + \ No newline at end of file diff --git "a/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" "b/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" index 39544fcb..34af1536 100644 --- "a/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" +++ "b/Interview/Vue/\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" @@ -21,11 +21,11 @@ -
ZerDocs

一键复制 ​

js
// 方案一：
 // 方案二：
 import { Notification } from 'element-ui'
 
@@ -121,8 +121,8 @@
   unbind(el) {
     el.removeEventListener('click', el.handler)
   },
-}
- +} + \ No newline at end of file diff --git a/Interview/index.html b/Interview/index.html index 20394955..197b0687 100644 --- a/Interview/index.html +++ b/Interview/index.html @@ -21,12 +21,12 @@ -
ZerDocs

面试 ​

TIP

面试题总结与归纳!

+ \ No newline at end of file diff --git "a/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html" "b/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html" index d8432493..ad76f6e2 100644 --- "a/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html" +++ "b/Problem/Graphical/Antv\344\273\243\347\240\201\347\211\207\346\256\265\351\233\206\351\224\246.html" @@ -21,11 +21,11 @@ -
ZerDocs

网络拓扑图代码 ​

图实例化 ​

js
import { commonRegister ,viewRegister} from './registerElements.js'
 
 //1.初始化实例
 initChart() {
@@ -1197,8 +1197,8 @@
       res = `${str.substr(0, i)}${ellipsis}`
   })
   return res
-}
- +} + \ No newline at end of file diff --git "a/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html" "b/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html" index 58725b34..d5623ec1 100644 --- "a/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html" +++ "b/Problem/Graphical/Antv\344\275\277\347\224\250\346\200\273\347\273\223.html" @@ -21,11 +21,11 @@ -
ZerDocs

一、默认收缩二级节点 ​

js
// 树形图哪个需要收缩则把属性collapsed设置为true
 data.children.forEach(item => item.collapsed = true)
// 树形图哪个需要收缩则把属性collapsed设置为true
 data.children.forEach(item => item.collapsed = true)

二、改用iconfont文字不居中问题 ​

js
// 注册节点添加label图形时动态计算label位置
 group.addShape('text', {
@@ -49,8 +49,8 @@
     ...labelStyle.style, // 这里需要重新处理x,y
   },
   name: 'hubCombo-label',
-})

三、初始化画图完成后出现这个锯齿 ​

- +})

三、初始化画图完成后出现这个锯齿 ​

+ \ No newline at end of file diff --git "a/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html" "b/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html" index 36b66543..58bf6f52 100644 --- "a/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html" +++ "b/Problem/Graphical/Echarts\351\227\256\351\242\230\346\200\273\347\273\223.html" @@ -21,11 +21,11 @@ -
ZerDocs

Echarts问题总结 ​

屏幕适配问题 ​

方案一: 使用scss函数计算比例

scss
//默认设计稿的宽度
 $designWidth: 1920;
 //默认设计稿的高度
 $designHeight: 1080;
@@ -241,8 +241,8 @@
       map: 'china', // //方案二：删除这个属性
     },
   ],
-}
- +} + \ No newline at end of file diff --git "a/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html" "b/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html" index 1572c0c4..29e17e65 100644 --- "a/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html" +++ "b/Problem/Nuxt3/Nuxt3\351\241\271\347\233\256\350\270\251\345\235\221.html" @@ -21,11 +21,11 @@ -
ZerDocs

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') ​

2023-05-19-14-49-43

js
// uno.config.ts
 shortcuts: [['f-s-c', 'flex justify-start items-center']]
// uno.config.ts
 shortcuts: [['f-s-c', 'flex justify-start items-center']]
  1. 写在类名上不生效
html
<!--f-s-c 直接写在类名上不生效-->
 <div class="hidden lg:f-c-c">Test</div>
<!--f-s-c 直接写在类名上不生效-->
@@ -97,8 +97,8 @@
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
  # nginx.conf
    proxy_set_header X-Real-IP $remote_addr;
-   proxy_set_header Host $host;
- + proxy_set_header Host $host; + \ No newline at end of file diff --git "a/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html" "b/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html" index 85d1953d..979c9ecb 100644 --- "a/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html" +++ "b/Problem/VitePress/VitePress\350\270\251\345\235\221\350\256\260\345\275\225.html" @@ -21,11 +21,11 @@ -
ZerDocs

VitePress踩坑记录 ​

ERR_INVALID_FILE_URL_HOST ​

DANGER

执行打包命令时，出现此错误 TypeError [ERR_INVALID_FILE_URL_HOST]: File URL host must be "localhost" or empty on darwin

形成原因：全局替换时粗心大意造成img src属性多了个'/' ​

解决 ​

TIP

刚开始我只能猜到某个文件路径有问题 ，又不知道那个文件有问题，最后用上了 排除法 逐个移除文章文件夹最终才定位到出问题的文档。 虽然问题解决的的过程有点费劲，不得不说当问题搞得人想撞墙的时候，无疑也是一个不错的思路和方法！！！

删除多余的'/'就好了，自己解决自己的 issues ！！！

实现自动生成文章左侧侧边栏 ​

痛点及需求 ​

WARNING

每次添加文章过程：对应的目录下添加.md文， 修改themeConfig的sidebar属性，给对象加上新增的文章映射

添加的文章少还好，多了的话就显得很麻烦不够优雅，所有想写个脚本按照目录结构自动生产对应的映射关系。

想法及实现 ​

在package.json添加脚本执行命令 ​

image-20230205230548188

在博客根目录新建scripts目录并创建文件getSidebar.ts，添加如下代码 ​

js
/** ******   读取 zerdocs/docs/ 下的所有文件夹，自动生成侧边栏sidebar.ts文件   */
 
 const fs = require('node:fs')
 const path = require('node:path')
@@ -327,8 +327,8 @@
     width: 32px !important;
     border-radius: 4px;
   }
-}
- +} + \ No newline at end of file diff --git "a/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html" "b/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html" index eba9c85e..57d98eb7 100644 --- "a/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html" +++ "b/Problem/VitePress/VuePress\350\270\251\345\235\221\350\256\260\345\275\225.html" @@ -21,16 +21,16 @@ -
ZerDocs

VuePress踩坑记录 ​

坑点一、自定义目录不能根据视口固定 ​

巨坑

找了好多博客参考，没发现有相关的问题，挠破头皮都没想明白啥原因，还好碰到一篇博客解决了疑惑

TIP

参考博客：position: fixed; 不相对于屏幕视口定位

WARNING

产生原因：当一个元素position特性值设置为fixed时，如果该元素的先祖容器中存在transform特性值为非none的元素，则

position: fixed; 将相对于该先祖容器定位！！！ 最后发现祖先元素有transform: translateY(0px);这行代码在作怪!!

解决方法：自定义样式覆盖就好啦

css
.page > section {
   transform: none !important;
 }
.page > section {
   transform: none !important;
-}

坑点二、引用的Gitee图床图片没显示 ​

有人说是图床的问题、防盗链的问题，最后才发现自己把图床项目设为私有的项目了，重新设为开源成功解决

坑点三、Hexo博客源码没有备份，误点VsCode放弃所有更改并且回退版本 ​

天坑

因学习配置博客用git action来自动化部署，配置完后发现打包报错，搞了好久没办法解决。 本来想执行git checkout .，看到VsCode有个快捷按钮，由于之前没有备份博客源码，点了一下直接回到解放前！

领悟

来到了新的阵地VuePress折腾，学到了码农必备技能------备份

- +}

坑点二、引用的Gitee图床图片没显示 ​

有人说是图床的问题、防盗链的问题，最后才发现自己把图床项目设为私有的项目了，重新设为开源成功解决

坑点三、Hexo博客源码没有备份，误点VsCode放弃所有更改并且回退版本 ​

天坑

因学习配置博客用git action来自动化部署，配置完后发现打包报错，搞了好久没办法解决。 本来想执行git checkout .，看到VsCode有个快捷按钮，由于之前没有备份博客源码，点了一下直接回到解放前！

领悟

来到了新的阵地VuePress折腾，学到了码农必备技能------备份

+ \ No newline at end of file diff --git "a/Problem/VueProject/VueRouter\345\212\240\345\257\206query.html" "b/Problem/VueProject/VueRouter\345\212\240\345\257\206query.html" index 883ccb8f..264a0c9e 100644 --- "a/Problem/VueProject/VueRouter\345\212\240\345\257\206query.html" +++ "b/Problem/VueProject/VueRouter\345\212\240\345\257\206query.html" @@ -21,11 +21,11 @@ -
ZerDocs

VueRouter加密query参数 ​

js
import UTF8 from 'crypto-js/enc-utf8' // npm i crypto-js
 import Base64 from 'crypto-js/enc-base64'
 const router = new VueRouter({
   mode: 'history',
@@ -125,8 +125,8 @@
     })
     return res
   }
-}
- +} + \ No newline at end of file diff --git "a/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html" "b/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html" index 46376a79..a818be5e 100644 --- "a/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html" +++ "b/Problem/VueProject/Vue\351\241\271\347\233\256\350\270\251\345\235\221\344\270\200.html" @@ -21,11 +21,11 @@ -
ZerDocs

Vue项目踩坑一 ​

webpack-bundle-analyzer插件 ​

安装后使用完把--report参数去掉，还是会给你生成打包文件，并会提示8888端口被占用，

需要在vue.config.js注释插件的使用，才能不被影响

点击弹窗父子传值成功，但是数据没有展示 ​

恰巧性能优化，后端改动了大量的关联关系，刚开始以为后端改动数据层级嵌套太深vue丢失了响应式的原因，

最后才发现是前端element-ui全局引入改为按需引入, DescriptionsItem 组件漏写了(没有警告、报错提示，巨坑)

html
<el-dialog
   :title="title"
   :visible="visible"
   :before-close="close"
@@ -447,8 +447,8 @@
     this.tagListWidth = this.tagListRef.clientWidth
     this.tagBoxWidth = this.tagBoxRef.clientWidth
   }
-}
- +} + \ No newline at end of file diff --git a/Problem/index.html b/Problem/index.html index f27b4ec3..5184de8b 100644 --- a/Problem/index.html +++ b/Problem/index.html @@ -21,12 +21,12 @@ -
ZerDocs

编程踩坑积累与总结 ​

TIP

这里主要记录编程遇到的问题，已经解决方案，以便以后回顾或找到更优解!

+ \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index ffef0539..bca9376f 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"frontend_git_git常用操作.md":"20c27f45","frontend_javascript_代码分支优化.md":"13067212","frontend_javascript_基础复习一.md":"fd55bc5f","backend_nodejs_node大文件上传.md":"0f0f8a2f","framework_vue_vite原理学习.md":"17cdf2a9","frontend_javascript_图片懒加载.md":"29ab2d8d","framework_vitest_测试流程.md":"1bec874b","backend_nodejs_node简单上传文件.md":"cb933c51","framework_react_react基础总结一.md":"5d1eca63","frontend_css_常用代码段.md":"dc53e290","framework_vue_vue2项目迁移vite5.md":"08bbf0e1","backend_nodejs_mongodb笔记.md":"3e653f32","framework_angular_angular基础总结一.md":"a2c16c18","problem_vitepress_vitepress踩坑记录.md":"3a0ae4bd","index.md":"ed610fba","frontend_git_terminal终端美化.md":"88db5440","backend_nodejs_node学习笔记.md":"88da0dac","frontend_javascript_基础复习二.md":"31ec83ea","frontend_git_配置多个平台ssh.md":"2e754475","frontend_javascript_async与await.md":"eb4118bc","backend_server_nginx学习笔记.md":"f76c0b5f","frontend_git_配置 ubuntu 服务器免密登录.md":"08e29edd","frontend_other_mac系统环境快速搭建.md":"ff5dfb6c","frontend_other_package文件详解.md":"434daa06","frontend_shell_获取页面所有域名并去重.md":"465973b1","frontend_shell_自动部署脚本.md":"896d7928","framework_angular_angular基础总结二.md":"ecf21d0e","frontend_typescript_进阶使用技巧.md":"e245bbde","interview_brower_浏览器网页请求过程.md":"d5aa7105","goodtool_index.md":"b47e6c9d","frontend_typescript_配置文件详解.md":"7b1b4a1b","frontend_typescript_初学笔记.md":"30e5eda5","interview_brower_事件循环机制.md":"10b838a4","interview_css_进阶面试题.md":"04516fb2","interview_vue_vue声明周期.md":"0b236c1d","interview_brower_计算机网络.md":"aff78451","interview_javascript_高级面试题.md":"8ae01eb6","interview_javascript_字符串常用方法.md":"71aee02e","interview_vue_vue响应式原理.md":"58fa36fa","interview_vue_vue进阶篇.md":"ba1a9bc5","interview_vue_vue基础篇.md":"005843ef","interview_vue_前端项目优化.md":"0e40d9e5","interview_vue_常见path区别.md":"18d01da8","interview_index.md":"17b8799a","framework_vue_vue3补漏笔记.md":"cdb7f826","frontend_css_grid布局学习笔记.md":"932791a5","backend_server_docker学习笔记.md":"164d2751","interview_vue_npm run xxx执行过程.md":"bd3396af","framework_vue_列表最后一条数据删除处理.md":"b92fcd66","framework_vue_网站添加 pwa.md":"62222ba8","framework_vue_分页与搜索条件记录并回显优化.md":"cd71ec7b","problem_graphical_antv使用总结.md":"b99544ba","problem_graphical_echarts问题总结.md":"4ed6d0ff","problem_nuxt3_nuxt3项目踩坑.md":"931ec887","problem_vitepress_vuepress踩坑记录.md":"3b4455e5","frontend_css_揭秘读书摘要.md":"43c354e0","frontend_javascript_正则表达式.md":"e7436b97","frontend_javascript_获取目录结构.md":"b4a1ffbd","interview_vue_自定义指令.md":"93d3c50c","interview_javascript_原型与原型链.md":"1e422baf","interview_javascript_进阶面试题.md":"2f74167b","interview_css_高级面试题.md":"9a995720","interview_javascript_基础面试题.md":"9a7ba18d","interview_javascript_promise相关.md":"2bb413a9","frontend_javascript_易混淆的位置属性.md":"cc1437af","problem_index.md":"b281a732","frontend_javascript_数据去重.md":"3a07257f","problem_graphical_antv代码片段集锦.md":"41154fb4","problem_vueproject_vue项目踩坑一.md":"f5091261","frontend_javascript_常见算法.md":"96b72916","frontend_javascript_手写promise.md":"974a06d0","frontend_javascript_高阶函数.md":"d8938548","interview_css_基础面试题.md":"72908ec5","framework_angular_angular基础总结三.md":"de737482","frontend_javascript_数组求集合.md":"20b6748e","frontend_javascript_文件系统.md":"47463046","problem_vueproject_vuerouter加密query.md":"16195f5d"} +{"framework_vue_vite原理学习.md":"17cdf2a9","framework_vitest_测试流程.md":"1bec874b","backend_server_nginx学习笔记.md":"f76c0b5f","framework_vue_列表最后一条数据删除处理.md":"b92fcd66","framework_vue_网站添加 pwa.md":"62222ba8","framework_vue_分页与搜索条件记录并回显优化.md":"cd71ec7b","frontend_javascript_获取目录结构.md":"b4a1ffbd","frontend_javascript_数据去重.md":"3a07257f","frontend_git_terminal终端美化.md":"88db5440","frontend_javascript_文件系统.md":"47463046","frontend_javascript_数组求集合.md":"20b6748e","problem_index.md":"b281a732","framework_vue_vue3补漏笔记.md":"cdb7f826","frontend_javascript_正则表达式.md":"e7436b97","frontend_css_grid布局学习笔记.md":"932791a5","framework_angular_angular基础总结二.md":"ecf21d0e","frontend_css_揭秘读书摘要.md":"43c354e0","frontend_git_配置 ubuntu 服务器免密登录.md":"08e29edd","frontend_javascript_图片懒加载.md":"29ab2d8d","frontend_javascript_手写promise.md":"974a06d0","framework_angular_angular基础总结三.md":"de737482","interview_javascript_原型与原型链.md":"1e422baf","frontend_javascript_常见算法.md":"96b72916","interview_javascript_字符串常用方法.md":"71aee02e","interview_javascript_高级面试题.md":"8ae01eb6","interview_vue_vue响应式原理.md":"58fa36fa","interview_vue_vue基础篇.md":"005843ef","interview_vue_vue进阶篇.md":"ba1a9bc5","interview_javascript_基础面试题.md":"9a7ba18d","interview_vue_npm run xxx执行过程.md":"bd3396af","interview_vue_vue声明周期.md":"0b236c1d","interview_vue_常见path区别.md":"18d01da8","interview_vue_前端项目优化.md":"0e40d9e5","interview_index.md":"17b8799a","interview_javascript_进阶面试题.md":"2f74167b","problem_graphical_antv使用总结.md":"b99544ba","interview_vue_自定义指令.md":"93d3c50c","problem_nuxt3_nuxt3项目踩坑.md":"931ec887","problem_graphical_echarts问题总结.md":"4ed6d0ff","backend_nodejs_mongodb笔记.md":"3e653f32","frontend_javascript_async与await.md":"eb4118bc","backend_nodejs_node简单上传文件.md":"cb933c51","backend_nodejs_node大文件上传.md":"0f0f8a2f","frontend_git_git常用操作.md":"20c27f45","frontend_javascript_基础复习一.md":"fd55bc5f","framework_vue_vue2项目迁移vite5.md":"08bbf0e1","problem_vitepress_vitepress踩坑记录.md":"3a0ae4bd","backend_server_docker学习笔记.md":"164d2751","framework_angular_angular基础总结一.md":"a2c16c18","frontend_javascript_易混淆的位置属性.md":"cc1437af","interview_brower_浏览器网页请求过程.md":"d5aa7105","frontend_javascript_基础复习二.md":"31ec83ea","frontend_shell_自动部署脚本.md":"896d7928","backend_nodejs_node学习笔记.md":"88da0dac","frontend_typescript_配置文件详解.md":"7b1b4a1b","problem_graphical_antv代码片段集锦.md":"41154fb4","interview_css_高级面试题.md":"9a995720","frontend_git_配置多个平台ssh.md":"2e754475","frontend_typescript_进阶使用技巧.md":"e245bbde","problem_vitepress_vuepress踩坑记录.md":"3b4455e5","frontend_other_package文件详解.md":"434daa06","frontend_other_mac系统环境快速搭建.md":"ff5dfb6c","index.md":"ed610fba","goodtool_index.md":"b47e6c9d","interview_brower_计算机网络.md":"aff78451","interview_css_进阶面试题.md":"04516fb2","frontend_javascript_高阶函数.md":"d8938548","interview_css_基础面试题.md":"72908ec5","frontend_css_常用代码段.md":"dc53e290","framework_react_react基础总结一.md":"5d1eca63","frontend_shell_获取页面所有域名并去重.md":"465973b1","problem_vueproject_vuerouter加密query.md":"16195f5d","interview_brower_事件循环机制.md":"10b838a4","frontend_javascript_代码分支优化.md":"13067212","problem_vueproject_vue项目踩坑一.md":"f5091261","frontend_typescript_初学笔记.md":"30e5eda5","interview_javascript_promise相关.md":"2bb413a9"} diff --git a/index.html b/index.html index 1160ea18..54f61a5f 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@

主题切换

ZerDocs

VitePress Front-End Learning Collection

开始阅读
关于我
ZerDocs
🎨

FrontEnd

前端三件套相关基础积累。

🚚

Framework

总结前段框架学习笔记。

📝

Problem

积累编程中遇到的坑。

🧑‍💻

Interview

归纳前端经典面试题。

📝

ECMAScript6

阮一峰 ECMAScript6 教程

📝

TypeScript

TypeScript 中英文档翻译

📝

TypeScript

TypeScript 教程

📝

Shikiji

Shikiji（代码高亮库） 中文文档

💫

Canvas

有趣的 Canvas 练习

💫

X-Admin

后台管理系统模板

💫

Json-Viewer

JSON 可视化工具网站

💫

Github-Trends

Github 趋势榜单速览网站

💫

数字华容道游戏

数字华容道游戏（Nuxt3 + UnoCss）

💫

Tailwind CSS

Tailwind CSS 案例练习

💫

Apple

Apple 官网模仿练习

- + \ No newline at end of file diff --git a/sw.js b/sw.js index 7226b275..2c30f825 100644 --- a/sw.js +++ b/sw.js @@ -1 +1 @@ -if(!self.define){let e,s={};const r=(r,n)=>(r=new URL(r+".js",n).href,s[r]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=r,e.onload=s,document.head.appendChild(e)}else e=r,importScripts(r),s()})).then((()=>{let e=s[r];if(!e)throw new Error(`Module ${r} didn’t register its module`);return e})));self.define=(n,l)=>{const a=e||("document"in self?document.currentScript.src:"")||location.href;if(s[a])return;let i={};const t=e=>r(e,a),u={module:{uri:a},exports:i,require:t};s[a]=Promise.all(n.map((e=>u[e]||t(e)))).then((e=>(l(...e),i)))}}define(["./workbox-e1498109"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"404.html",revision:"2bafd99b6ca419f7018317fbccba2820"},{url:"assets/app.9c82a621.js",revision:null},{url:"assets/BackEnd_NodeJS_MongoDB笔记.md.3e653f32.js",revision:null},{url:"assets/BackEnd_NodeJS_MongoDB笔记.md.3e653f32.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node大文件上传.md.0f0f8a2f.js",revision:null},{url:"assets/BackEnd_NodeJS_Node大文件上传.md.0f0f8a2f.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node学习笔记.md.88da0dac.js",revision:null},{url:"assets/BackEnd_NodeJS_Node学习笔记.md.88da0dac.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node简单上传文件.md.cb933c51.js",revision:null},{url:"assets/BackEnd_NodeJS_Node简单上传文件.md.cb933c51.lean.js",revision:null},{url:"assets/BackEnd_Server_Docker学习笔记.md.164d2751.js",revision:null},{url:"assets/BackEnd_Server_Docker学习笔记.md.164d2751.lean.js",revision:null},{url:"assets/BackEnd_Server_Nginx学习笔记.md.f76c0b5f.js",revision:null},{url:"assets/BackEnd_Server_Nginx学习笔记.md.f76c0b5f.lean.js",revision:null},{url:"assets/chunks/@localSearchIndexroot.23c6f391.js",revision:null},{url:"assets/chunks/DemoWrap.92a7e58b.js",revision:null},{url:"assets/chunks/framework.6f270558.js",revision:null},{url:"assets/chunks/theme.e4abebe2.js",revision:null},{url:"assets/chunks/VPLocalSearchBox.bbaf48b0.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结一.md.a2c16c18.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结一.md.a2c16c18.lean.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结三.md.de737482.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结三.md.de737482.lean.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结二.md.ecf21d0e.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结二.md.ecf21d0e.lean.js",revision:null},{url:"assets/Framework_React_React基础总结一.md.5d1eca63.js",revision:null},{url:"assets/Framework_React_React基础总结一.md.5d1eca63.lean.js",revision:null},{url:"assets/Framework_Vitest_测试流程.md.1bec874b.js",revision:null},{url:"assets/Framework_Vitest_测试流程.md.1bec874b.lean.js",revision:null},{url:"assets/Framework_Vue_Vite原理学习.md.17cdf2a9.js",revision:null},{url:"assets/Framework_Vue_Vite原理学习.md.17cdf2a9.lean.js",revision:null},{url:"assets/Framework_Vue_Vue2项目迁移Vite5.md.08bbf0e1.js",revision:null},{url:"assets/Framework_Vue_Vue2项目迁移Vite5.md.08bbf0e1.lean.js",revision:null},{url:"assets/Framework_Vue_Vue3补漏笔记.md.cdb7f826.js",revision:null},{url:"assets/Framework_Vue_Vue3补漏笔记.md.cdb7f826.lean.js",revision:null},{url:"assets/Framework_Vue_分页与搜索条件记录并回显优化.md.cd71ec7b.js",revision:null},{url:"assets/Framework_Vue_分页与搜索条件记录并回显优化.md.cd71ec7b.lean.js",revision:null},{url:"assets/Framework_Vue_列表最后一条数据删除处理.md.b92fcd66.js",revision:null},{url:"assets/Framework_Vue_列表最后一条数据删除处理.md.b92fcd66.lean.js",revision:null},{url:"assets/Framework_Vue_网站添加 PWA.md.62222ba8.js",revision:null},{url:"assets/Framework_Vue_网站添加 PWA.md.62222ba8.lean.js",revision:null},{url:"assets/FrontEnd_CSS_Grid布局学习笔记.md.932791a5.js",revision:null},{url:"assets/FrontEnd_CSS_Grid布局学习笔记.md.932791a5.lean.js",revision:null},{url:"assets/FrontEnd_CSS_常用代码段.md.dc53e290.js",revision:null},{url:"assets/FrontEnd_CSS_常用代码段.md.dc53e290.lean.js",revision:null},{url:"assets/FrontEnd_CSS_揭秘读书摘要.md.43c354e0.js",revision:null},{url:"assets/FrontEnd_CSS_揭秘读书摘要.md.43c354e0.lean.js",revision:null},{url:"assets/FrontEnd_Git_Git常用操作.md.20c27f45.js",revision:null},{url:"assets/FrontEnd_Git_Git常用操作.md.20c27f45.lean.js",revision:null},{url:"assets/FrontEnd_Git_Terminal终端美化.md.88db5440.js",revision:null},{url:"assets/FrontEnd_Git_Terminal终端美化.md.88db5440.lean.js",revision:null},{url:"assets/FrontEnd_Git_配置 Ubuntu 服务器免密登录.md.08e29edd.js",revision:null},{url:"assets/FrontEnd_Git_配置 Ubuntu 服务器免密登录.md.08e29edd.lean.js",revision:null},{url:"assets/FrontEnd_Git_配置多个平台SSH.md.2e754475.js",revision:null},{url:"assets/FrontEnd_Git_配置多个平台SSH.md.2e754475.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_async与await.md.eb4118bc.js",revision:null},{url:"assets/FrontEnd_JavaScript_async与await.md.eb4118bc.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_代码分支优化.md.13067212.js",revision:null},{url:"assets/FrontEnd_JavaScript_代码分支优化.md.13067212.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_图片懒加载.md.29ab2d8d.js",revision:null},{url:"assets/FrontEnd_JavaScript_图片懒加载.md.29ab2d8d.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习一.md.fd55bc5f.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习一.md.fd55bc5f.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习二.md.31ec83ea.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习二.md.31ec83ea.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_常见算法.md.96b72916.js",revision:null},{url:"assets/FrontEnd_JavaScript_常见算法.md.96b72916.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_手写Promise.md.974a06d0.js",revision:null},{url:"assets/FrontEnd_JavaScript_手写Promise.md.974a06d0.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_数据去重.md.3a07257f.js",revision:null},{url:"assets/FrontEnd_JavaScript_数据去重.md.3a07257f.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_数组求集合.md.20b6748e.js",revision:null},{url:"assets/FrontEnd_JavaScript_数组求集合.md.20b6748e.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_文件系统.md.47463046.js",revision:null},{url:"assets/FrontEnd_JavaScript_文件系统.md.47463046.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_易混淆的位置属性.md.cc1437af.js",revision:null},{url:"assets/FrontEnd_JavaScript_易混淆的位置属性.md.cc1437af.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_正则表达式.md.e7436b97.js",revision:null},{url:"assets/FrontEnd_JavaScript_正则表达式.md.e7436b97.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_获取目录结构.md.b4a1ffbd.js",revision:null},{url:"assets/FrontEnd_JavaScript_获取目录结构.md.b4a1ffbd.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_高阶函数.md.d8938548.js",revision:null},{url:"assets/FrontEnd_JavaScript_高阶函数.md.d8938548.lean.js",revision:null},{url:"assets/FrontEnd_Other_Mac系统环境快速搭建.md.ff5dfb6c.js",revision:null},{url:"assets/FrontEnd_Other_Mac系统环境快速搭建.md.ff5dfb6c.lean.js",revision:null},{url:"assets/FrontEnd_Other_package文件详解.md.434daa06.js",revision:null},{url:"assets/FrontEnd_Other_package文件详解.md.434daa06.lean.js",revision:null},{url:"assets/FrontEnd_Shell_自动部署脚本.md.896d7928.js",revision:null},{url:"assets/FrontEnd_Shell_自动部署脚本.md.896d7928.lean.js",revision:null},{url:"assets/FrontEnd_Shell_获取页面所有域名并去重.md.465973b1.js",revision:null},{url:"assets/FrontEnd_Shell_获取页面所有域名并去重.md.465973b1.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_初学笔记.md.30e5eda5.js",revision:null},{url:"assets/FrontEnd_TypeScript_初学笔记.md.30e5eda5.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_进阶使用技巧.md.e245bbde.js",revision:null},{url:"assets/FrontEnd_TypeScript_进阶使用技巧.md.e245bbde.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_配置文件详解.md.7b1b4a1b.js",revision:null},{url:"assets/FrontEnd_TypeScript_配置文件详解.md.7b1b4a1b.lean.js",revision:null},{url:"assets/GoodTool_index.md.b47e6c9d.js",revision:null},{url:"assets/GoodTool_index.md.b47e6c9d.lean.js",revision:null},{url:"assets/index.md.ed610fba.js",revision:null},{url:"assets/index.md.ed610fba.lean.js",revision:null},{url:"assets/Interview_Brower_事件循环机制.md.10b838a4.js",revision:null},{url:"assets/Interview_Brower_事件循环机制.md.10b838a4.lean.js",revision:null},{url:"assets/Interview_Brower_浏览器网页请求过程.md.d5aa7105.js",revision:null},{url:"assets/Interview_Brower_浏览器网页请求过程.md.d5aa7105.lean.js",revision:null},{url:"assets/Interview_Brower_计算机网络.md.aff78451.js",revision:null},{url:"assets/Interview_Brower_计算机网络.md.aff78451.lean.js",revision:null},{url:"assets/Interview_CSS_基础面试题.md.72908ec5.js",revision:null},{url:"assets/Interview_CSS_基础面试题.md.72908ec5.lean.js",revision:null},{url:"assets/Interview_CSS_进阶面试题.md.04516fb2.js",revision:null},{url:"assets/Interview_CSS_进阶面试题.md.04516fb2.lean.js",revision:null},{url:"assets/Interview_CSS_高级面试题.md.9a995720.js",revision:null},{url:"assets/Interview_CSS_高级面试题.md.9a995720.lean.js",revision:null},{url:"assets/Interview_index.md.17b8799a.js",revision:null},{url:"assets/Interview_index.md.17b8799a.lean.js",revision:null},{url:"assets/Interview_JavaScript_Promise相关.md.2bb413a9.js",revision:null},{url:"assets/Interview_JavaScript_Promise相关.md.2bb413a9.lean.js",revision:null},{url:"assets/Interview_JavaScript_原型与原型链.md.1e422baf.js",revision:null},{url:"assets/Interview_JavaScript_原型与原型链.md.1e422baf.lean.js",revision:null},{url:"assets/Interview_JavaScript_基础面试题.md.9a7ba18d.js",revision:null},{url:"assets/Interview_JavaScript_基础面试题.md.9a7ba18d.lean.js",revision:null},{url:"assets/Interview_JavaScript_字符串常用方法.md.71aee02e.js",revision:null},{url:"assets/Interview_JavaScript_字符串常用方法.md.71aee02e.lean.js",revision:null},{url:"assets/Interview_JavaScript_进阶面试题.md.2f74167b.js",revision:null},{url:"assets/Interview_JavaScript_进阶面试题.md.2f74167b.lean.js",revision:null},{url:"assets/Interview_JavaScript_高级面试题.md.8ae01eb6.js",revision:null},{url:"assets/Interview_JavaScript_高级面试题.md.8ae01eb6.lean.js",revision:null},{url:"assets/Interview_Vue_npm run xxx执行过程.md.bd3396af.js",revision:null},{url:"assets/Interview_Vue_npm run xxx执行过程.md.bd3396af.lean.js",revision:null},{url:"assets/Interview_Vue_Vue响应式原理.md.58fa36fa.js",revision:null},{url:"assets/Interview_Vue_Vue响应式原理.md.58fa36fa.lean.js",revision:null},{url:"assets/Interview_Vue_Vue基础篇.md.005843ef.js",revision:null},{url:"assets/Interview_Vue_Vue基础篇.md.005843ef.lean.js",revision:null},{url:"assets/Interview_Vue_Vue声明周期.md.0b236c1d.js",revision:null},{url:"assets/Interview_Vue_Vue声明周期.md.0b236c1d.lean.js",revision:null},{url:"assets/Interview_Vue_Vue进阶篇.md.ba1a9bc5.js",revision:null},{url:"assets/Interview_Vue_Vue进阶篇.md.ba1a9bc5.lean.js",revision:null},{url:"assets/Interview_Vue_前端项目优化.md.0e40d9e5.js",revision:null},{url:"assets/Interview_Vue_前端项目优化.md.0e40d9e5.lean.js",revision:null},{url:"assets/Interview_Vue_常见Path区别.md.18d01da8.js",revision:null},{url:"assets/Interview_Vue_常见Path区别.md.18d01da8.lean.js",revision:null},{url:"assets/Interview_Vue_自定义指令.md.93d3c50c.js",revision:null},{url:"assets/Interview_Vue_自定义指令.md.93d3c50c.lean.js",revision:null},{url:"assets/Problem_Graphical_Antv代码片段集锦.md.41154fb4.js",revision:null},{url:"assets/Problem_Graphical_Antv代码片段集锦.md.41154fb4.lean.js",revision:null},{url:"assets/Problem_Graphical_Antv使用总结.md.b99544ba.js",revision:null},{url:"assets/Problem_Graphical_Antv使用总结.md.b99544ba.lean.js",revision:null},{url:"assets/Problem_Graphical_Echarts问题总结.md.4ed6d0ff.js",revision:null},{url:"assets/Problem_Graphical_Echarts问题总结.md.4ed6d0ff.lean.js",revision:null},{url:"assets/Problem_index.md.b281a732.js",revision:null},{url:"assets/Problem_index.md.b281a732.lean.js",revision:null},{url:"assets/Problem_Nuxt3_Nuxt3项目踩坑.md.931ec887.js",revision:null},{url:"assets/Problem_Nuxt3_Nuxt3项目踩坑.md.931ec887.lean.js",revision:null},{url:"assets/Problem_VitePress_VitePress踩坑记录.md.3a0ae4bd.js",revision:null},{url:"assets/Problem_VitePress_VitePress踩坑记录.md.3a0ae4bd.lean.js",revision:null},{url:"assets/Problem_VitePress_VuePress踩坑记录.md.3b4455e5.js",revision:null},{url:"assets/Problem_VitePress_VuePress踩坑记录.md.3b4455e5.lean.js",revision:null},{url:"assets/Problem_VueProject_VueRouter加密query.md.16195f5d.js",revision:null},{url:"assets/Problem_VueProject_VueRouter加密query.md.16195f5d.lean.js",revision:null},{url:"assets/Problem_VueProject_Vue项目踩坑一.md.f5091261.js",revision:null},{url:"assets/Problem_VueProject_Vue项目踩坑一.md.f5091261.lean.js",revision:null},{url:"assets/style.fa31c5fa.css",revision:null},{url:"BackEnd/NodeJS/MongoDB笔记.html",revision:"a96ada7cafb13a15111ee8e86fa049ea"},{url:"BackEnd/NodeJS/Node大文件上传.html",revision:"ffef6e292792f7885c12032567305bb8"},{url:"BackEnd/NodeJS/Node学习笔记.html",revision:"1e2af82005919fb1ae85c38eee8f8dcb"},{url:"BackEnd/NodeJS/Node简单上传文件.html",revision:"3efee48b7393ade4c2906dc6a3485e73"},{url:"BackEnd/Server/Docker学习笔记.html",revision:"bb97c46d1e19e8af9a3502836b527bf7"},{url:"BackEnd/Server/Nginx学习笔记.html",revision:"ba3a61c255314188b71663366b0f3ee2"},{url:"Framework/Angular/Angular基础总结一.html",revision:"b6cc20eb1aa72e9ac0f05440a57262a7"},{url:"Framework/Angular/Angular基础总结三.html",revision:"15e0e11438a7f794cbb9a72f988f4f51"},{url:"Framework/Angular/Angular基础总结二.html",revision:"33caa6daba96a107dc84c044c7d49686"},{url:"Framework/React/React基础总结一.html",revision:"fbf8a1ada10f3d0d0f2be9597cd5ad68"},{url:"Framework/Vitest/测试流程.html",revision:"ff5b2c8a7bbf55bafcd9b392eb3f0bf7"},{url:"Framework/Vue/Vite原理学习.html",revision:"df7a349b0dec2d26551c375f62ab633f"},{url:"Framework/Vue/Vue2项目迁移Vite5.html",revision:"7fb641cb1c9f39468c2144fa1b863625"},{url:"Framework/Vue/Vue3补漏笔记.html",revision:"84922fce48352c3dd0df562eca740787"},{url:"Framework/Vue/分页与搜索条件记录并回显优化.html",revision:"032619555782af3a2a677b84fc85ca42"},{url:"Framework/Vue/列表最后一条数据删除处理.html",revision:"9152ba6837d808937df819141afc97c9"},{url:"Framework/Vue/网站添加 PWA.html",revision:"e3fb4826c12b294fc2b0703be256f94a"},{url:"FrontEnd/CSS/Grid布局学习笔记.html",revision:"0ae5bde82c37a7483bcb73b47062e3b5"},{url:"FrontEnd/CSS/常用代码段.html",revision:"a2e4aa5fe4431757a21ac58ffe578f2b"},{url:"FrontEnd/CSS/揭秘读书摘要.html",revision:"da0572fabfe3907b6a38677412a182d8"},{url:"FrontEnd/Git/Git常用操作.html",revision:"1939c7eb2ae06eda804a7cb2c8e198b9"},{url:"FrontEnd/Git/Terminal终端美化.html",revision:"0f6fb6636b779371e964e6cdfc0d925f"},{url:"FrontEnd/Git/配置 Ubuntu 服务器免密登录.html",revision:"24f63a0f9e7068b0da39f5f3b5494e90"},{url:"FrontEnd/Git/配置多个平台SSH.html",revision:"84a65b4531ea798a5229ec36f45ecfff"},{url:"FrontEnd/JavaScript/async与await.html",revision:"919247adacd77206417e00fcff43147f"},{url:"FrontEnd/JavaScript/代码分支优化.html",revision:"42185d6c91e6239d1bf1910b476c5852"},{url:"FrontEnd/JavaScript/图片懒加载.html",revision:"3fd1561757ca7224763c4188c8455982"},{url:"FrontEnd/JavaScript/基础复习一.html",revision:"b3d6498c2fc2b66ca634dc9b74506061"},{url:"FrontEnd/JavaScript/基础复习二.html",revision:"3b8eb12ab577354f96c7737bc0124a52"},{url:"FrontEnd/JavaScript/常见算法.html",revision:"04dbb3f9d36d23f9945d5668676a4377"},{url:"FrontEnd/JavaScript/手写Promise.html",revision:"75ae4eca93200a3e5d7198f3a43b6397"},{url:"FrontEnd/JavaScript/数据去重.html",revision:"3a071c944ce1771dbc508795104e6adc"},{url:"FrontEnd/JavaScript/数组求集合.html",revision:"5ec81e7492ecb313767993b7a81d8e51"},{url:"FrontEnd/JavaScript/文件系统.html",revision:"43c5547cb3e08bcbc7e1ac5a2b45622f"},{url:"FrontEnd/JavaScript/易混淆的位置属性.html",revision:"21aa83edae109116cd727fa1dd4ba245"},{url:"FrontEnd/JavaScript/正则表达式.html",revision:"f963db6014a1cc3ce30bf5ab7629fa22"},{url:"FrontEnd/JavaScript/获取目录结构.html",revision:"c5b49926bf896ff972d8feab11aad4a9"},{url:"FrontEnd/JavaScript/高阶函数.html",revision:"96c9e1abc1d40935abd58361143d7765"},{url:"FrontEnd/Other/Mac系统环境快速搭建.html",revision:"6c75f5893e94db4ec88848e3e4459889"},{url:"FrontEnd/Other/package文件详解.html",revision:"a69cc6fa31b25902636ccd4c9238af58"},{url:"FrontEnd/Shell/自动部署脚本.html",revision:"eb874aaa8dc760043767353da26f0a24"},{url:"FrontEnd/Shell/获取页面所有域名并去重.html",revision:"0fda59b12f1233be6167cac3a1705afb"},{url:"FrontEnd/TypeScript/初学笔记.html",revision:"8a0bed33b7a1aa4da74adaa96fa454a9"},{url:"FrontEnd/TypeScript/进阶使用技巧.html",revision:"22819e91c3a348813460630f9341713d"},{url:"FrontEnd/TypeScript/配置文件详解.html",revision:"1e64235b626242b83702b60b070177d4"},{url:"GoodTool/index.html",revision:"4e1c6ebfdee94776511823a273349fac"},{url:"index.html",revision:"d8f6b65e94071e0e9fbe19e960942c70"},{url:"Interview/Brower/事件循环机制.html",revision:"1133dd066edee74871ed230eb3d98ff0"},{url:"Interview/Brower/浏览器网页请求过程.html",revision:"f846d3eecfe99ece31d3bca52725497f"},{url:"Interview/Brower/计算机网络.html",revision:"2d95fb2a6b1ef7177dc37512af860c71"},{url:"Interview/CSS/基础面试题.html",revision:"247110f100c9e973f6e28670ba4c809d"},{url:"Interview/CSS/进阶面试题.html",revision:"c08ad8a1f3110250148d58ce6d36bd88"},{url:"Interview/CSS/高级面试题.html",revision:"b6281c54f1e1edb2d617e94bf59f543e"},{url:"Interview/index.html",revision:"2855ec6bf2cd6892dbf27cfb937b423a"},{url:"Interview/JavaScript/Promise相关.html",revision:"09421d0779c3335253e00c869d8af8d6"},{url:"Interview/JavaScript/原型与原型链.html",revision:"5ceb13ceb80820bdd9cb6dd7619395ca"},{url:"Interview/JavaScript/基础面试题.html",revision:"f5c6ab5bac8b32d31ee23687c015dd90"},{url:"Interview/JavaScript/字符串常用方法.html",revision:"8f3e3e30a8146cbd72cb3bb5451ef578"},{url:"Interview/JavaScript/进阶面试题.html",revision:"e6285f451e0e5869af67b6bd1444cd91"},{url:"Interview/JavaScript/高级面试题.html",revision:"2126383f4635654eff9373f7573e9ad8"},{url:"Interview/Vue/npm run xxx执行过程.html",revision:"9c7f6713548ec17b55a9027792366c17"},{url:"Interview/Vue/Vue响应式原理.html",revision:"e056afbf817b6e7eca1a05ee7874abe8"},{url:"Interview/Vue/Vue基础篇.html",revision:"f7e3dd647c54a52c1228ce0966ca2695"},{url:"Interview/Vue/Vue声明周期.html",revision:"98f912059451fc6f5edbcb7cc02890be"},{url:"Interview/Vue/Vue进阶篇.html",revision:"aea2af5ec2f3507f962f65a2b518ddd3"},{url:"Interview/Vue/前端项目优化.html",revision:"f34848397d7d9eed48a18de05a279029"},{url:"Interview/Vue/常见Path区别.html",revision:"8c43c4463b55927d39a2645ef5f53c2f"},{url:"Interview/Vue/自定义指令.html",revision:"39681c39e280f2158f26072c9c82ed98"},{url:"Problem/Graphical/Antv代码片段集锦.html",revision:"f804ef092b3e994e886ae0e730961c96"},{url:"Problem/Graphical/Antv使用总结.html",revision:"b31962d450b67eb839477c9a9b6d4da1"},{url:"Problem/Graphical/Echarts问题总结.html",revision:"6a8b69d273887142d9f8d30a9c060364"},{url:"Problem/index.html",revision:"025cbfc3c74d59d568c07462ecc33ad5"},{url:"Problem/Nuxt3/Nuxt3项目踩坑.html",revision:"de59e0d2fdb7bd44a0d4beee8f06e31f"},{url:"Problem/VitePress/VitePress踩坑记录.html",revision:"df84004c4761ac0b2678af5e23d00be7"},{url:"Problem/VitePress/VuePress踩坑记录.html",revision:"fcb14f9cc49197b5893483ee5b669caf"},{url:"Problem/VueProject/VueRouter加密query.html",revision:"2641cf627def29811199bfb126293f06"},{url:"Problem/VueProject/Vue项目踩坑一.html",revision:"39e01bdfdfad626397d2dcf886d739b9"},{url:"registerSW.js",revision:"385b79d064fe7f8195f90acea5c7388b"},{url:"pwa-512x512.png",revision:"cb765af63e04e54c9125f175a7b67333"},{url:"pwa-192x192.png",revision:"26a17df838f4a40e035971d0f34b32c1"},{url:"manifest.webmanifest",revision:"c2bad106e6b4fb26e84a68f2bdf86579"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))})); +if(!self.define){let e,s={};const r=(r,n)=>(r=new URL(r+".js",n).href,s[r]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=r,e.onload=s,document.head.appendChild(e)}else e=r,importScripts(r),s()})).then((()=>{let e=s[r];if(!e)throw new Error(`Module ${r} didn’t register its module`);return e})));self.define=(n,l)=>{const a=e||("document"in self?document.currentScript.src:"")||location.href;if(s[a])return;let i={};const t=e=>r(e,a),d={module:{uri:a},exports:i,require:t};s[a]=Promise.all(n.map((e=>d[e]||t(e)))).then((e=>(l(...e),i)))}}define(["./workbox-e1498109"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"404.html",revision:"4a9f12094256daa6f37d99b25821eb5a"},{url:"assets/app.9c82a621.js",revision:null},{url:"assets/BackEnd_NodeJS_MongoDB笔记.md.3e653f32.js",revision:null},{url:"assets/BackEnd_NodeJS_MongoDB笔记.md.3e653f32.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node大文件上传.md.0f0f8a2f.js",revision:null},{url:"assets/BackEnd_NodeJS_Node大文件上传.md.0f0f8a2f.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node学习笔记.md.88da0dac.js",revision:null},{url:"assets/BackEnd_NodeJS_Node学习笔记.md.88da0dac.lean.js",revision:null},{url:"assets/BackEnd_NodeJS_Node简单上传文件.md.cb933c51.js",revision:null},{url:"assets/BackEnd_NodeJS_Node简单上传文件.md.cb933c51.lean.js",revision:null},{url:"assets/BackEnd_Server_Docker学习笔记.md.164d2751.js",revision:null},{url:"assets/BackEnd_Server_Docker学习笔记.md.164d2751.lean.js",revision:null},{url:"assets/BackEnd_Server_Nginx学习笔记.md.f76c0b5f.js",revision:null},{url:"assets/BackEnd_Server_Nginx学习笔记.md.f76c0b5f.lean.js",revision:null},{url:"assets/chunks/@localSearchIndexroot.23c6f391.js",revision:null},{url:"assets/chunks/DemoWrap.92a7e58b.js",revision:null},{url:"assets/chunks/framework.6f270558.js",revision:null},{url:"assets/chunks/theme.e4abebe2.js",revision:null},{url:"assets/chunks/VPLocalSearchBox.bbaf48b0.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结一.md.a2c16c18.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结一.md.a2c16c18.lean.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结三.md.de737482.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结三.md.de737482.lean.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结二.md.ecf21d0e.js",revision:null},{url:"assets/Framework_Angular_Angular基础总结二.md.ecf21d0e.lean.js",revision:null},{url:"assets/Framework_React_React基础总结一.md.5d1eca63.js",revision:null},{url:"assets/Framework_React_React基础总结一.md.5d1eca63.lean.js",revision:null},{url:"assets/Framework_Vitest_测试流程.md.1bec874b.js",revision:null},{url:"assets/Framework_Vitest_测试流程.md.1bec874b.lean.js",revision:null},{url:"assets/Framework_Vue_Vite原理学习.md.17cdf2a9.js",revision:null},{url:"assets/Framework_Vue_Vite原理学习.md.17cdf2a9.lean.js",revision:null},{url:"assets/Framework_Vue_Vue2项目迁移Vite5.md.08bbf0e1.js",revision:null},{url:"assets/Framework_Vue_Vue2项目迁移Vite5.md.08bbf0e1.lean.js",revision:null},{url:"assets/Framework_Vue_Vue3补漏笔记.md.cdb7f826.js",revision:null},{url:"assets/Framework_Vue_Vue3补漏笔记.md.cdb7f826.lean.js",revision:null},{url:"assets/Framework_Vue_分页与搜索条件记录并回显优化.md.cd71ec7b.js",revision:null},{url:"assets/Framework_Vue_分页与搜索条件记录并回显优化.md.cd71ec7b.lean.js",revision:null},{url:"assets/Framework_Vue_列表最后一条数据删除处理.md.b92fcd66.js",revision:null},{url:"assets/Framework_Vue_列表最后一条数据删除处理.md.b92fcd66.lean.js",revision:null},{url:"assets/Framework_Vue_网站添加 PWA.md.62222ba8.js",revision:null},{url:"assets/Framework_Vue_网站添加 PWA.md.62222ba8.lean.js",revision:null},{url:"assets/FrontEnd_CSS_Grid布局学习笔记.md.932791a5.js",revision:null},{url:"assets/FrontEnd_CSS_Grid布局学习笔记.md.932791a5.lean.js",revision:null},{url:"assets/FrontEnd_CSS_常用代码段.md.dc53e290.js",revision:null},{url:"assets/FrontEnd_CSS_常用代码段.md.dc53e290.lean.js",revision:null},{url:"assets/FrontEnd_CSS_揭秘读书摘要.md.43c354e0.js",revision:null},{url:"assets/FrontEnd_CSS_揭秘读书摘要.md.43c354e0.lean.js",revision:null},{url:"assets/FrontEnd_Git_Git常用操作.md.20c27f45.js",revision:null},{url:"assets/FrontEnd_Git_Git常用操作.md.20c27f45.lean.js",revision:null},{url:"assets/FrontEnd_Git_Terminal终端美化.md.88db5440.js",revision:null},{url:"assets/FrontEnd_Git_Terminal终端美化.md.88db5440.lean.js",revision:null},{url:"assets/FrontEnd_Git_配置 Ubuntu 服务器免密登录.md.08e29edd.js",revision:null},{url:"assets/FrontEnd_Git_配置 Ubuntu 服务器免密登录.md.08e29edd.lean.js",revision:null},{url:"assets/FrontEnd_Git_配置多个平台SSH.md.2e754475.js",revision:null},{url:"assets/FrontEnd_Git_配置多个平台SSH.md.2e754475.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_async与await.md.eb4118bc.js",revision:null},{url:"assets/FrontEnd_JavaScript_async与await.md.eb4118bc.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_代码分支优化.md.13067212.js",revision:null},{url:"assets/FrontEnd_JavaScript_代码分支优化.md.13067212.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_图片懒加载.md.29ab2d8d.js",revision:null},{url:"assets/FrontEnd_JavaScript_图片懒加载.md.29ab2d8d.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习一.md.fd55bc5f.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习一.md.fd55bc5f.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习二.md.31ec83ea.js",revision:null},{url:"assets/FrontEnd_JavaScript_基础复习二.md.31ec83ea.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_常见算法.md.96b72916.js",revision:null},{url:"assets/FrontEnd_JavaScript_常见算法.md.96b72916.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_手写Promise.md.974a06d0.js",revision:null},{url:"assets/FrontEnd_JavaScript_手写Promise.md.974a06d0.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_数据去重.md.3a07257f.js",revision:null},{url:"assets/FrontEnd_JavaScript_数据去重.md.3a07257f.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_数组求集合.md.20b6748e.js",revision:null},{url:"assets/FrontEnd_JavaScript_数组求集合.md.20b6748e.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_文件系统.md.47463046.js",revision:null},{url:"assets/FrontEnd_JavaScript_文件系统.md.47463046.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_易混淆的位置属性.md.cc1437af.js",revision:null},{url:"assets/FrontEnd_JavaScript_易混淆的位置属性.md.cc1437af.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_正则表达式.md.e7436b97.js",revision:null},{url:"assets/FrontEnd_JavaScript_正则表达式.md.e7436b97.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_获取目录结构.md.b4a1ffbd.js",revision:null},{url:"assets/FrontEnd_JavaScript_获取目录结构.md.b4a1ffbd.lean.js",revision:null},{url:"assets/FrontEnd_JavaScript_高阶函数.md.d8938548.js",revision:null},{url:"assets/FrontEnd_JavaScript_高阶函数.md.d8938548.lean.js",revision:null},{url:"assets/FrontEnd_Other_Mac系统环境快速搭建.md.ff5dfb6c.js",revision:null},{url:"assets/FrontEnd_Other_Mac系统环境快速搭建.md.ff5dfb6c.lean.js",revision:null},{url:"assets/FrontEnd_Other_package文件详解.md.434daa06.js",revision:null},{url:"assets/FrontEnd_Other_package文件详解.md.434daa06.lean.js",revision:null},{url:"assets/FrontEnd_Shell_自动部署脚本.md.896d7928.js",revision:null},{url:"assets/FrontEnd_Shell_自动部署脚本.md.896d7928.lean.js",revision:null},{url:"assets/FrontEnd_Shell_获取页面所有域名并去重.md.465973b1.js",revision:null},{url:"assets/FrontEnd_Shell_获取页面所有域名并去重.md.465973b1.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_初学笔记.md.30e5eda5.js",revision:null},{url:"assets/FrontEnd_TypeScript_初学笔记.md.30e5eda5.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_进阶使用技巧.md.e245bbde.js",revision:null},{url:"assets/FrontEnd_TypeScript_进阶使用技巧.md.e245bbde.lean.js",revision:null},{url:"assets/FrontEnd_TypeScript_配置文件详解.md.7b1b4a1b.js",revision:null},{url:"assets/FrontEnd_TypeScript_配置文件详解.md.7b1b4a1b.lean.js",revision:null},{url:"assets/GoodTool_index.md.b47e6c9d.js",revision:null},{url:"assets/GoodTool_index.md.b47e6c9d.lean.js",revision:null},{url:"assets/index.md.ed610fba.js",revision:null},{url:"assets/index.md.ed610fba.lean.js",revision:null},{url:"assets/Interview_Brower_事件循环机制.md.10b838a4.js",revision:null},{url:"assets/Interview_Brower_事件循环机制.md.10b838a4.lean.js",revision:null},{url:"assets/Interview_Brower_浏览器网页请求过程.md.d5aa7105.js",revision:null},{url:"assets/Interview_Brower_浏览器网页请求过程.md.d5aa7105.lean.js",revision:null},{url:"assets/Interview_Brower_计算机网络.md.aff78451.js",revision:null},{url:"assets/Interview_Brower_计算机网络.md.aff78451.lean.js",revision:null},{url:"assets/Interview_CSS_基础面试题.md.72908ec5.js",revision:null},{url:"assets/Interview_CSS_基础面试题.md.72908ec5.lean.js",revision:null},{url:"assets/Interview_CSS_进阶面试题.md.04516fb2.js",revision:null},{url:"assets/Interview_CSS_进阶面试题.md.04516fb2.lean.js",revision:null},{url:"assets/Interview_CSS_高级面试题.md.9a995720.js",revision:null},{url:"assets/Interview_CSS_高级面试题.md.9a995720.lean.js",revision:null},{url:"assets/Interview_index.md.17b8799a.js",revision:null},{url:"assets/Interview_index.md.17b8799a.lean.js",revision:null},{url:"assets/Interview_JavaScript_Promise相关.md.2bb413a9.js",revision:null},{url:"assets/Interview_JavaScript_Promise相关.md.2bb413a9.lean.js",revision:null},{url:"assets/Interview_JavaScript_原型与原型链.md.1e422baf.js",revision:null},{url:"assets/Interview_JavaScript_原型与原型链.md.1e422baf.lean.js",revision:null},{url:"assets/Interview_JavaScript_基础面试题.md.9a7ba18d.js",revision:null},{url:"assets/Interview_JavaScript_基础面试题.md.9a7ba18d.lean.js",revision:null},{url:"assets/Interview_JavaScript_字符串常用方法.md.71aee02e.js",revision:null},{url:"assets/Interview_JavaScript_字符串常用方法.md.71aee02e.lean.js",revision:null},{url:"assets/Interview_JavaScript_进阶面试题.md.2f74167b.js",revision:null},{url:"assets/Interview_JavaScript_进阶面试题.md.2f74167b.lean.js",revision:null},{url:"assets/Interview_JavaScript_高级面试题.md.8ae01eb6.js",revision:null},{url:"assets/Interview_JavaScript_高级面试题.md.8ae01eb6.lean.js",revision:null},{url:"assets/Interview_Vue_npm run xxx执行过程.md.bd3396af.js",revision:null},{url:"assets/Interview_Vue_npm run xxx执行过程.md.bd3396af.lean.js",revision:null},{url:"assets/Interview_Vue_Vue响应式原理.md.58fa36fa.js",revision:null},{url:"assets/Interview_Vue_Vue响应式原理.md.58fa36fa.lean.js",revision:null},{url:"assets/Interview_Vue_Vue基础篇.md.005843ef.js",revision:null},{url:"assets/Interview_Vue_Vue基础篇.md.005843ef.lean.js",revision:null},{url:"assets/Interview_Vue_Vue声明周期.md.0b236c1d.js",revision:null},{url:"assets/Interview_Vue_Vue声明周期.md.0b236c1d.lean.js",revision:null},{url:"assets/Interview_Vue_Vue进阶篇.md.ba1a9bc5.js",revision:null},{url:"assets/Interview_Vue_Vue进阶篇.md.ba1a9bc5.lean.js",revision:null},{url:"assets/Interview_Vue_前端项目优化.md.0e40d9e5.js",revision:null},{url:"assets/Interview_Vue_前端项目优化.md.0e40d9e5.lean.js",revision:null},{url:"assets/Interview_Vue_常见Path区别.md.18d01da8.js",revision:null},{url:"assets/Interview_Vue_常见Path区别.md.18d01da8.lean.js",revision:null},{url:"assets/Interview_Vue_自定义指令.md.93d3c50c.js",revision:null},{url:"assets/Interview_Vue_自定义指令.md.93d3c50c.lean.js",revision:null},{url:"assets/Problem_Graphical_Antv代码片段集锦.md.41154fb4.js",revision:null},{url:"assets/Problem_Graphical_Antv代码片段集锦.md.41154fb4.lean.js",revision:null},{url:"assets/Problem_Graphical_Antv使用总结.md.b99544ba.js",revision:null},{url:"assets/Problem_Graphical_Antv使用总结.md.b99544ba.lean.js",revision:null},{url:"assets/Problem_Graphical_Echarts问题总结.md.4ed6d0ff.js",revision:null},{url:"assets/Problem_Graphical_Echarts问题总结.md.4ed6d0ff.lean.js",revision:null},{url:"assets/Problem_index.md.b281a732.js",revision:null},{url:"assets/Problem_index.md.b281a732.lean.js",revision:null},{url:"assets/Problem_Nuxt3_Nuxt3项目踩坑.md.931ec887.js",revision:null},{url:"assets/Problem_Nuxt3_Nuxt3项目踩坑.md.931ec887.lean.js",revision:null},{url:"assets/Problem_VitePress_VitePress踩坑记录.md.3a0ae4bd.js",revision:null},{url:"assets/Problem_VitePress_VitePress踩坑记录.md.3a0ae4bd.lean.js",revision:null},{url:"assets/Problem_VitePress_VuePress踩坑记录.md.3b4455e5.js",revision:null},{url:"assets/Problem_VitePress_VuePress踩坑记录.md.3b4455e5.lean.js",revision:null},{url:"assets/Problem_VueProject_VueRouter加密query.md.16195f5d.js",revision:null},{url:"assets/Problem_VueProject_VueRouter加密query.md.16195f5d.lean.js",revision:null},{url:"assets/Problem_VueProject_Vue项目踩坑一.md.f5091261.js",revision:null},{url:"assets/Problem_VueProject_Vue项目踩坑一.md.f5091261.lean.js",revision:null},{url:"assets/style.fa31c5fa.css",revision:null},{url:"BackEnd/NodeJS/MongoDB笔记.html",revision:"c2556157738920dee6bd6fc10a8eaea1"},{url:"BackEnd/NodeJS/Node大文件上传.html",revision:"aed10b72cbd9d9b41523f8489925b2ca"},{url:"BackEnd/NodeJS/Node学习笔记.html",revision:"2017219a30dc0cc1fbb42378f66530a1"},{url:"BackEnd/NodeJS/Node简单上传文件.html",revision:"e0a885f6c145e4bd5a8bb8f9df29b552"},{url:"BackEnd/Server/Docker学习笔记.html",revision:"ed15b2d413257a143b6d7968120db4fa"},{url:"BackEnd/Server/Nginx学习笔记.html",revision:"597f98fa254b2d6d2263c08ae1c29cb0"},{url:"Framework/Angular/Angular基础总结一.html",revision:"9af2c227ae2a5fc331353b633d0b58f8"},{url:"Framework/Angular/Angular基础总结三.html",revision:"83f0693f5b6521361f5bafbc09db5aeb"},{url:"Framework/Angular/Angular基础总结二.html",revision:"0273c2be80c02dcaec1e7e0f96b9c891"},{url:"Framework/React/React基础总结一.html",revision:"537f1e1141f6b8830d570eac95dfd1c9"},{url:"Framework/Vitest/测试流程.html",revision:"4c6916f195ac7ca50575aa7e61243f53"},{url:"Framework/Vue/Vite原理学习.html",revision:"6795d773ea90915e64b359a159bdbf26"},{url:"Framework/Vue/Vue2项目迁移Vite5.html",revision:"dca7243733767aab29adfb4abc21d44c"},{url:"Framework/Vue/Vue3补漏笔记.html",revision:"70b7921759e60c3100f9f0005eebcc50"},{url:"Framework/Vue/分页与搜索条件记录并回显优化.html",revision:"a36d1295ea545026bd360eae7fc9fb15"},{url:"Framework/Vue/列表最后一条数据删除处理.html",revision:"a53480ef23b85be0e98eaca8314b31ed"},{url:"Framework/Vue/网站添加 PWA.html",revision:"648c66ab7127a9da278e9138c72d900b"},{url:"FrontEnd/CSS/Grid布局学习笔记.html",revision:"9447f95dd475d8b003a8f68bb14a7094"},{url:"FrontEnd/CSS/常用代码段.html",revision:"c60237550b3246337b1be73428c9fc88"},{url:"FrontEnd/CSS/揭秘读书摘要.html",revision:"2007f9d6561cfe772e54c0d089425dba"},{url:"FrontEnd/Git/Git常用操作.html",revision:"51b94bde1e071230d688800cfc4d47d9"},{url:"FrontEnd/Git/Terminal终端美化.html",revision:"ebabb9bd72ed41701f0687623ea01a50"},{url:"FrontEnd/Git/配置 Ubuntu 服务器免密登录.html",revision:"6aa74b40c22c37aef8a2e15d22f5d919"},{url:"FrontEnd/Git/配置多个平台SSH.html",revision:"e88b9c712d1677d88d5b34395594b30b"},{url:"FrontEnd/JavaScript/async与await.html",revision:"93ad3070aafeccbb71af87267d9d1981"},{url:"FrontEnd/JavaScript/代码分支优化.html",revision:"9dd9a934b3d0fbbc5c2a95a579945742"},{url:"FrontEnd/JavaScript/图片懒加载.html",revision:"dec605c5465ee89a19ec717b5682e5a7"},{url:"FrontEnd/JavaScript/基础复习一.html",revision:"87ba36910f0ed8198ee3effd578bcb30"},{url:"FrontEnd/JavaScript/基础复习二.html",revision:"54fffe4ec0c46f4f111c2be6a8258bd5"},{url:"FrontEnd/JavaScript/常见算法.html",revision:"43a5bf125fcb65d44f218566f0ef650a"},{url:"FrontEnd/JavaScript/手写Promise.html",revision:"fd56161bb3a06f134c27d72d2455aea3"},{url:"FrontEnd/JavaScript/数据去重.html",revision:"019b9124af55f5fc7016ed653c1aba5e"},{url:"FrontEnd/JavaScript/数组求集合.html",revision:"76e0d4d05412bc99c1c11c5d2c50e9c3"},{url:"FrontEnd/JavaScript/文件系统.html",revision:"d9d3439b7518710a13e911016a646e96"},{url:"FrontEnd/JavaScript/易混淆的位置属性.html",revision:"fa9ec2a12419f21236851848c3d8e1da"},{url:"FrontEnd/JavaScript/正则表达式.html",revision:"4ebe0a21e5999698e220f8d8b972a32e"},{url:"FrontEnd/JavaScript/获取目录结构.html",revision:"3f605c7f55d4f8f40522e11023769121"},{url:"FrontEnd/JavaScript/高阶函数.html",revision:"652ad58a6c1d8aafc8fe0d4a1f1c39d7"},{url:"FrontEnd/Other/Mac系统环境快速搭建.html",revision:"65d5ff8d29026a21de5c1c045be03229"},{url:"FrontEnd/Other/package文件详解.html",revision:"00fd64451a828e0a898fd19ef6e8e46e"},{url:"FrontEnd/Shell/自动部署脚本.html",revision:"fe69549fa0488ac0d0d21c94ca0da1cc"},{url:"FrontEnd/Shell/获取页面所有域名并去重.html",revision:"d1a8bf7f2f4dbdc169c259d5562a6e5e"},{url:"FrontEnd/TypeScript/初学笔记.html",revision:"d27291998cea4f47d1ed82ab3bdba43e"},{url:"FrontEnd/TypeScript/进阶使用技巧.html",revision:"33a711c0f25f37085bdc1f7b42706aad"},{url:"FrontEnd/TypeScript/配置文件详解.html",revision:"e15dc366ca178c866e055327bfcb3910"},{url:"GoodTool/index.html",revision:"b90c9c50243aa7d80c5e35cca17d3125"},{url:"index.html",revision:"e1c7eb1bc5bfe70b336869c785dfb215"},{url:"Interview/Brower/事件循环机制.html",revision:"ae04980fdf4ebac0f253a5d304065b96"},{url:"Interview/Brower/浏览器网页请求过程.html",revision:"f66d9bd28e08b5320441448b7163b26a"},{url:"Interview/Brower/计算机网络.html",revision:"e2a6abde66d05af9af0e32640bad288e"},{url:"Interview/CSS/基础面试题.html",revision:"72a2ed6be6586e5c7880e52dbd1656de"},{url:"Interview/CSS/进阶面试题.html",revision:"72aae7db3faef3944778fe3469769e9a"},{url:"Interview/CSS/高级面试题.html",revision:"49eab5bdd63c4ddeb09478a043c3f53f"},{url:"Interview/index.html",revision:"6847589a9f61a343462e7baf69422a2c"},{url:"Interview/JavaScript/Promise相关.html",revision:"c216aa65a7051a1aeed67cdb6c78b27f"},{url:"Interview/JavaScript/原型与原型链.html",revision:"a0da37d457ff01831e232cb2abf0c281"},{url:"Interview/JavaScript/基础面试题.html",revision:"38102e648752b37088f4d3e05042faf3"},{url:"Interview/JavaScript/字符串常用方法.html",revision:"201a96a8ba84623621cab89ec8b3801f"},{url:"Interview/JavaScript/进阶面试题.html",revision:"d49fa641d9a22dda713c2036965c1d42"},{url:"Interview/JavaScript/高级面试题.html",revision:"f518a7dbc5fd167a07cbb48e0f5d316b"},{url:"Interview/Vue/npm run xxx执行过程.html",revision:"5e8e78fcb8644c05a512dcaa35f1f91d"},{url:"Interview/Vue/Vue响应式原理.html",revision:"eabbb79a5ab634bcd759e5a1aefad0a8"},{url:"Interview/Vue/Vue基础篇.html",revision:"597d5c746b2869175191cf84eab9df25"},{url:"Interview/Vue/Vue声明周期.html",revision:"62c3089c7d8a54da9709fe07bb3043ba"},{url:"Interview/Vue/Vue进阶篇.html",revision:"625c5885789508a4c498fb9a8c802f99"},{url:"Interview/Vue/前端项目优化.html",revision:"0f9cd0472083544048595ab040f4a2b4"},{url:"Interview/Vue/常见Path区别.html",revision:"2cddc083321742ece9b7a53dfce1104e"},{url:"Interview/Vue/自定义指令.html",revision:"ac6833e6634251728b745fa67001d845"},{url:"Problem/Graphical/Antv代码片段集锦.html",revision:"79787d13acc201a7b4d523c42de13796"},{url:"Problem/Graphical/Antv使用总结.html",revision:"cdd4dd84ea2746ca6babd3638c148516"},{url:"Problem/Graphical/Echarts问题总结.html",revision:"0435d2950733a5941ef8aea2df16d17f"},{url:"Problem/index.html",revision:"956c80d85b9bc51b5660fc03ab5b93fc"},{url:"Problem/Nuxt3/Nuxt3项目踩坑.html",revision:"8e9fe0e1b79cd60f2bf0e7073bc144c7"},{url:"Problem/VitePress/VitePress踩坑记录.html",revision:"065db2323c28aeb232f518c77fc24dc0"},{url:"Problem/VitePress/VuePress踩坑记录.html",revision:"f39ede09b3c572ae045cc4adf3f82d9f"},{url:"Problem/VueProject/VueRouter加密query.html",revision:"d95f2a57b90e8198fe73c5942ba7269c"},{url:"Problem/VueProject/Vue项目踩坑一.html",revision:"88d760e5c3a3ba6328eccbfff4e7c752"},{url:"registerSW.js",revision:"385b79d064fe7f8195f90acea5c7388b"},{url:"pwa-512x512.png",revision:"cb765af63e04e54c9125f175a7b67333"},{url:"pwa-192x192.png",revision:"26a17df838f4a40e035971d0f34b32c1"},{url:"manifest.webmanifest",revision:"c2bad106e6b4fb26e84a68f2bdf86579"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))}));