姜颖
学生
获得徽章 1
#青训营笔记创作活动#
2月8日 打卡day22
今日学习：
我被骂了，但我学会了如何构造高性能的树状结构
整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。
2月8日 打卡day22
今日学习：
我被骂了，但我学会了如何构造高性能的树状结构
整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。
展开
评论
点赞
#青训营笔记创作活动#
2月7日 打卡day21
今日学习：
关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。
1. 速度快
2. 高效利用磁盘空间
3. 支持 monorepo
4. 安全性高
虽然 pnpm 内部做了非常多复杂的设计，但实际上对于用户来说是无感知的，使用起来非常友好。并且，现在作者现在还一直在维护，目前 npm 上周下载量已经有 10w +，经历了大规模用户的考验，稳定性也能有所保障。
因此，综合来看，pnpm 是一个相比 npm/yarn 更优的方案，期待未来 pnpm 能有更多的落地。
2月7日 打卡day21
今日学习：
关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。
1. 速度快
2. 高效利用磁盘空间
3. 支持 monorepo
4. 安全性高
虽然 pnpm 内部做了非常多复杂的设计，但实际上对于用户来说是无感知的，使用起来非常友好。并且，现在作者现在还一直在维护，目前 npm 上周下载量已经有 10w +，经历了大规模用户的考验，稳定性也能有所保障。
因此，综合来看，pnpm 是一个相比 npm/yarn 更优的方案，期待未来 pnpm 能有更多的落地。
展开
评论
点赞
#青训营笔记创作活动#
2月6日 打卡day20
今日学习:
纯前端实现羊了个羊小游戏
基础生成
最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠
优化地图
以一层为例，按上面的逻辑只能生成最简单的地图，实际我们观察游戏，会发现卡片的放置是有一定规律的：
左右对称
从顶层到底层越来越往中心聚集，卡片越来越少
上一层不会完全覆盖下一层
卡片渲染
每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 dom。然后根据卡片的 x、y、z、宽高 值设置实际位置
覆盖关系
我们可以先按一层的大小初始化一个处理遮挡用的二维数组 coverMap，然后在之前生成的游戏地图上，从最后一层往第一层遍历。
填充数据
整改游戏的核心逻辑是 pending 区域存在 3 个同样图案的卡片时会消除。所以我们有两个关键点要注意。
道具的实现
暂存道具
随机道具
撤销道具
动效的实现
从排堆进入 pendding 区域
从 pendding 区域进入暂存区
使用随机道具时候的动画
集齐 3 个卡片时候的消除动画
样式美化
2月6日 打卡day20
今日学习:
纯前端实现羊了个羊小游戏
基础生成
最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠
优化地图
以一层为例，按上面的逻辑只能生成最简单的地图，实际我们观察游戏，会发现卡片的放置是有一定规律的：
左右对称
从顶层到底层越来越往中心聚集，卡片越来越少
上一层不会完全覆盖下一层
卡片渲染
每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 dom。然后根据卡片的 x、y、z、宽高 值设置实际位置
覆盖关系
我们可以先按一层的大小初始化一个处理遮挡用的二维数组 coverMap，然后在之前生成的游戏地图上，从最后一层往第一层遍历。
填充数据
整改游戏的核心逻辑是 pending 区域存在 3 个同样图案的卡片时会消除。所以我们有两个关键点要注意。
道具的实现
暂存道具
随机道具
撤销道具
动效的实现
从排堆进入 pendding 区域
从 pendding 区域进入暂存区
使用随机道具时候的动画
集齐 3 个卡片时候的消除动画
样式美化
展开
评论
点赞
#青训营笔记创作活动#
2月5日 打卡day19
今日学习：
前端应该掌握的浏览器调试技巧
今天学习了打印输出、普通断点、条件断点、DOM断点、VS code 断点等调式方式。对于调试技巧任重而道远，需要学习与实践并行，才能更好的灵活使用，在对应的问题使用对应的调试方式，可以提高我们的开发效率以及解决问题能力，提高自己的竞争力。
2月5日 打卡day19
今日学习：
前端应该掌握的浏览器调试技巧
今天学习了打印输出、普通断点、条件断点、DOM断点、VS code 断点等调式方式。对于调试技巧任重而道远，需要学习与实践并行，才能更好的灵活使用，在对应的问题使用对应的调试方式，可以提高我们的开发效率以及解决问题能力，提高自己的竞争力。
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡day18
今日学习：
别整一坨 CSS 代码了，试试这几个实用函数
Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
我们有一个 max() 函数，在 0px 和 min()的计算值之间进行比较，并选择较大的值。
min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。
2月4日 打卡day18
今日学习：
别整一坨 CSS 代码了，试试这几个实用函数
Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
我们有一个 max() 函数，在 0px 和 min()的计算值之间进行比较，并选择较大的值。
min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。
展开
评论
点赞
#青训营笔记创作活动#
2月3日 打卡day17
今日学习：
还在用定时器吗？借助 CSS 来监听事件
CSS 在控制定时器的开启和暂停上更有优势，下面总结一下
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active）有类似功能的都可以朝这个方向去思考。
2月3日 打卡day17
今日学习：
还在用定时器吗？借助 CSS 来监听事件
CSS 在控制定时器的开启和暂停上更有优势，下面总结一下
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active）有类似功能的都可以朝这个方向去思考。
展开
评论
点赞
#青训营笔记创作活动#
2月2日 打卡day16
今日学习：
前端实现活体人脸检测
创建人脸模型
引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
特征检测
人脸特征提取就是针对人脸的某些特征进行判断（以下的动作判断仅供参考，实际情况下需要多个特征点来判断某个动作）
人脸的远近
取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
张嘴
取2帧 [10,152]占[0,17]的比例,判断递增，取第一帧和最后最后一帧的距离，根据阈值判断张嘴。
眨眼
根据左眼[159, 144] 右眼[385, 374]的距离，判断连续4帧小于阈值，即可判断眨眼了。
左右摇头
根据左脸[195, 93] 右脸[195, 323]的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。
2月2日 打卡day16
今日学习：
前端实现活体人脸检测
创建人脸模型
引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
特征检测
人脸特征提取就是针对人脸的某些特征进行判断（以下的动作判断仅供参考，实际情况下需要多个特征点来判断某个动作）
人脸的远近
取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
张嘴
取2帧 [10,152]占[0,17]的比例,判断递增，取第一帧和最后最后一帧的距离，根据阈值判断张嘴。
眨眼
根据左眼[159, 144] 右眼[385, 374]的距离，判断连续4帧小于阈值，即可判断眨眼了。
左右摇头
根据左脸[195, 93] 右脸[195, 323]的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。
展开
评论
点赞
#青训营笔记创作活动#
2月1日 打开day15
今日学习：
为什么说 90% 的前端不会调试 Ant Design 源码？
antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
想调试最初的 tsx 源码需要用 sourcemap。
antd 有三种入口：es 目录对应 esm 入口，lib 目录对应 commonjs 入口，dist 目录对应 UMD 入口。
把 antd 代码下载下来，执行 npm run dist 就可以生成 UMD 形式的代码。
想要 sourcemap 映射到 tsx 源码，需要把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的 sourcemap。
把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。
用 antd 组件写业务逻辑之余，对什么组件感兴趣，可以顺便去看看它的源码，它不香么？
2月1日 打开day15
今日学习：
为什么说 90% 的前端不会调试 Ant Design 源码？
antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
想调试最初的 tsx 源码需要用 sourcemap。
antd 有三种入口：es 目录对应 esm 入口，lib 目录对应 commonjs 入口，dist 目录对应 UMD 入口。
把 antd 代码下载下来，执行 npm run dist 就可以生成 UMD 形式的代码。
想要 sourcemap 映射到 tsx 源码，需要把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的 sourcemap。
把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。
用 antd 组件写业务逻辑之余，对什么组件感兴趣，可以顺便去看看它的源码，它不香么？
展开
评论
点赞
#青训营笔记创作活动#
1月31日 打卡day14
今日学习：
使用fabric.js 快速开发一个图片编辑器
架构设计
选型： fabric.js 和 konva.js都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些，因为比较熟悉fabric就没有采用konva。
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
初始化
初始化比较简单，fabric.js创建对象，用EventEmitter创建事件发射器，可订阅单选、多选、取消选择事件。
通过vue的provide语法把fabric对象、EventEmitter对象向下传递，在mixins中保存选中的元素和选中状态。
总结
fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能。
1月31日 打卡day14
今日学习：
使用fabric.js 快速开发一个图片编辑器
架构设计
选型： fabric.js 和 konva.js都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些，因为比较熟悉fabric就没有采用konva。
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
初始化
初始化比较简单，fabric.js创建对象，用EventEmitter创建事件发射器，可订阅单选、多选、取消选择事件。
通过vue的provide语法把fabric对象、EventEmitter对象向下传递，在mixins中保存选中的元素和选中状态。
总结
fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能。
展开
评论
点赞
#青训营笔记创作活动#
1月30日 打卡day13
今日学习:
还在用JS做节流吗？CSS也可以防止按钮重复点击
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：
函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
1月30日 打卡day13
今日学习:
还在用JS做节流吗？CSS也可以防止按钮重复点击
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：
函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡day12
今日学习:
阿里面试官:请设计一个不能操作DOM和调接口的环境
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
1月29日 打卡day12
今日学习:
阿里面试官:请设计一个不能操作DOM和调接口的环境
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
展开
评论
点赞
#青训营笔记创作活动#
1月28日 打卡day11
今日学习:
Vite项目屏幕适配的两种方案，超详细！
rem是什么？
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
适用场景
不固定宽高比的Web应用，适用于绝大部分业务场景
1月28日 打卡day11
今日学习:
Vite项目屏幕适配的两种方案，超详细！
rem是什么？
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
适用场景
不固定宽高比的Web应用，适用于绝大部分业务场景
展开
评论
点赞