获得徽章 1
8月24日 打卡day26
今日学习：有趣又逼真的水波交互动画
1、安装 pixi.js 库，引入并初始化
2、绘制水体背景
过滤器类 DisplacementFilter：作用是做贴图置换，做纹理偏移
传入纹理错位图，将整个过滤器类添加到 filters 数组里面
执行 ticker 在 step 方法里实现连续不断改变 x 轴坐标
3、水波动画
引入 pixi.js 的插件库 pixi-filters.js，处理很多的过滤器效果
实例化一个 ShockwaveFilter 类，能够随机传入振幅、波长、速度、半径等参数
将这个过滤器添加一个单独的数组中保存，同时也要添加到 filters 中
在 step 方法遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了
注意：执行完要移除掉，避免占用内存空间
今日学习：有趣又逼真的水波交互动画
1、安装 pixi.js 库，引入并初始化
2、绘制水体背景
过滤器类 DisplacementFilter：作用是做贴图置换，做纹理偏移
传入纹理错位图，将整个过滤器类添加到 filters 数组里面
执行 ticker 在 step 方法里实现连续不断改变 x 轴坐标
3、水波动画
引入 pixi.js 的插件库 pixi-filters.js，处理很多的过滤器效果
实例化一个 ShockwaveFilter 类，能够随机传入振幅、波长、速度、半径等参数
将这个过滤器添加一个单独的数组中保存，同时也要添加到 filters 中
在 step 方法遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了
注意：执行完要移除掉，避免占用内存空间
展开
评论
点赞
8月23日 打卡day25
今日学习
1、使用 background-clip 实现
①background-clip: text; 实现背景被裁剪成文字的前景色
②color: transparent 将文字设置为透明
③background-position 实现背景的移动
④background:linear-gradient() 设置渐变背景
2、使用混合模式 mix-blend-mode 实现
①background: linear-gradient() 设置渐变背景
②mix-blend-mode: darken 给背景设置上下移动的动画
③overflow: hidden 裁剪掉文字元素外的背景移动
3、结合滚动实现动画
gsap.timeline 结合滚动容器，触发动画
今日学习
1、使用 background-clip 实现
①background-clip: text; 实现背景被裁剪成文字的前景色
②color: transparent 将文字设置为透明
③background-position 实现背景的移动
④background:linear-gradient() 设置渐变背景
2、使用混合模式 mix-blend-mode 实现
①background: linear-gradient() 设置渐变背景
②mix-blend-mode: darken 给背景设置上下移动的动画
③overflow: hidden 裁剪掉文字元素外的背景移动
3、结合滚动实现动画
gsap.timeline 结合滚动容器，触发动画
展开
评论
点赞
8月22日 打卡day24
今日学习：在vue中，为什么不能用index作为key？
1、key是vue中虚拟dom标记的唯一标识
2、虚拟DOM
①其结构就是一个对象，在beroreCreated执行的时候，DOM树并没有生成
②先生成虚拟DOM结构，再将html编写成真实的DOM结构
3、diff算法
①只要数据源发生变化，就一定会触发watcher观察者函数【Object.defineProperty()】的回调函数
②会根据DOM树，从上到下，从左到右判断值是否更新
4、不能用index做key
①场景一
- index做key：当数据reverse()反转时，仅仅只有数据反转，与数据同级的其它内容并没有跟着反转
- id做key：当数据reverse()反转时，数据和数据同级的所有内容一并反转
②场景二
- index做key：当删除数组的第一个数据时，发现是最后一个数据被删除，出现严重的bug
原因：diff算法会复用 key:0 的这个节点，比对的时候，key:0 的节点存在，则比对 key:1，也存在，而多出了 key:2，则会将其删除
今日学习：在vue中，为什么不能用index作为key？
1、key是vue中虚拟dom标记的唯一标识
2、虚拟DOM
①其结构就是一个对象，在beroreCreated执行的时候，DOM树并没有生成
②先生成虚拟DOM结构，再将html编写成真实的DOM结构
3、diff算法
①只要数据源发生变化，就一定会触发watcher观察者函数【Object.defineProperty()】的回调函数
②会根据DOM树，从上到下，从左到右判断值是否更新
4、不能用index做key
①场景一
- index做key：当数据reverse()反转时，仅仅只有数据反转，与数据同级的其它内容并没有跟着反转
- id做key：当数据reverse()反转时，数据和数据同级的所有内容一并反转
②场景二
- index做key：当删除数组的第一个数据时，发现是最后一个数据被删除，出现严重的bug
原因：diff算法会复用 key:0 的这个节点，比对的时候，key:0 的节点存在，则比对 key:1，也存在，而多出了 key:2，则会将其删除
展开
评论
点赞
8月21日 打卡day23
今日学习：不使用第三方库怎么实现【前端引导页】功能
1、第三方库的选择
①vue-tour：轻量级、简单且可自定义的 Tour 插件，只适用于 Vue2 的项目
②driver.js：强大而轻量级的普通 JavaScript 引擎，没有外部依赖，不仅高度可定制，还可以支持所有主流浏览器
③shepherd.js：包含的 API 众多，大多场景都可以通过其对应的配置得到
缺点整体的包体积较大，并且配置也比较复杂，配置复杂的内容一般都需要进行二次封装，将可变和不可变的配置项进行抽离
④intro.js：开源的 vanilla Javascript/CSS 库，用于添加分步介绍或提示，属于轻量级的且无外部依赖
2、蒙层引导
①cloneNode + position + transition：高亮【margin、tranlate、position】、引导【position: fixed】、过渡【transition 位置的平滑移动】
页面的位置/内容发生变化时（如：resize、scroll 事件），需要重新计算位置信息
②z-index + position + transition：高亮【z-index】、引导【position: fixed】、过渡【transition位置的平滑移动】
页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息
以上两种方式的代码思路：
通过computed计算属性，获取当前message
↓
监听页面位置/内容变化吗，变化则执行genGuide
↓
函数内删除上一个子元素，确定指引，获取目标节点信息，克隆节点，计算新的位置
↓
监听上一步/下一步按钮事件
3、总结
两种方式各自的缺点
①cloneNode + position + transition：目标节点需要深度复制，不能实现边引导边操作
②z-index + position + transition：存在z-index无法超过蒙层，可以通过shepherd.js的svg解决
今日学习：不使用第三方库怎么实现【前端引导页】功能
1、第三方库的选择
①vue-tour：轻量级、简单且可自定义的 Tour 插件，只适用于 Vue2 的项目
②driver.js：强大而轻量级的普通 JavaScript 引擎，没有外部依赖，不仅高度可定制，还可以支持所有主流浏览器
③shepherd.js：包含的 API 众多，大多场景都可以通过其对应的配置得到
缺点整体的包体积较大，并且配置也比较复杂，配置复杂的内容一般都需要进行二次封装，将可变和不可变的配置项进行抽离
④intro.js：开源的 vanilla Javascript/CSS 库，用于添加分步介绍或提示，属于轻量级的且无外部依赖
2、蒙层引导
①cloneNode + position + transition：高亮【margin、tranlate、position】、引导【position: fixed】、过渡【transition 位置的平滑移动】
页面的位置/内容发生变化时（如：resize、scroll 事件），需要重新计算位置信息
②z-index + position + transition：高亮【z-index】、引导【position: fixed】、过渡【transition位置的平滑移动】
页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息
以上两种方式的代码思路：
通过computed计算属性，获取当前message
↓
监听页面位置/内容变化吗，变化则执行genGuide
↓
函数内删除上一个子元素，确定指引，获取目标节点信息，克隆节点，计算新的位置
↓
监听上一步/下一步按钮事件
3、总结
两种方式各自的缺点
①cloneNode + position + transition：目标节点需要深度复制，不能实现边引导边操作
②z-index + position + transition：存在z-index无法超过蒙层，可以通过shepherd.js的svg解决
展开
评论
点赞
8月19日 打卡day22
今日学习：提升代码可读性，减少if-else的几个小技巧
作者总结很简洁易懂，一起来学习吧！
1、短路运算
2、三元运算符
3、switch case
4、对象配置/策略模式
①商场促销价
②年终奖
总结：在想要大量相关数据判断时，可以先整理好数据，然后再写相关判断语句或函数处理数据
今日学习：提升代码可读性，减少if-else的几个小技巧
作者总结很简洁易懂，一起来学习吧！
1、短路运算
2、三元运算符
3、switch case
4、对象配置/策略模式
①商场促销价
②年终奖
总结：在想要大量相关数据判断时，可以先整理好数据，然后再写相关判断语句或函数处理数据
展开
评论
点赞
8月18日 打卡day21
今日学习：一个登录案例包学会 Pinia
1、Mock 的用法
①安装插件 vite-plugin-mock
②在vite.config.js 配置文件
③编写 mock server
新建一个模拟用户接口的服务，它导出一个数组，数组里每一项用来模拟一个接口
开启mock 服务后，当前端在发出 ajax 请求时，会被拦截交由 mock 服务处理
2、使用 Pinia
（1）简介
核心概念只剩下：store状态仓库、state状态，和 vuex 保持一致、getters类似组件的计算属性，和 vuex 中的 getters 的保持一致、actions和 vuex 中的 actions 保持一致，可以处理逻辑并修改 state
（2）创建
通常在src 目录下创建 store 目录来存放状态管理有关的代码
（3）注册
在项目的入口文件中注册
（4）创建用户 store
①Pinia 中没有 module 的概念，是拍平的 store 结构
②创建 store命名遵循 useXXX 的形式
（5）state、getters、actions
①与vuex的区别，就是pinia不再需要 dispatch 了，也没有 mutation 的概念了
②在一个 action 函数中， this 就是当前 store 的实例，可以直接修改状态
（6）组件中使用 Pinia
先实例化 store，然后直接使用 state、getters 和 actions
（7）pinia 状态持久化
①Pinia 的数据是存在内存当中的，页面刷新数据就会丢失
②持久化插件，比如 pinia-plugin-persistedstate
今日学习：一个登录案例包学会 Pinia
1、Mock 的用法
①安装插件 vite-plugin-mock
②在vite.config.js 配置文件
③编写 mock server
新建一个模拟用户接口的服务，它导出一个数组，数组里每一项用来模拟一个接口
开启mock 服务后，当前端在发出 ajax 请求时，会被拦截交由 mock 服务处理
2、使用 Pinia
（1）简介
核心概念只剩下：store状态仓库、state状态，和 vuex 保持一致、getters类似组件的计算属性，和 vuex 中的 getters 的保持一致、actions和 vuex 中的 actions 保持一致，可以处理逻辑并修改 state
（2）创建
通常在src 目录下创建 store 目录来存放状态管理有关的代码
（3）注册
在项目的入口文件中注册
（4）创建用户 store
①Pinia 中没有 module 的概念，是拍平的 store 结构
②创建 store命名遵循 useXXX 的形式
（5）state、getters、actions
①与vuex的区别，就是pinia不再需要 dispatch 了，也没有 mutation 的概念了
②在一个 action 函数中， this 就是当前 store 的实例，可以直接修改状态
（6）组件中使用 Pinia
先实例化 store，然后直接使用 state、getters 和 actions
（7）pinia 状态持久化
①Pinia 的数据是存在内存当中的，页面刷新数据就会丢失
②持久化插件，比如 pinia-plugin-persistedstate
展开
评论
点赞
8月17日 打卡day20
今日学习：前端实现docx、pdf格式文件在线预览
1、docx
（1）安装docx-preview插件：npm i docx-preview
（2）使用：创建标签，引入，创建渲染函数
2、PDF
（1）安装PDFJS插件：npm i pdfjs-dist
（2）使用：创建标签，引入，创建渲染函数
（3）pdf的放大和缩小：防止渲染出现模糊的问题
3、多格式的文件渲染函数映射
当多种文件渲染放在一个文件中，处理函数需要做映射处理，执行对应格式的文件渲染
4、不支持的文件提示处理
今日学习：前端实现docx、pdf格式文件在线预览
1、docx
（1）安装docx-preview插件：npm i docx-preview
（2）使用：创建标签，引入，创建渲染函数
2、PDF
（1）安装PDFJS插件：npm i pdfjs-dist
（2）使用：创建标签，引入，创建渲染函数
（3）pdf的放大和缩小：防止渲染出现模糊的问题
3、多格式的文件渲染函数映射
当多种文件渲染放在一个文件中，处理函数需要做映射处理，执行对应格式的文件渲染
4、不支持的文件提示处理
展开
评论
点赞
8月14日 打卡day19
今日学习：前端工程化基石 -- AST（抽象语法树）
通过一句主谓宾标点的简单句例子表现AST的原理，简单易懂，一起来学习一下吧！
1、AST是源代码的抽象语法结构的树状表现形式，简单点就是一个深度嵌套对象，这个对象能够描述我们书写代码的所有信息
2、编译器执行过程
①Parsing(解析)：经过词法分析【用tokenizer(分词器)或者lexer(词法分析器)，将源码拆分成tokens】、语法分析【将tokens重新整理成语法相互关联的表达形式，称为中间层或者AST（抽象语法树）】、构建AST（抽象语法树）一系列操作；
②Transformation（转化）：对上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式【改写AST（抽象语法树）/生成新AST（抽象语法树）】；
③Code Generation（代码生成）：将上一步处理好的内容转化为新的代码；
通过tokenzier(分词器)函数【生成Token】==》定义parser函数，接收上一步处理好的tokens【生成AST】==》【遍历和访问】生成好的AST==》用转换器将刚生成的AST转化为【新的AST】==》 用新的AST，遍历其每一个节点，根据指定规则生成【最终代码】
3、后面就是代码实践，用文章形式完成吧
今日学习：前端工程化基石 -- AST（抽象语法树）
通过一句主谓宾标点的简单句例子表现AST的原理，简单易懂，一起来学习一下吧！
1、AST是源代码的抽象语法结构的树状表现形式，简单点就是一个深度嵌套对象，这个对象能够描述我们书写代码的所有信息
2、编译器执行过程
①Parsing(解析)：经过词法分析【用tokenizer(分词器)或者lexer(词法分析器)，将源码拆分成tokens】、语法分析【将tokens重新整理成语法相互关联的表达形式，称为中间层或者AST（抽象语法树）】、构建AST（抽象语法树）一系列操作；
②Transformation（转化）：对上一步解析后的内容，按照编译器指定的规则进行处理，形成一个新的表现形式【改写AST（抽象语法树）/生成新AST（抽象语法树）】；
③Code Generation（代码生成）：将上一步处理好的内容转化为新的代码；
通过tokenzier(分词器)函数【生成Token】==》定义parser函数，接收上一步处理好的tokens【生成AST】==》【遍历和访问】生成好的AST==》用转换器将刚生成的AST转化为【新的AST】==》 用新的AST，遍历其每一个节点，根据指定规则生成【最终代码】
3、后面就是代码实践，用文章形式完成吧
展开
评论
点赞
8月14日 打卡day19
今日学习：Qiankun原理——JS沙箱是怎么做隔离的
满满的知识点一起总结一下吧！
qiankun 有 SnapshotSandbox, LegacySandbox 和 ProxySandbox 这些沙箱
1、SnapshotSandbox快照沙箱：把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了
2、LegacySandbox：通过监听对 window 的修改来直接记录 Diff 内容，只要对 window 属性进行设置，两种方法：
①新增属性：存到 addedMap 里
②更新属性：把原来的键值存到 prevMap，把新的键值存到 newMap
addedMap, prevMap 和 newMap 这三个变量能反推出微应用以及原来环境的变化
3、ProxySandbox：把当前 window 的一些原生属性拷贝出来，单独放在一个fakeWindow对象上，然后对每个微应用分配一个 fakeWindow
①当微应用修改全局变量时：
-是原生属性，则修改全局的 window
-不是原生属性，则修改 fakeWindow 里的内容
②当微应用获取全局变量时：
-是原生属性，则从 window 里拿
-不是原生属性，则优先从 fakeWindow 里获取
4、隔离原理
将函数入参 window, self, globalThis，提到的沙箱对象 window.proxy 分别传入
注意：此时，window.a 的 window 就不是全局 window 而是 fn 的入参 window
今日学习：Qiankun原理——JS沙箱是怎么做隔离的
满满的知识点一起总结一下吧！
qiankun 有 SnapshotSandbox, LegacySandbox 和 ProxySandbox 这些沙箱
1、SnapshotSandbox快照沙箱：把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了
2、LegacySandbox：通过监听对 window 的修改来直接记录 Diff 内容，只要对 window 属性进行设置，两种方法：
①新增属性：存到 addedMap 里
②更新属性：把原来的键值存到 prevMap，把新的键值存到 newMap
addedMap, prevMap 和 newMap 这三个变量能反推出微应用以及原来环境的变化
3、ProxySandbox：把当前 window 的一些原生属性拷贝出来，单独放在一个fakeWindow对象上，然后对每个微应用分配一个 fakeWindow
①当微应用修改全局变量时：
-是原生属性，则修改全局的 window
-不是原生属性，则修改 fakeWindow 里的内容
②当微应用获取全局变量时：
-是原生属性，则从 window 里拿
-不是原生属性，则优先从 fakeWindow 里获取
4、隔离原理
将函数入参 window, self, globalThis，提到的沙箱对象 window.proxy 分别传入
注意：此时，window.a 的 window 就不是全局 window 而是 fn 的入参 window
展开
评论
点赞
8月13日 打卡day18
今日学习：package.json 配置完全解读
1、描述配置：项目的基本信息，包括名称，版本，描述，仓库，作者等
2、文件配置：项目所包含的文件，以及入口等信息
3、脚本配置：scripts项目启动打包等，config设置 scripts 里的脚本在运行时的参数
4、依赖配置：项目可能会依赖其他包，常见的有dependencies运行依赖、devDependencies开发依赖
5、发布配置：和项目发布相关的配置，private、publishConfig
6、系统配置：和项目关联的系统配置，如 node 版本或操作系统兼容性
7、第三方配置：一些第三方库/应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库
今日学习：package.json 配置完全解读
1、描述配置：项目的基本信息，包括名称，版本，描述，仓库，作者等
2、文件配置：项目所包含的文件，以及入口等信息
3、脚本配置：scripts项目启动打包等，config设置 scripts 里的脚本在运行时的参数
4、依赖配置：项目可能会依赖其他包，常见的有dependencies运行依赖、devDependencies开发依赖
5、发布配置：和项目发布相关的配置，private、publishConfig
6、系统配置：和项目关联的系统配置，如 node 版本或操作系统兼容性
7、第三方配置：一些第三方库/应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库
展开
评论
点赞
8月12日 打卡day17
今日学习：读一读 Tapable 源码
1、Tapable 的内部巧妙实现了发布订阅模式，如懒编译（动态编译），关于类与继承抽象类的面向对象思想以及 this 指向的升华等等
2、性质：更专注于自定义事件的触发和处理，可以注册自定义事件，然后在适当的时机去执行自定义事件
3、使用：①实例化钩子函数②注册事件③触发事件
4、同步/异步分类1+8：SyncHook
①SyncBaiHook：同步的、保险类型的 Hook
②SyncWaterFallHook：同步的、瀑布式类型的 Hook
③SyncLoopHook：同步、循环类型的 Hook
④AsyncParallelHook：异步并行、基本类型的 Hook
⑤AsyncParallelBailHook：异步并行、保险类型的 Hook
⑥AsyncSeriesHook：异步、串行类型的 Hook
⑦AsyncSeriesBailHook：异步串行、保险类型的 Hook
⑧AsyncSeriesWaterfallHook：异步串行、瀑布类型的 Hook
5、执行机制分类：
①Basic Hook : 基本类型钩子，执行每一个注册的事件函数，并不关心每个被调用的事件函数返回值如何
②Waterfall : 瀑布类型钩子，上一个函数的执行结果会成为下一个函数的参数
③Bail : 保险类型钩子，只要其中一个有结果了，后面的就不执行了
④Loop : 循环类型钩子，不停的循环执行事件函数，直到所有函数结果 result === undefined
今日学习：读一读 Tapable 源码
1、Tapable 的内部巧妙实现了发布订阅模式，如懒编译（动态编译），关于类与继承抽象类的面向对象思想以及 this 指向的升华等等
2、性质：更专注于自定义事件的触发和处理，可以注册自定义事件，然后在适当的时机去执行自定义事件
3、使用：①实例化钩子函数②注册事件③触发事件
4、同步/异步分类1+8：SyncHook
①SyncBaiHook：同步的、保险类型的 Hook
②SyncWaterFallHook：同步的、瀑布式类型的 Hook
③SyncLoopHook：同步、循环类型的 Hook
④AsyncParallelHook：异步并行、基本类型的 Hook
⑤AsyncParallelBailHook：异步并行、保险类型的 Hook
⑥AsyncSeriesHook：异步、串行类型的 Hook
⑦AsyncSeriesBailHook：异步串行、保险类型的 Hook
⑧AsyncSeriesWaterfallHook：异步串行、瀑布类型的 Hook
5、执行机制分类：
①Basic Hook : 基本类型钩子，执行每一个注册的事件函数，并不关心每个被调用的事件函数返回值如何
②Waterfall : 瀑布类型钩子，上一个函数的执行结果会成为下一个函数的参数
③Bail : 保险类型钩子，只要其中一个有结果了，后面的就不执行了
④Loop : 循环类型钩子，不停的循环执行事件函数，直到所有函数结果 result === undefined
展开
评论
点赞