努力学前端的素素
获得徽章 1
- #青训营笔记创作活动#
1.22 DAY22
今日学习：
我们平时见到的树状结构一般都是这样的，每层数组中的item都会有一个children，里面嵌套一个数组然后每个子item也还会有各自的children，就这样一直嵌套下去。
而拍扁后的树状结构其实是一个对象，每个item都扁平化平铺在第一层，每一个item都有各自的parentId与childrenIds。展开评论点赞 - #青训营笔记创作活动#
1.21 DAY21
今日学习：
pnpm install
跟 npm install 类似，安装项目下所有的依赖。但对于 monorepo 项目，会安装 workspace 下面所有 packages 的所有依赖。不过可以通过 --filter 参数来指定 package，只对满足条件的 package 进行依赖安装。
pnpm update
根据指定的范围将包更新到最新版本，monorepo 项目中可以通过 --filter 来指定 package。
pnpm update
根据指定的范围将包更新到最新版本，monorepo 项目中可以通过 --filter 来指定 package。
pnpm link
将本地项目连接到另一个项目。注意，使用的是硬链接，而不是软链接展开评论点赞 - #青训营笔记创作活动#
1.20 DAY20
今日学习：
整改游戏的核心逻辑是 pending 区域存在 3 个同样图案的卡片时会消除。所以我们有两个关键点要注意
1. 保证卡片是 3 的倍数
之前都是用 0、1 代指卡片，实际之前设置卡片的时候，我们可以新建 CardItem 类的实例，每个卡片实例会记录自己的位置、样式、是否被覆盖等状况。并且我们可以用一个 cardList 数组保存下这些实例
并且在地图生成完之后，根据数组数量除 3 的余数，从前开始删除对应数量的卡片
2. 填充卡片类型
我们需要随机的把指定种类的卡片类型，以 3 的倍数填充到现有卡片中去展开评论点赞 - #青训营笔记创作活动#
1.19 DAY19
今日学习：
console.dir——对于DOM节点的打印输出，如果采用console.log，会以标签的形式输出，和直接查看没有太大的差异，有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
console.table——这个方法可能比较少人知道，可以将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的。展开评论点赞 - #青训营笔记创作活动#
1.18 DAY18
今日学习：
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。它的一些妙用：流体的尺寸和定位；装饰性元素；流体高度；Loading Bar；动态分割器；动态 border Radius；间距。展开评论点赞 - #青训营笔记创作活动#
1.17 DAY17
今日学习
相比定时器而言，CSS 在控制定时器的开启和暂停上更有优势，下面总结一下
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放展开评论点赞 - #青训营笔记创作活动#
1.16 DAY16
今日学习：
用纯前端方式实现了活体人脸检测这个功能。代码的主要部分是：创建人脸模型和特征检测。其中特征检测又包括：人脸的远近，张嘴，眨眼，左右摇头。展开评论点赞 - #青训营笔记创作活动#
1.15 DAY15
今日学习
VSCode Chrome Debugger 调试网页，这个知道的人就不多
react 源码里 renderWithHooks 是调用函数组件的地方
条件断点可以在满足条件的时候断住
antd 的 esm、commonjs、UMD 三种入口
sourcemap 是干啥的，虽然经常接触，但还是有很多前端没用过
webpack 的 cheap-module-source-map 的含义，为什么需要关联 loader 的 sourcemap展开评论点赞 - #青训营笔记创作活动#
1.14 DAY14
今日学习：
看到一个新奇的项目：图片编辑器。其要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。展开评论点赞 - #青训营笔记创作活动#
1.13 DAY13
今日学习
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：
函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的展开评论点赞