涂涂图图
获得徽章 1
- #青训营笔记创作活动#
2月8日 打卡day14
今日学习：使用fabric.js 快速开发一个图片编辑器
- fabric.js和konva.js都是canvas库，两者功能相似
- 关键：把fabric实例对象共享给各个功能组件展开评论点赞 - #青训营笔记创作活动#
2月7日 打卡day13
今日学习：使用CSS实现“节流”功能
节流：
实现思路一：
- 限制事件——禁用点击事件 pointer-events
- 限制时间——animation
- 触发时机—— :active
=> CSS动画控制按钮 禁用 → 可点击 状态
代码：
@keyframes throttle{
from{
pointer-events: none;
}
to{
pointer-events: all;
}
}
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
实现思路二：
通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态
button{
opacity: .99;
transition: opacity 2s;
}
button:not(:disabled):active{
opacity: 1;
transition: 0s;
}
// 过渡开始
document.addEventListener('transitionstart', function(e){
e.target.disabled = true
})
// 过渡结束
document.addEventListener('transitionend', function(e){
e.target.disabled = false
})
好处：禁用逻辑和业务逻辑是完全解耦的
局限：只适用于点击事件，可以通过tab聚焦+Enter和调试台取消css动画效果破解
另外在首次页面加载时不能立即点击按钮，需等待一个动画执行时间展开评论点赞 - #青训营笔记创作活动#
2月6日 打卡day12
今日学习：设计一个不能操作DOM和调接口的环境
思路：利用iframe创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象；设置黑名单，阻止访问黑名单中变量，禁止DOM操作、调用接口，拦截window对象
沙箱（Sandbox） 是一种安全机制，为运行中的程序提供隔离环境，通常用于执行未经测试或不受信任的程序或代码，它会为待执行的程序创建一个独立的执行环境，内部程序的执行不会影响到外部程序的运行。
展开等人赞过 104 - #青训营笔记创作活动#
2月5日 打卡day11
今日学习：屏幕适配
1、基于rem的适配：不固定宽高比的Web应用，适用于绝大部分业务场景
（1）安装依赖：npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev
postcss-pxtorem 像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案
（2）在根目录创建postcss.config.js文件
（3）在main.js/ts导入依赖：import "amfe-flexible/index.js";
（4）重启项目
2、基于scale的适配：固定宽高比的Web应用，如大屏或者固定窗口业务应用
使用transform属性的scale()方法来实现元素的缩放效果
展开评论点赞 - #青训营笔记创作活动#
2月3日 打卡day10
今日学习：8个有用的CSS属性
1、position: sticky;
使用时注意兼容性
当标题行滚动到顶部时，使用粘性定位把标题行固定
position: sticky;
top: 0;
2、:empty选择器
选择内容为空的标签，通过:empty 伪类给空标签添加提示内容
.container:empty::after {
content: "暂无数据";
}
3、gap
gap属性适用于grid布局、flex布局以及多列布局
让子元素之间间隔相同距离
使用时注意兼容性，移动端不要用，uc、夸克均不支持
4、background-clip: text;
使文字具有图片背景，相当于把文字线条做镂空效果，使得背景图片在文字上得以体现
5、user-select
禁用光标选中 ，让网页看着和移动端一样
6、:invalid 伪类
invalid无效的，表示任意内容未通过验证的 input 或其他 form 元素。与之对应的有 :valid 伪类。
比如在进行表单校验的时候，input值有效时元素显示绿色，无效时显示红色
7、:focus-within 伪类
监听焦点，给自身或者后代元素添加伪类 :focus-within，表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类就会触发它，类似于js中的冒泡。
实例文章：纯CSS实现掘金登录小熊猫捂眼
juejin.cn
8、mix-blend-mode:dirrerence
描述元素的内容与其背景、其直接父元素内容按什么样式混合
difference 表示差值
实例文章：不可思议的颜色混合模式juejin.cn
注意：以上属性在使用时需要注意兼容性问题展开评论点赞 - #青训营笔记创作活动#
2月2日 打卡day9
今日学习：图片压缩
TinyPNG（tinypng.com）：智能有损压缩技术，减少WEBP、JPEG和PNG文件大小
什么时候压缩？
—— 在打包「生产环境」代码之前，执行「压缩命令」，通过命令行交互，选择需要压缩的图片。
实现思路：查找、分配、上传、下载、写入（覆盖）
（把UI安排起来）展开评论点赞 - #青训营笔记创作活动#
2月1日 打卡day8
今日学习：esbuild
esbuild基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍。
1、架构优势：
（1） Golang 开发：多线程打包、线程之间共享内容、直接编译成机器码。
（2）多核并用：充分利用CPU内核。
（3）从零造轮子：没有任何第三方库的黑盒逻辑，保证极致的代码性能。
（4）高效利用内存：尽可能地复用一份 AST 节点数据，大大提高内存利用效率，提升编译性能。
2、与SWC对比
SWC 与 Esbuild 的关系类似于当下的 Babel 和 Webpack，前者更适合做兼容性和自定义要求高的 Transformer(比如移动端业务场景)，而后者适合做 Bundler 和 Minimizer，以及兼容性和自定义要求均不高的 Transformer。
3、插件机制
Esbuild 插件机制只可作用于 build API，而不适用于 transformAPI。
4、落地场景
（1）代码压缩工具
（2）代替 ts-node
（3）代替 ts-jest
（4）第三方库 Bundler
（5）打包 Node 库
（6）小程序编译
（7）Web 构建展开评论点赞 - #青训营笔记创作活动#
1月31日 打卡day7
今日学习：实时通讯技术WebRTC
WebRTC (Web Real-Time Communications) ，使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。
WebRTC 只能在 HTTPS 协议或者 localhost 下使用，如果是 HTTP 协议，会报错。
1、应用场景
直播、游戏、视频会议/在线教育、屏幕共享/远程控制......
2、媒体流
- 媒体流是采用流式传输的方式，使得流式媒体在Internet上播放的技术
- 可以来自本地设备，也可以来自远程设备
- 实时/非实时
- 通过摄像头，麦克风，屏幕共享等方式获取
- 利用WebRTC 技术将媒体流传输到远端实现实时通讯
3、操作
获取媒体流 - navigator.mediaDevices.getUserMedia(constraints)
获取constraints参数支持的配置项 - navigator.mediaDevices.getSupportedConstraints()
constraints - 指定了请求的媒体类型和相对应的参数，用于配置视频流和音频流的信息
获取视频设备 - navigator.mediaDevices.enumerateDevices()
切换前后摄像头 - facingMode
获取屏幕共享的媒体流 - getDisplayMedia （很像笔试时的屏幕共享监考的功能）
4、视频虚拟背景
原理：通过canvas将视频中的每一帧画到画布上，然后将画布中的像素逐个与设定的背景色（默认是绿色，你可以更换为任意符合你背景的颜色）进行计算，再处理要使用的背景图数据。展开评论点赞 - #青训营笔记创作活动#
1月30日打卡day6
今日学习：抓包与抓包工具whistle
引例：实现在原生app加载线上h5运行本地代码——通过抓包工具比如 whistle 就可以做到拦截线上页面请求数据，再响应本地代码
1、什么是抓包
将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作
2、HTTP/HTTPS抓包原理
（1）在 http 标准中，没有对通信端身份验证的标准。所以对于 HTTP 抓包，无需做过多的处理，只需要让中间人负责转发客户端和服务端的数据包
（2）HTTP + 加密 + 认证 + 完整性保护 = HTTPS
中间人想要抓包，需在 HTTPS 加密通信之前
3、抓包工具whistle
Whistle 是基于 Node 实现的跨平台抓包免费调试工具，具有跨平台、操作简单、支持多种强大功能的特点
4、whistle实战案例
（1）原生 app 加载 PC本地代码开发
（2）查看移动端的 DOM 样式
（3）解决本地开发跨域问题
官方whistle文档：wproxy.org 展开评论点赞 - #青训营笔记创作活动#
1月29日 打卡day5
今日学习：JavaScript 必须学会的11 个工具方法(避免重复造轮子)
1、计算距离xxx还有多少天
这里借助了moment（momentjs.cn）工具：获取xxx时间，比较时间戳，然后计算
评论区老哥推荐使用day.js
2、回到顶部
（1） 可以实现但是效果欠佳
window.scrollTo(0, 0)
document.documentElement.scrollTop = 0;
（2）使用计时器控制滚动高度，到顶部清除计时器
document.documentElement.scrollTop = scrollTopH.value -= 50
（3）动画库anime.js 或 velocity.js 控制 scrollTop 值
3、复制文本
4、防抖/节流
（1）防抖：指定时间内，频繁触发某个事件，只执行最后一次触发；场景——用户在input搜索框输入内容时
（2）节流：指定时间内，频繁触发某个事件，只触发一次；场景——按钮点击
5、过滤特殊字符
let reg = new RegExp("[`~!@#$^&*()=：”“'。，、？|{}':;'%,\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】‘；]")
6、常用正则判断
（1）2-9位汉字字符
const reg = /^[\u4e00-\u9fa5]{2,9}$/;
（2）手机号
const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
（3）6到18位大小写字母数字下划线组成的密码
const reg = /^[a-zA-Z0-9_]{6,18}$/;
7、初始化数组
// fill()方法 是 es6新增的一个方法 使用指定的元素填充数组,其实就是用默认内容初始化数组
const arrList = Array(6).fill()
8、RGB转十六进制
9、判断是否是一个函数
10、判断是否是一个数组
11、判断是否是一个对象
来自评论区老哥们的工具库链接：
Rutils：shufei021.github.io
正则大全：any86.github.io 展开评论点赞
juejin.cn