获得徽章 1
- #青训营笔记创作活动# 2月10日 打卡 day14
怎么把树状结构拍扁？
原本的父子嵌套没有专门的根节点，只是一层层往上，直到第一层级。拍扁后，将树状结构对象化，item成为根节点，每个item设置parentId和childrenIds。简化后，修改只要针对特定的id项，可减少不必要的遍历，降低性能损耗。展开评论点赞 - #青训营笔记创作活动# 2月8日 打卡 day13
用CSS可取代JS的小功能：
1. 设置HTML<input>标签属性 type="color" value="十六进制值"，css中可设置input的大小、边框、位置等，即颜色选择器
2. 模拟打字动画：css中设置字符标签的属性overflow:hidden，并可利用webkit@-webkit-keyframes 设置动画的快慢
3. 去底部/去顶部 实现滑动效果：scroll-behavior: smooth
4. 图片丝滑切换：scroll-snap-type: x mandatory展开评论点赞 - #青训营笔记创作活动# 2月7日 打卡 day12
CSS代替JS做节流：
1. 和点击事件有关：pointer-events
2. 和时间控制有关：animation
3. 伪类和点击行为有关：:active
节流可以转化为：正常点击-动画执行-禁用-可点击-执行-禁用-可点击……展开评论点赞 - #青训营笔记创作活动# 2月5日 打卡 day11
为什么要前端工程化：提高效率，避免重复造轮子，统一团队风格，减少code review难度
前端工程化四个要点：模块化、组件化、规范化、自动化
前端工程化的作用：通过使用工具，提升开发效率评论点赞 - #青训营笔记创作活动# 2月1日 day9
介绍了三个函数的用法和案例：
clamp() 函数：把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
可以给流体尺寸设计最值，设计响应式装饰元素（比如装饰条），进度条，动态分割器，
max()函数：根据视窗大小设置动态的卡片圆角度数
min()函数：根据视窗大小设置动态的组件或网格间距展开评论点赞 - #青训营笔记创作活动# 1月31日 day8
纯前端画羊了个羊，有哪些要注意的点？
- 利用数组矩阵模拟格子地图，0或1表示；
- 假设卡片左上角位置坐标为[i, j]，要注意[i-1,j]，[i,j-1]，[i-1, j-1]，[i-1, j+1]不能有卡片，避免同层卡片重叠；
- 加入随机系数，使每次生成的地图不一样；
- 地图优化和卡片渲染；
- 填充数据时，要考虑游戏规则，保证卡片是3的倍数；
- 设计点击的交互：多层数组，保证只有上层可以点击，可利用.covered-item { pointer-event: none; }做点击限制展开评论点赞 - #青训营笔记创作活动# 1月30日 打卡day7
JS高亮显示被评论文本：一层原文本容器，一层canvas，二者位置相同，用【document.getSelection().getRangeAt(0) 】获取用户的划词/划句范围，创建【range】对象，得到划词区域文本相对语文本容器的位置信息，遍历获取头尾中间的文本节点，使用多个【range】处理跨行的文本，回到canvas渲染高亮背景。要保存评论的文本标签，可以获取从文本容器到文本节点的路径信息，用于存储；再根据路径信息获取文本节点，用于返显。（有没有更简单的高亮方法？）展开评论点赞 - #青训营笔记创作活动# 1月29日 打卡 day6
一些有趣实用的css属性
【position: sticky】属性，滚动时吸顶
【:empty】选择器，选中内容为空的容器，通过伪元素为空容器添加提示，在没有数据时能够提醒用户
【gap】属性，适用于 Grid 布局、Flex 布局以及多列布局，设置元素的间隔
【background-clip: text】给文字加背景蒙版
【user-select】属性，禁用光标选中，让网页和移动端看起来效果一样
【:invalid】内容通过或未通过验证时，要显示什么样的提示效果（比如输验证码）
【:focus-within】一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。
【mix-blend-mode:difference】属性，设计元素的内容应该与元素的直系父元素的内容和元素的背景如何混合
展开评论点赞 - #青训营笔记创作活动# 1月28日打卡day5
前段压缩图片思路—一利用压缩工具,检测新图片,压缩后替换本地
过程:①找出所有的图片资源;②均分任务到每个进程;③把原图上传到TinyPng;④从TinyPng
中下载压缩好的图片;⑤用下载的图片覆盖本地图片。评论点赞