用户8714713442623
获得徽章 1
- 1月2日 打卡day13
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：
函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
不过，这种实现方式还是比较有局限的，仅限于点击行为，像很多时候，节流可能会用在滚动事件或者键盘事件上，像这些场景就用传统方式实现就行了。 #青训营笔记创作活动#展开评论点赞 - 1月1日 打卡day12
阿里面试官：请设计一个不能操作DOM和调接口的环境
阿里面试官：请设计一个不能操作DOM和调接口的环境
最终实现
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸 #青训营笔记创作活动#
展开评论点赞 - 12月31日 打卡day11
Vite项目屏幕适配的两种方案，超详细！
不知道如何适配vite项目？
基于rem的适配方案
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素的字体设置为10px,方便于我们计算
基于scale的适配方案
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。 #青训营笔记创作活动#展开评论点赞 - 12月30日 打卡day10
本文列举 7 个不常用但很有用且你见过也可能没见过的 CSS 属性，带大家领略 CSS 之美。
1. position: sticky
2. :empty 选择器
3. gap
4. background-clip: text
5. user-select
6. :invalid 伪类
7. :focus-within 伪类
8. mix-blend-mode:difference
#青训营笔记创作活动#
展开评论点赞 - 12月29日 打卡day9
TinyPng提供两种压缩方法：
通过在官网上进行手动压缩；
通过官方提供的tinify进行压缩；
身为一个程序员 ，是不能接受手动一张张上传压缩这种方法的。因此，选择第二种方法，通过封装一个工具，对项目内的图片自动压缩，彻底释放双手 #青训营笔记创作活动#
展开评论点赞 - 12月28 打卡day8
今日学习：
什么是 Esbuild?
Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。
#青训营笔记创作活动#展开评论点赞 - 12月27日 打卡day7
今日学习:...
学会如何使用 WebRTC 的一些 API
学会如何分享屏幕，录制屏幕
学会如何通过 WebRTC 实现拍照
学会如何实现视频虚拟背景
搭建一个 1v1 的 WebRTC 实时音视频通话
这个技术，从未听说过，所以这居然是前端的范畴 #青训营笔记创作活动#展开评论点赞 - 12月26日 打卡day6
今日学习：
前端人必须掌握的抓包技能
什么是抓包？
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以：
分析网络问题
业务分析
分析网络信息流通量
网络大数据金融风险控制
探测企图入侵网络的攻击
探测由内部和外部的用户滥用网络资源
探测网络入侵后的影响
监测链接互联网宽频流量
监测网络使用流量（包括内部用户，外部用户和系统）
监测互联网和用户电脑的安全状态
渗透与欺骗
... #青训营笔记创作活动#
展开评论点赞 - 12月25日 打卡day5
JavaScript 必须学会的11 个工具方法(避免重复造轮子)
计算距离下次生日还有多少天
回到顶部
复制文本
防抖/节流
过滤特殊字符
常用正则判断
初始化数组
将 RGB 转换为十六进制
检测是否是一个函数
检测是否为一个安全数组
检测对象是否为一个安全对象 #青训营笔记创作活动#展开评论点赞 - 12月24 打卡 day4
今日学习：
前端人70%以上 不了解的promise/async await
刚开始学习js的时候，听得云里雾里，甚至不知道有什么用。确实也清楚这方面是个重点！文章讲的很好，先收藏了，以后再慢慢消化吧 #青训营笔记创作活动#
展开评论点赞