overwatch
小菜
获得徽章 1
- #青训营笔记创作活动#
1月5日 day20打卡
将树状结构扁平化以更好地处理数据。
优势：
1. 结构清晰，可以轻易对数据进行处理
2. 在大数据量的情况下，可以极大的提高性能展开赞过 评论2 - #青训营笔记创作活动#
1月4日 day19打卡
包管理工具pnpm评论点赞 - #青训营笔记创作活动#
1月3日 day18打卡
浏览器调试技巧：
1. log直接输出时，可以加个{}，能直观地看到变量名称
2. console.time/timeEnd()，计算代码段执行时间
3. console.dir(node)，查看DOM对象的事件和属性
4. console.table(obj)，将对象以表格形式展示
5. 开发者工具：
1. sources中可以打条件断点，elements中可以打DOM断点
2. sources中搜索文件：ctrl+p展开评论点赞 - #青训营笔记创作活动#
1月2日 day17打卡
使用css的比较函数clamp()来动态调整css样式评论点赞 - #青训营笔记创作活动#
1月1日 day16打卡
借助CSS来监听事件，避免使用定时器
1. :hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
2. :active配合transition延时、transitionend监听可以实现长按触发效果
3. CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
4. 可以直接通过:hover来控制台动画的暂停和播放展开评论点赞 - #青训营笔记创作活动#
12月31日 day15打卡
前端+实时人脸检测。模型框架是TensorFlow，其他纯前端实现评论点赞 - #青训营笔记创作活动#
12月30日 day14打卡
如何调试组件库，以及阅读组件的源码评论点赞 - #青训营笔记创作活动#
12月29日 day13打卡
设计一个不能操作DOM和调用接口的环境
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸展开评论点赞 - #青训营笔记创作活动#
12月28日 day12打卡
使用纯CSS方式实现节流评论点赞