获得徽章 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、不支持的文件提示处理
展开
评论
点赞