这是我参与「第五届青训营」伴学笔记活动的第6天。
2月14日 打卡 day8
今日学习 《规范你的Typescript注释，一步一步教你生成API文档》。
JSDoc 不适用 TS，强弱类型的原因，注释对两者的意义大相径庭，故不适用。
API 信息提取器：
@microsoft/api-extractor 库可以提取 API 信息，API 报告， 合并类型文件: 将您的 TS 声明汇总到单个 .d.ts 文件中，类似于 webpack 可以将所有 JS 文件汇总到单个包中进行分发。
文档生成器：
将 API 信息提取为 JSON后，根据 JSON 文件生成具体文档。 api-document 是一个简单的文档生成器，可以根据 api-extractor 生成的 JSON 文件进一步生成 markdown 和 yaml 格式的文档。 最后，使用站点生成器打造 API 站点。
规范你的Typescript注释，一步一步教你生成API文档 - 掘金 (juejin.cn)
2月15日 打卡 day9
今日学习《不使用第三方库怎么实现【前端引导页】功能？》。
核心：高亮部分、引导部分。引导部分随高亮部分移动，过渡效果有较复杂的 蒙层引导 和 无蒙层引导。
第一种实现思路：
高亮部分: 通过 el.cloneNode(true)复制对应目标元素节点，并将克隆节点添加到蒙层上。通过 margin (或 translate、position 等)实现克隆节点的位置与目标节点重合。
引导部分：通过 position: fixed 实现定位效果，并通过动态修改 left、top 属性实现引导弹窗跟随目标移动。
过渡动画: 通过 transition 实现位置的平滑移动。
页面 位置/内容 发生变化时(如: resize、scroll 事件), 需要重新计算位置信息。 实现缺点：目标节点需要被深度复制、不能实现边引导边操作。
第二种实现思路：
与第一种实现差异在于 高亮部分通过控制 z-index 的值，让目标元素展示在蒙层之上。
实现缺点：
当目标元素的父元素 position: fixed | absolute | sticky 时，目标元素的 z-index 无法超过蒙版层（可参考 shepherd.js 的 svg 解决方案）
第三种：
通过 SVG 可编码特点，利用 SVG 来实现蒙版效果，并在绘制蒙版时，预留出目标元素的高亮区域（即 SVG 不需要绘制这一部分），这样就解决了使用 z-index 可能失效的问题。
不使用第三方库怎么实现【前端引导页】功能？ - 掘金 (juejin.cn)
2月16日 打卡 day10
今日学习《原生JS手写一个优雅的图片预览功能，带你吃透背后原理》- 兼容PC与H5。
实现原理：
通过 CSS3 中的 transform 变换，translate 偏移元素位置，scale 缩放元素。 蒙层实现：touch-action: none; user-select: none; &>img: transform:translateZ(0)。
移动端通过 touch-action: none 阻止了所有手势效果，也就不会发生页面滚动，该属性在平时业务代码中也可用于优化移动端性能、解决 touchmove 的 passive 报错等。
PC 上的滚动通常是利用滚轮（笔记本触控板也被视为滚轮），所以在滚轮事件中阻止系统默认时间也就阻止了滚动，但不是完全阻止，因为滚动条没隐藏的话还是可以拖动来滚动页面，如果需要完全禁止滚动，应该在打开弹窗时为 body 设置 overfolw:hidden。 注意滚轮事件(wheel)是可以触发冒泡捕获的，滚动事件(scroll)却无法触发冒泡。 鼠标移动事件对应 mousemove，移动端移动事件对应 touchmove。
本文通过 pointerEvent 进行多端统一的事件监听，无需关心用户输入硬件上的差异。 pointer 是输入设备的硬件层抽象，指向具体表面上的一个或一组坐标，包括接触点位置，引发事件的设备类型，接触表面受到的压力等。
监听事件中我们可以通过 event 对象获取 offset 相对偏移量， client 距离窗口的横坐标和纵坐标等信息。
中心点位置
可以通过 window.innerWidth/height 获取。
PC端图片缩放利用滚轮事件改变 scale 值实现，重点是利用 deltaY 值政府判断滚轮是朝上还是朝下，Mac 端呢？
通过鼠标当前偏移量 offset 改变 transform-origin 动态设置缩放的原点。
但是如果鼠标不断移动且幅度很大时会出现抖动，需要消除远点位置突然改变带来的影响才能完全解决这个问题，该问题在移动端缩放时是灾难级体验。
每次指针按下时记录 clientXY 为初始值，移动时计算当前值与初始点位的差值加到 translate 偏移量中即可。
需注意的是每次移动事件结束时都必须更新初始点位，否则膨胀的偏移距离会使图片加速逃逸可视区域。
移动端双指缩放：
在 TouchEvent 事件对象中，我们可以找到 touches 数组，判断触点个数，是实现双指缩放的基础。PointerEvent 中找不到类似对象，大概 Touch 对象只服务于 TouchEvent，我们需要自己实现对触摸点数的记录。
移动端 touches 数组偶尔会不停增加，即 pinterup 不能正确删除对应点位或被意外中断，此时会触发 pointercancel 事件监听，我们必须在此清空数组，这是容易被忽视的一点。
双指捏合，得到一个变化比例 = 当前距离/初始距离，该比例作为改变 scale 的系数就能得到新的缩放值。Math.hypot() 可以计算两点距离。
之后结合双指中心点位置设置为缩放原点坐标即可。
translateZ(0)在本例中只是为了触发 CSS3 硬件加速来提升性能，而 translate3d() & will-change:transform 会使移动端图片变模糊（Android 似乎不会），vant 框架。
will-change 属性是用于提升性能的最后手段，可以认为是浏览器尝试牺牲掉一些画面质量来换取性能提升的一种手段。
原生JS手写一个优雅的图片预览功能，带你吃透背后原理 - 掘金 (juejin.cn)
2月17日 打卡 day11
今日学习《细数那些惊艳一时的 CSS 属性》。
position:sticky；
应用场景：表格标题栏、网站导航栏、手机通讯录人名首字母标题等滚动时一直贴着最顶上。
:empty 选择器；
通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示，比如数据返回列表为 0。
gap；
gap 属性适用于 Grid、Flex 及多列布局，并不一定是只有 Grid 布局中可以使用。
background-clip:text。
user-select；
网页上的字是可以通过光标选中的，而 APP 不行，该属性让网页看着和移动端一样。
:invalid 伪类；
该属性表示任意内容未通过验证的 input 或其他 form 元素。通过此实现 input 有效时元素颜色变化。
:focus-within 伪类；
含例子。该属性可以根据子元素的状态来改变父元素的样式，可实现账号密码登录时，小熊捂眼动作切换的彩蛋。
mix-blend-mode:difference;
含例子。该属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
🌼 细数那些惊艳一时的 CSS 属性 - 掘金 (juejin.cn)
2月18日 打卡 day12
今日学习《Vite项目屏幕适配的两种方案，超详细！》。
resize：clearTimeout; timer.value = window.setTimeout(()=>{},intervalTime);
toFixed(): 小数点后位数；
parseFloat():解析字符串参数并返回一个浮点数。
transform: scale/X/Y;
rem:是指根元素的字体大小单位，开发中通常将根元素(html/body)的字体设置为 10px，方便计算。适用于不固定宽高比的 Web 应用。
Vite项目屏幕适配的两种方案，超详细！ - 掘金 (juejin.cn)
2月19日 打卡 day13
今日学习 《一次搞懂数据大屏适配方案 (vw vh、rem、scale)》。
方案一：vw、vh。
实现思路：按照设计稿尺寸，将 px 按比例计算为 vw 和 vh。
sass： @use "sass:math"; @function vw($px) {@return math.div($px, $designWidth) * 100vw;}
之后配置下 utils.scss 路径即可全局使用。
屏幕变化后，图表自动调整：这种方式弊端是屏幕尺寸变化后，需要手动刷新才能完成自适应调整，为了解决这个问题，需要在各个图表中监听尺寸变化并调整图表。也可借助 element-resize-detector，封装 resize 指令。
echarts 字体大小只支持像素，一般字体不会去做自适应，当宽高比跟 ui 稿比例出入过大时，会出现文字与图表重叠的情况。
方案二：scale。
通过 CSS 的 scale 属性，根据屏幕大小，对图表进行整体的等比缩放，达到自适应效果。
比较屏幕与设计稿宽高比确定具体的缩放比例。
通过 transform translate 50% 与 绝对定位使图表局中。 v-scale-screen 插件。
方案三：rem + vw vh。
获得 rem 的基准值；
动态的计算 html 根元素的 font-size；屏幕变化，图表自适应，参考方案一。 含资源。
