PureNight
获得徽章 1
- #青训营笔记创作活动#
2023/01/18 day13
今天学习了除了JS做节流外css同样也可以防止按钮重复点击，达到目的。
首先最能想到JS的做法是函数节流，通过throttle函数或引用lodash库。
而css是通过pointer–eventss使用禁用点击事件，animation限制点击后禁用时间，:active伪类触发点击行为。
另一种思路是通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态。展开评论点赞 - #青训营笔记创作活动#
2023/01/27 day12
今天学习了不能操作Dom和调接口的环境。其实碰到这个问题，我也和笔者一样迷茫，但我是真不知道咋弄，这篇就是给了我方法。
需要注意的就是如何禁止操作Dom和调接口，最终笔者给出的方法是沙箱，我以为是类似支付宝提供支付服务的那种沙箱，但还是不太一样。
笔者提供了三种沙箱实现方式和优化，通过js实现沙箱展开评论点赞 - #青训营笔记创作活动#
2023/01/21 day11
今日学了vite项目屏幕适配的两种方案。第一种是基于rem的适配方案，适用不固定高比的web应用，而第二方案是基于scale的适配方案，适用固定宽高比的，比如大屏或固定窗口的。评论点赞 - #青训营笔记创作活动#
2023/01/20 Day10
今天学习的是一些惊艳的css属性。一开始无法确认究竟怎么样才能成为惊艳，有些雀实能想到但有些也受到启发。
1.position:sticky，标题吸附比如按首字母联系人列表，每次首字母一直维持在列表顶部直到划到下一个首字母
2.:empty选择器 类似elementUI中如果没有数据，这个挺有意思
3.gap,适合grid布局，flex布局和多列布局
4.background–clip:text带背景的文字
5.user–select禁用光标选中
6.:invalid，:focus–within伪类
7.min-blend-mode:difference展开评论点赞 - #青训营笔记创作活动#
2023/01/19 Day9
今天学习的是前端图片压缩，如何友好的面对美工发来的切片。
TinyPng-官网在线压缩或官网提供的tinfy压缩
但会出现页面迭代后重新打包旧图片多次压缩，且是发布前全部一起无法选择
最终的解决方案是通过命令行工具交互选择需要的图片
虽然有听说过图片压缩这个“前端操作”，但都是听过且过并没有实际使用，打包速度慢也就慢着，真傻，现在这篇文章发现图片不压缩的致命，以后编写图片相关的代码时会注意
展开评论点赞 - #青训营笔记创作活动#
2023/01/18 Day8
想到打包工具能想到的是webpack，但这篇文章讲了一个基于golang开发的名为Esbuild的打包工具，主打性能优势，与之相比，后者的构建速度比前者这些传统打包工具快10-100倍。
架构优势
1.golang开发，充分利用多线程打包，不像JS还需线程通信postmassage的开销以及直接编译成机器码，节省程序运行时间
2.多核并行
3.从零造轮子
4.高效利用内存
从速度，兼容性和应用场景与SWC和TSC进行比较。综合来看，SWC 与 Esbuild 的关系类似于当下的 Babel 和 Webpack，前者更适合做兼容性和自定义要求高的 Transformer(比如移动端业务场景)，而后者适合做 Bundler 和 Minimizer，以及兼容性和自定义要求均不高的 Transformer
其中还有一些落地场景 比如代码压缩工具，代替ts-node和ts-jest等等展开评论点赞 - #青训营笔记创作活动#
2023/01/17 Day7
今日学习了WebRTC从实战到未来。学习了定义，应用场景，媒体流。如何分享屏幕，录制屏幕，拍照，实现视频虚拟背景和1v1实时音视频通话。
以前一直好奇直播，视频会议是如何实现，看了这篇文章之后有了初步的了解，同时也很好奇除此之外webRTC的其他可玩性的应用场景。展开评论点赞 - #青训营笔记创作活动#
2023/01/16 Day6
今天学习的是前端人必须掌握的抓包技能。
首先学习了抓包的定义，抓包是将网络传输发送与接收的数据包进行截获，重发，编辑和转存等操作，然后通过抓包就能知道做很多事情。而前端通常抓取应用层http/https的包。
https=http+加密+认证+完整性保护
安全层ssl/tsl采用对称加密的方式传输数据和非对称加密的方式传输对称密钥，解决http数据没加密，无法验证身份和数据易篡改三个核心问题。
校验证书分为证书签发者校验和服务器实体证书校验。
抓包工具:whistle,具体可以做到是详见官网图展开评论点赞 - #青训营笔记创作活动#
2023/01/15 Day5
今日学习了避免重复造轮子而必须学会11个JavaScript工具方法。
1.借助moment.js计算生日倒计日
moment.unix()
2.回到顶部的两种方法，评论中也有一些不错的方式，get
3.复制文本
4.防抖–指定时间内频繁触发一个事件，以最后一次触发为准，如input实现搜索
节流–指定时间内频繁触发一个事件，只会触发一次，如因网络或其他问题多次点击提交按钮
5.过滤特殊字符
6.常用正则判断
7.初始化数组
array(6).fill()指定元素填充数组
8.RGB转化成十六进制
9.检测是否为函数或安全数组或有效对象
typeof，isArray
10.
通过这次学习感觉自己Dom方面的知识还是有些含糊，需要继续加强![[奋斗]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_29.2801857.png)
展开评论点赞 - #青训营笔记创作活动#
2023/01/14 Day4
今日学习的这一篇主要讲述了程序员经历了早期异步代码困境在promise出现后解决的问题，以及异步回调和async await的核心语法。评论点赞
![[奋斗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_29.2801857.png)