油饼食不食
重庆银行
获得徽章 5
- #青训营笔记创作活动#
2月1日 打卡day15
1. hover延时触发和active长按触发
场景：
在鼠标停留在一个元素1s后才触发事件，不满1s就不会触发，这样就可以避免鼠标在快速划过时，频繁地触发事件
实现：
CSS
在button的伪类hover或者active中，定义一个无关紧要的样式，例如opacity:0.999,然后再定义样式transition: 0s 1s opacity,表示延时1s呈现上述样式，在JS中，定义一个监听器，监听”transitioned“事件，并执行相应的逻辑代码
2. 轮播和暂停
场景：
轮播图，利用setInterval来控制图片的不断切换，在鼠标移动到轮播图上时停止切换，即clearInterval，在鼠标移出后，有继续进行切换
实现：
CSS
在view上使用CSS动画，animation，定义动画@keyframes scroll { to { transform: translateZ(.1px); } }，在动画上使用infinite，来达到setInterval的效果，animation: scroll 1s infinite。再在view上添加”animationiteration“的事件监听，执行相应的代码逻辑展开评论点赞 - #青训营笔记创作活动#
1月31日 打卡day14
1. 创建人脸模型，直接引入tensorflow训练好的人脸特征点检测模型
2. 人脸识别，通过创建的人脸模型来识别面部
3. 特征检测，指针对人脸特征进行提取及判断，主要包括以下4中方式
1）人脸的远近
将识别到的面部的长宽与摄像头整体的长宽做比较得到一个对应的百分比，连续捕捉并存储多个百分比到数组，当多于4个时，删除数组首部的一个，并比较当前数组首部和尾部两个百分比的百分比，当diff绝对值大于5时，根据正负判断时”靠近”(负)还是”远离”(正)
2）张嘴
计算从额头最高点到下巴最低点的距离和上唇最高点到下唇最低点的距离的百分比，连续捕捉并存储多个百分比到数组，当百分比多余两个时，删除数组首部的一个，并比较当前数组首部和尾部两个百分比的百分比，如果diff值小于-5，则为张嘴
3）眨眼
计算左眼上下之间的距离以及右眼上下之间的距离，其中一只眼睛的距离小于5，则将两只眼睛的数值构成数组存储到数组的数组中，如果不符合，则清空数组的数组，当数组的数组长度大于4后，则为眨眼
4) 左右摇头
计算左脸颊到鼻子中间的距离和右脸颊到鼻子中间的距离值，并计算它们的差以及它们的和的百分比，连续捕捉并存储多个百分比到数组，当百分比多余4个时，删除数组首部的一个，遍历每一个百分比，如果都是大于或者小于某个阈值，则向左转或者向右转展开评论点赞 - #青训营笔记创作活动#
1月30日 打卡day13
执行npm run dist，在构建出的dist目录中生成单独的UMD代码(antd.js)以及对应的sourcemap(antd.js.map)，修改antd引入的路径，import {Button} from ‘antd/dist/antd’，但是通过读取sourcemap发现仍然还是存在React.createElement，这是因为编译流程首先会经过tsc将Button.tsx转换为了Button.js，再通过babel编译，最后再通过webpack打包成bundle.js，不管是tsc、babel还是webpack，都会生成sourcemap，所以刚才的sourcemap只是关联到了babel编译之后的代码，所以还需要修改一下编译配置，在antd的编译工具链在 @ant-design/tools 这个包里，从 antd/node_modules/@antd-design/tools/lib/getWebpackConfig.js 就可以找到 webpack 的配置，把其中的devtool改成cheap-module-source-map,并在babel和根目录下tsconfig.json的配置中，将sourceMap的值修改为true，重跑npm run dist，将dist目录下新的antd.js和antd.js.map复制到react项目的node_modules/antd/dist下并删除整个.cache目录（清空babel-loader缓存）但是记住在开发完成之后，需要把引入从”antd/dist/antd”换成“antd”展开评论点赞 - #青训营笔记创作活动#
1月29日 打卡day12
需要用到三个CSS关键字：
1）pointer-events 用于禁用事件
2）animation 用于控制时间及状态的恢复
3）伪类 :active 用于控制触发时机，即点击行为
代码如下:
button {
animation: throttle 2s step-end forwards;
}
button: active {
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
step-end等于steps(1,end), step-end和step-start的区别在于，在keyframe中通过百分比可以将动画在各个阶段的样式，而from和to相当于0%和100%，而end和start的区别在于，end的话第一步from占据整个时间周期，到达animation设置的时间后，直接变为to，而start则是因为只有两个阶段，直接变为to的样式，并延续整个时间，是的，start和end可以反着理解，start表示掠过开始的阶段。展开评论点赞 - #青训营笔记创作活动#
1月28日 打卡day11
在沙箱代码中使用with关键字的意义：实现所有变量均来自可靠或自主实现的环境上下文
但是光靠with关键字，当自定义执行上下文对象中不包含的变量，会通过作用域链向上查找
因此，引入proxy，使用Proxy.has来拦截白名单以外任意变量的访问
但是还是更推荐iframe，可以直接把iframe.contentWindow作为沙箱执行的全局window对象，更加方便、简单、安全。
展开评论点赞 - #青训营笔记创作活动#
1月26日 打卡day10
vita项目屏幕适配方案：
1. 基于rem的适配方案
需要安装三个额外的依赖，postcss-pxtorem（PostCss插件，用于将像素单元生成rem单位），autoprefixer（浏览器前缀处理插件），amfe-flexible（可伸缩布局方案）。
在安装以上插件之后，再在根目录创建postcss.config.js文件以及main.ts文件中导入"amfe-flexible/index.js"，重启项目即可。
2. 基于scale的适配方案
利用CSS3中transform的scale属性，写一个resize的工具函数，在相关界面引入它的方法，并在相应的声明周期使用这些方法。
展开评论点赞 - #青训营笔记创作活动#
1月25日 打卡day9
今天学习了一些实用的新css样式
position: sticky
再内容滚动时，让标题等需要一直显示的内容一直贴在最顶上
:empty选择器
可以利用:empty选中内容为空的容器，然后再通过伪元素为空容器添加提示信息。
e.g: .container:empty::after{ content: "暂无数据"; }
1.
gap
让子元素之间隔开相同的距离。适用于Grid布局、Flex布局以及多列布局。
1.
background-clip: text
用来做带背景的文字效果
1.
user-select
网页和APP有一个不同点，网页上的字可以通过光标选中的，而APP不行。如果需要它们保持一致，可以通过user-select禁用光标选中。展开评论点赞 - #青训营笔记创作活动#
1月24日 打卡day8
今天学习了前端图片压缩的相关功能
TinyPng：
使用智能的“有损压缩技术”来减少WEBP、JPEG和PNG文件的大小。原理是选择性地减少图像中的“颜色数量”。使用更少的字节来存储数据。压缩显示效果差异几乎不存在且文件大小差别非常大。
压缩方法：
1. 通过官网进行手动压缩；
2. 通过官方提供的tinify进行压缩；
第二种方法可以通过封装其为一个工具，实现对于项目内图片的自动压缩。
虽然webpack plugin看上去是一个不错的选择，但是它对于自定义压缩图片（重新打包上线时防止旧图片被多次压缩、选择哪些图片进行压缩）需要进行额外的配置，所以作者直接使用命令行工具通过命令行交互选择压缩图片。
命令行工具的实现：
1. 查找（找出所有图片资源）
2. 分配（均分任务到每一个进程）
3. 上传（把原图上传到TinyPng）
4. 下载（从TinyPng中下载压缩好的图片）
5. 写入（覆盖本地图片）展开评论点赞 - #青训营笔记创作活动#
1月21日 打卡day7
今天学习了esbuild
esbuild是一款基于golang开发的打包工具，架构有以下优势：
1. Golang开发，充分利用多线程打包，线程之间共享内容；直接将代码编译成机械码
2. 算法进过精心设计，尽可能充分利用所有CPU内核
3. 从0开始造轮子，没有第三方库的黑盒逻辑，保证代码性能
4. 高效利用内存，从头到尾尽可能复用一份AST节点数据，从而大大提升内存复用率
swc和esbuild的关系：
在要求高兼容性和自定义(支持es5语法，装饰器语法已经操AST)的transformer场景，swc更适合，但是esbuild更适合做bundle和minimizer以及对兼容性要求不高的transformer
插件机制：
Esbuild插件就是一个对象，包含name和setup，name是插件的名称，setup是一个函数。其中入参为一个build对象，该对象上挂载了一些钩子供我们自定义一些构建逻辑。例如build.onResolve是在文件解析时触发，build.onLoad是在加载文件时触发。
落地场景：
1.代码压缩工具
2.代替ts-node
3.代替ts-jest
4.第三方库Bundler
5.打包Node库
6.小程序编译
7.Web构建展开评论点赞 - #青训营笔记创作活动#
1月20日 打卡day6
今天学习了WebRTC
Web Real-Time Communication是一项实时通讯技术，它允许网络应用和站点，在不借助媒介的情况下，建立浏览器之间，点对点的连接，实现视频流、音频流或者其他任意数据的传输。
摄像头获取媒体流及一些其他操作：
先设置一个用于播放媒体流的video标签，添加autoplay属性，这样就可以在摄像头获取到媒体流后自动播放。WebRTC仅支持https协议或者localhost，http会报错。
涉及到的api：
1. 获取媒体流
navigator.mediaDevices.getUserMedia(constraints)
接受一个配置对象作为参数，配置对象包含媒体流的类型以及媒体流的分辨率等信息。默认情况下，是获取摄像头和麦克风的媒体流可以使用MDN或者navigator.mediaDevices.getSupportedConstraints()获取
2. 绘制摄像头获取的照片（canvas）
首先获取2d的canvas对象
const ctx = canvas.getContext(‘2d’)
将video标签文档对象转为HTMLVideoElement
const videoEl = document.getElementById(‘localVedio’) as HTMLVideoElement
使用canvas对象画图
ctx.drawImage(vedioEl,0,0,canvas.width,canvas.height)
再转为url格式就可以在image标签中进行显示了
canvas.toData URL(‘image/png’)
3. 切换摄像头
通过navigator.mediaDevices.enumerateDevices获取所有的设备信息，然后筛选出videoInput类型的设备，通过不同的设备id来实现切换摄像头
在支持前后摄像头的设备上可以使用，可以在facingMode属性上使用exact关键字来指定使用的摄像头，facingMode上有user、enviroment、left和right四个可选值。
通过屏幕共享获取媒体流，实现屏幕录制等操作展开评论点赞