Smeb
行百里者半九十
获得徽章 1
- #青训营笔记创作活动#
2月1日 Day19
一些浏览器调试技巧
1.console.log
最常用的功能，基本上每天都会使用到，作用也很简单，在控制台输出内容。
2.console.warn
在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示.
3.console.error
在控制台输出错误信息，用于代码错误和异常的提示
4.console.time和console.timeEnd
这两个方法一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断。我们可以根据输出的时间判断是否符合我们的预期，是否需要对其做进一步优化，也可以判断是否是由于某一块代码执行时间太长，占用太长线程时间，导致我们页面卡顿等一系列问题。
5.console.assert
第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
6.console.dir
对于DOM节点的打印输出，如果采用console.log，会以标签的形式输出，和直接查看没有太大的差异，有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
DOM断点
当你想对DOM节点发生变化时进行断点，请使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。
展开评论点赞 - #青训营笔记创作活动#
1月31日 Day18
几个实用的CSS函数
1.Clamp()函数
作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
使用场景：流体的尺寸和定位，装饰性元素，流体高度，Loading Bar
2.Max()函数
让你可以从一个逗号分隔的表达式列表中选择最大的值作为属性的值。接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。
使用CSS max()函数，根据视口宽度，将卡片的border-radius 从 0px 切换到 8px。
3.Min()函数
让你可以从一个逗号分隔的表达式列表中选择最小的值作为属性的值。接受一个或多个用逗号分隔的表达式作为他的参数，数值最小的表达式的值将会作为指定的属性的值。
min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。
展开评论点赞 - #青训营笔记创作活动#
1月30日 Day17
用CSS来监听事件
很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这个时候就可以借助CSS来控制，使用起来更方便。
1.hover延时触发
需求：在鼠标停留在一个元素上1s后才触发事件，不满1s就不会触发，这样的好处是，可以避免鼠标在快速划过时，频繁的触发事件。
实现：就是先给需要触发的元素加一个有延时的transition，里只需一个无关紧要的样式就行，如果opacity已经使用过了，可以使用其他的，比如transform:translateZ(.1px)，也是可行的。然后添加监听transitionend方法，这样就可以了，甚至不用操作DOM。
2.长按触发事件
需求：长按触发元素选中。
实现：通过:active伪类中的transition来实现，然后添加监听transitionend方法.
3.轮播和暂停
需求：轮播图自动播放，然后鼠标hover时会暂停轮播图。
实现：借助setInterval来实现重复触发，然后设置animation为Infinite就可以实现无限循环，然后直接通过:hover伪类来暂停和播放动画，监听每次动画的触发可以用animationiteration这个方法，表示每个动画轮回就触发一次，然后再监听animationiteration事件就可以实现了。展开评论点赞 - #青训营笔记创作活动#
1月29日 Day16
前端实现人脸识别
1.创建人脸模型
引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
2.特征检测
人脸特征提取就是针对人脸的某些特征进行判断（以下的动作判断仅供参考，实际情况下需要多个特征点来判断某个动作）
2.1判断人脸的远近
取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
2.2判断张嘴
取2帧 嘴唇[10,152]占人脸长度[0,17]的比例,判断递增，取第一帧和最后最后一帧的距离，根据阈值判断张嘴。
2.3判断眨眼
根据左眼[159, 144] 右眼[385, 374]的距离，判断连续4帧小于阈值，即可判断眨眼了。
展开评论点赞 - #青训营笔记创作活动#
1月28日 Day15
Ant Design ——调试源码
1.前期工作
首先，我们用 create-react-app 创建一个 react 项目，创建成功后，进入到项目里，把 dev server 跑起来，然后我们安装 antd，在入口组件里引入样式和 Button 组件，页面会显示这个 Button。
2.调试主要流程
首先，创建一个 VSCode 调试配置，指定调试的 URL，然后启动调试，可以看到调用栈中上一帧是 renderWithHooks，这就是 react 源码里调用函数组件的地方。
3.直接调试tsx源码
用 sourcemap 来实现，antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
想调试最初的 tsx 源码需要用 sourcemap。把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。
展开评论点赞 - #青训营笔记创作活动#
1月27日 Day14
fabric.js快速开发图片编辑器
一个开源的项目，具体代码详见文末链接，该笔记只对功能设计层面进行记录。
1.架构设计
fabric.js是一个强大的canvas库，框架采用vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
2.解决方法
在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
3.基本功能
背景设置（主要包括置画布大小、设置背景颜色、设置背景图片，也可以设置背景重复方向）。
插入元素（主要包括插入基础元素文字、正方形、圆形、三角形、SVG元素）。
属性调整（不同元素的属性会有差异，但通用属性是一致的，如填充颜色、坐标、旋转角度、透明度等，也有很多特定元素的特定属性，如文字的字体属性、图片的滤镜属性等，
字体属性可以自定义字体，需要先下载字体后再进行设置，可以通过fontfaceobserver工具库下载指定字体，成功后在设置字体名称）。
元素对齐（区分单选元素与多选元素，单选元素时只支持相对于画布水平、垂直、水平垂直对齐）
编辑器经常需要给元素进行分组/拆分组合、调整层级、回退、快捷键、画布放大/缩小、导入/导出文件等功能，不再一一罗列，这个小编辑器都已经支持，大家感兴趣的可以看源码。
fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能展开评论点赞 - #青训营笔记创作活动#
1月26日 Day13
用CSS来做节流
众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。
举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候很多人会使用throttle函数，或者直接引用lodash工具库
但其实也可以通CSS来实现。
1.实现思路
通过禁用事件来对点击事件进行限制，通过animation来设置事件的限制，每次点击后需要自动禁用300ms，时间过后重新恢复。至于点击行为也就是触发时机，通过伪类:active来实现。其实可以看作是对CSS动画的控制，比如有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态。
2.精准控制
设置点击事件后，这时的按钮连续点击就会不断地触发，定义一个动画，然后将这个动画绑定在按钮上，这里为了方便测试，将动画设置成了2s。这里动画的缓动函数设置成了阶梯曲线，step-end，它可以很方便的控制pointer-events的变化时间点。最后，在点击时重新执行一遍动画，只需要在按下时设置动画为none就行了。
3.其他思路
通过定时器，来使用CSS监听事件，通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态。这样做的最大好处是，这部分禁用的逻辑是完全和业务逻辑是解耦的，可以在任意时候，任意场合下无缝接入，也不受框架和环境影响。
4.总结
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性，还可以通过 transition 的回调函数动态设置按钮禁用状态，这种实现方式还是比较有局限的，仅限于点击行为，像很多时候，节流可能会用在滚动事件或者键盘事件上，像这些场景就用传统方式实现就行了。展开评论点赞 - #青训营笔记创作活动#
1月25日 Day12
阿里的一次面试经历
一个朋友分享的阿里四面的问题，“请设计一个不能操作DOM和调接口的环境”。
传统的思路实现起来并不好实现，比如直接修改 window.document 的值，让开发者无法获取 document，但这个值其实是不能修改的，而禁用调接口的方法不能禁用第三方库，因为第三方库太多了。
而这个问题用沙箱就可以完美解决，沙箱（Sandbox） 是一种安全机制，为运行中的程序提供隔离环境，通常用于执行未经测试或不受信任的程序或代码，它会为待执行的程序创建一个独立的执行环境，内部程序的执行不会影响到外部程序的运行
iframe 标签可以创造一个独立的浏览器原生级别的运行环境，这个环境由浏览器实现了与主环境的隔离，利用 iframe 来实现一个沙箱是目前最方便、简单、安全的方法，可以把 iframe.contentWindow 作为沙箱执行的全局 window 对象，沙箱中对window的所有操作，都没有影响到外层的window，实现了隔离的效果。
然后主要进行两部分的操作
1.设置 blacklist 黑名单，添加 document、XMLHttpRequest、fetch、WebSocket 来禁止开发者操作DOM和调接口
2.判断要访问的变量，是否在当前环境的 window 对象中，不在的直接报错，实现禁止通过三方库调接口
而对于一些其他的获取DOM操作，比如通过 window.document 来获取 document 对象，依然是可以操作 DOM 的，所以需要在黑名单中添加windows字段来解决，同时虽然把 window 加入了黑名单，但 window 上的方法，如 open、close 等，依然是可以正常获取使用的。
对于通过new Image()调接口的方式，就可以通过在黑名单中添加Image字段来解决。
如果有其他的bug，也可以尝试在黑名单添加对应的字段来禁止调用。展开评论点赞 - #青训营笔记创作活动#
1月24日 Day11
一项技能——Vue项目屏幕适配方案
1.基于rem的适配方案
（1）rem的概念
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）
（2）适用场景不固定宽高比的Web应用，适用于绝大部分业务场景。（3）应用步骤安装依赖npmipostcss-pxtoremautoprefixeramfe-flexible--save-devpostcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位autoprefixer浏览器前缀处理插件amfe-flexible可伸缩布局方案替代了原先的lib-flexible选用了当前众多浏览器兼容的viewport项目根目录创建postcss.config.js文件main.ts/js文件中导入依赖：import"amfe-flexible/index.js"重启项目
2.基于scale的适配方案
（1）scale的相关方法在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。transform:scaleX(x);/沿x轴方向缩放/transform:scaleY(y);/沿y轴方向缩放/transform:scale();/同时沿x轴和y轴缩放/
（2）适用场景固定宽高比的Web应用，如大屏或者固定窗口业务应用
（3）应用步骤新建resize.ts/js文件相关界面引入resize.ts/js展开评论点赞 - #青训营笔记创作活动#
1月23日 Day10
一些当时非常火的CSS属性
1. position: sticky
吸顶：也就是在滚动列表的时候，标题会一直贴着最顶上，sticky这个值就可以实现这个效果。
2. :empty 选择器
数据一般都是通过请求接口获取的，当然也会存在接口没有数据的情况。这个时候需要给用户一个提示，通过:empty这个选择器，就可以通过css来实现这个操作，通过:empty选中内容为空的容器，然后通过伪元素为空容器添加提示。
3. gap
让多个元素之间隔开某个值的距离，可以通过gap: xx px来设置。
4. background-clip: text
实现一个带背景的文字效果，也就是用图一的背景，填充图二的文字，达到一个带有背景的文字效果。
5. user-select
禁用光标选中。
6. :invalid 伪类
实现当input元素或form元素的值有效时，元素颜色为绿色，无效时为红色，直接设置input:required:invalid的border-color属性即可实现。
7. :focus-within 伪类
表示一个元素获得焦点，或该元素的后代元素获得焦点，就会出现颜色变化效果。
8. mix-blend-mode:difference
描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。实现一种特殊的颜色混合模式，达到想要的不规则样式。展开评论点赞