用户5762202905567
获得徽章 1
#青训营笔记创作活动#
2月14日 打卡day32
# 前端实现docx、pdf格式文件在线预览
docx的实现需要使用[docx-preview](
link.juejin.cn)插件。
pdf的预览需要使用[PDFJS](link.juejin.cn)这个插件,通过将文件流解析写到canvas上实现预览效果。
因为将多种文件渲染放在一个文件中，所以处理函数需要做映射处理，执行对应格式的文件渲染。
2月14日 打卡day32
# 前端实现docx、pdf格式文件在线预览
docx的实现需要使用[docx-preview](
link.juejin.cn)插件。
pdf的预览需要使用[PDFJS](
link.juejin.cn)这个插件,通过将文件流解析写到canvas上实现预览效果。
因为将多种文件渲染放在一个文件中，所以处理函数需要做映射处理，执行对应格式的文件渲染。
展开
评论
点赞
#青训营笔记创作活动#
2月13日 打卡day31
# 前端工程化基石 -- AST（抽象语法树）以及AST的广泛应用
抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用。
通过讲解整体设计和具体编码实现，进行手写编译器。
介绍了AST的广泛应用。
2月13日 打卡day31
# 前端工程化基石 -- AST（抽象语法树）以及AST的广泛应用
抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用。
通过讲解整体设计和具体编码实现，进行手写编译器。
介绍了AST的广泛应用。
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡day30
# Qiankun原理——JS沙箱是怎么做隔离的
### qiankun的三大沙箱
1. SanpshotSandbox：快照沙箱。**把主应用的 `window` 对象做浅拷贝，将 `window` 的键值对存成一个 `Hash Map`。之后无论微应用对 `window` 做任何改动，当要在恢复环境时，把这个 `Hash Map` 又应用到 `window` 上就可以了。**
2. LegacySandbox：**通过监听对 `window` 的修改来直接记录 Diff 内容**。
3. ProxySandbox：
- 把当前 `window` 的一些原生属性（如`document`, `location`等）拷贝出来，单独放在一个对象上，这个对象也称为 `fakeWindow`
- 之后对每个微应用分配一个 `fakeWindow`
- 当微应用修改全局变量时：
- 如果是原生属性，则修改全局的 `window`
- 如果不是原生属性，则修改 `fakeWindow` 里的内容
- 微应用获取全局变量时：
- 如果是原生属性，则从 `window` 里拿
- 如果不是原生属性，则优先从 `fakeWindow` 里获取
### 隔离原理
1. **把要执行 JS 代码放在一个立即执行函数中**，且函数入参有 `window`, `self`, `globalThis`
2. 给这个函数 **绑定上下文** `window.proxy`
3. 执行这个函数，并 **把上面提到的沙箱对象 `window.proxy` 作为入参分别传入**
2月11日 打卡day30
# Qiankun原理——JS沙箱是怎么做隔离的
### qiankun的三大沙箱
1. SanpshotSandbox：快照沙箱。**把主应用的 `window` 对象做浅拷贝，将 `window` 的键值对存成一个 `Hash Map`。之后无论微应用对 `window` 做任何改动，当要在恢复环境时，把这个 `Hash Map` 又应用到 `window` 上就可以了。**
2. LegacySandbox：**通过监听对 `window` 的修改来直接记录 Diff 内容**。
3. ProxySandbox：
- 把当前 `window` 的一些原生属性（如`document`, `location`等）拷贝出来，单独放在一个对象上，这个对象也称为 `fakeWindow`
- 之后对每个微应用分配一个 `fakeWindow`
- 当微应用修改全局变量时：
- 如果是原生属性，则修改全局的 `window`
- 如果不是原生属性，则修改 `fakeWindow` 里的内容
- 微应用获取全局变量时：
- 如果是原生属性，则从 `window` 里拿
- 如果不是原生属性，则优先从 `fakeWindow` 里获取
### 隔离原理
1. **把要执行 JS 代码放在一个立即执行函数中**，且函数入参有 `window`, `self`, `globalThis`
2. 给这个函数 **绑定上下文** `window.proxy`
3. 执行这个函数，并 **把上面提到的沙箱对象 `window.proxy` 作为入参分别传入**
展开
评论
点赞
#青训营笔记创作活动#
2月10日 打卡day29
# package.json 配置完全解读
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
## 常见配置
### 描述配置
主要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。
1. name
2. version
3. repository
4. description
5. keywords
6. homepage
7. bugs
8. license
9. author
## 文件配置
包括项目所包含的文件，以及入口等信息。
1. files
2. type
3. main
4. browser
5. module
6. exports
7. workspaces
## 脚本配置
1. scripts：指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。
2. config： 用于设置 scripts 里的脚本在运行时的参数。
## 依赖配置
项目可能会依赖其他包，需要在 package.json 里配置这些依赖的信息。
1. dependencies：项目可能会依赖其他包
2. devDependencies：开发依赖。
3. peerDependencies：同伴依赖。
4. optionalDependencies：可选依赖。
5. peerDependenciesMeta
6. bundleDependencies：打包依赖。
7. overrides：可以重写项目**依赖的依赖，及其依赖树下某个依赖**的版本号，进行包的替换。
## 发布配置
主要是和项目发布相关的配置。
1. private
2. publishConfig
## 系统配置
1. engines
2. os
3. cpu
## 第三方配置
1. types或者typings
2. unpkg
3. jsdelivr
4. browserslist
5. sideEffects
6. lint-staged
2月10日 打卡day29
# package.json 配置完全解读
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
## 常见配置
### 描述配置
主要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。
1. name
2. version
3. repository
4. description
5. keywords
6. homepage
7. bugs
8. license
9. author
## 文件配置
包括项目所包含的文件，以及入口等信息。
1. files
2. type
3. main
4. browser
5. module
6. exports
7. workspaces
## 脚本配置
1. scripts：指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。
2. config： 用于设置 scripts 里的脚本在运行时的参数。
## 依赖配置
项目可能会依赖其他包，需要在 package.json 里配置这些依赖的信息。
1. dependencies：项目可能会依赖其他包
2. devDependencies：开发依赖。
3. peerDependencies：同伴依赖。
4. optionalDependencies：可选依赖。
5. peerDependenciesMeta
6. bundleDependencies：打包依赖。
7. overrides：可以重写项目**依赖的依赖，及其依赖树下某个依赖**的版本号，进行包的替换。
## 发布配置
主要是和项目发布相关的配置。
1. private
2. publishConfig
## 系统配置
1. engines
2. os
3. cpu
## 第三方配置
1. types或者typings
2. unpkg
3. jsdelivr
4. browserslist
5. sideEffects
6. lint-staged
展开
评论
点赞
#青训营笔记创作活动#
2月9日 打卡day28
# 【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码？
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
Tapable可按照同步/异步分类，也可以按照执行机制分类。
介绍了一些Hook的基本使用：
1. SyncHook
2. SyncBailHook
3. SyncWaterfallHook
4. SyncLoopHook
5. AsyncParellelHook
6. AsyncParallelBailHook
7. AsyncSeriesHook
8. AsyncSeriesBailHook
9. AsyncSeriesWaterfallHook
并介绍了具体实现。
2月9日 打卡day28
# 【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码？
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
Tapable可按照同步/异步分类，也可以按照执行机制分类。
介绍了一些Hook的基本使用：
1. SyncHook
2. SyncBailHook
3. SyncWaterfallHook
4. SyncLoopHook
5. AsyncParellelHook
6. AsyncParallelBailHook
7. AsyncSeriesHook
8. AsyncSeriesBailHook
9. AsyncSeriesWaterfallHook
并介绍了具体实现。
展开
评论
点赞
#青训营笔记创作活动#
2月8日 打卡day27
在 JavaScript 中，什么时候使用 Map 或胜过 Object
在 Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。更重要的是，使用对象做 Hash Map 会造成混乱和安全隐患。
Object会造成不必要的继承、名称冲突、次优的人机工程学。
Map 支持任何数据类型的键。Map 在用户定义的和内置的程序数据之间提供了一个干净的分离，代价是需要一个额外的 Map.prototype.get 来获取对应的项。
Map 也提供了更好的人机工程学。与 Object 相比，Map 为各种常见任务提供了专门的API。在大多数情况下，Map 要比 Object 快。
2月8日 打卡day27
在 JavaScript 中，什么时候使用 Map 或胜过 Object
在 Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。更重要的是，使用对象做 Hash Map 会造成混乱和安全隐患。
Object会造成不必要的继承、名称冲突、次优的人机工程学。
Map 支持任何数据类型的键。Map 在用户定义的和内置的程序数据之间提供了一个干净的分离，代价是需要一个额外的 Map.prototype.get 来获取对应的项。
Map 也提供了更好的人机工程学。与 Object 相比，Map 为各种常见任务提供了专门的API。在大多数情况下，Map 要比 Object 快。
展开
评论
点赞
#青训营笔记创作活动#
2月7日 打卡day26
# Islands 架构原理和实践
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。例如，传统的模板技术如JSP、Python、Django、PHP、Laravel 等都是基于 MPA 的框架，包括目前比较火的 Astro 也是采用的 MPA 方案。
SPA(Single-page application) 即单页应用，它只有一个不包含具体页面内容的 HTML，当浏览器拿到这份 HTML 之后，会请求页面所需的 JavaScript 代码，通过执行 JavaScript 代码完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互。如现在使用的大多数 Vue、React 中后台应用都是 SPA 应用
介绍了Island的实现原理以及实践分享。
2月7日 打卡day26
# Islands 架构原理和实践
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。例如，传统的模板技术如JSP、Python、Django、PHP、Laravel 等都是基于 MPA 的框架，包括目前比较火的 Astro 也是采用的 MPA 方案。
SPA(Single-page application) 即单页应用，它只有一个不包含具体页面内容的 HTML，当浏览器拿到这份 HTML 之后，会请求页面所需的 JavaScript 代码，通过执行 JavaScript 代码完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互。如现在使用的大多数 Vue、React 中后台应用都是 SPA 应用
介绍了Island的实现原理以及实践分享。
展开
评论
点赞
#青训营笔记创作活动#
2月6日 打卡day25
写给前端的 docker 使用指南
本文章介绍了Docker技术，并介绍Docker的安装、从Docker启动vue项目、底层原理简介、进阶技巧总结，为前端人员使用docker技术提供了使用指南。
2月6日 打卡day25
写给前端的 docker 使用指南
本文章介绍了Docker技术，并介绍Docker的安装、从Docker启动vue项目、底层原理简介、进阶技巧总结，为前端人员使用docker技术提供了使用指南。
展开
评论
点赞
#青训营笔记创作活动#
2月5日 打卡day24
今日学习
实现方案
第一点：获得 rem 的基准值
第二点：动态的计算html根元素的font-size
第三点：屏幕变化，图表自适应
屏幕变化后，图表自动调整字体、间距、位移等
2月5日 打卡day24
今日学习
实现方案
第一点：获得 rem 的基准值
第二点：动态的计算html根元素的font-size
第三点：屏幕变化，图表自适应
屏幕变化后，图表自动调整字体、间距、位移等
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡day23
# 推荐20个开源的前端低代码项目
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。几个值得学习和使用的低代码开源项目：
1. Appsmith
2. LowCodeEngine
3. Amis
4. tmagic-editor
5. dooring-electron-lowcode
6. vite-vue3-lowcode
7. shida
8. quark-h5
9. gods-pen
10. luban-h5
11. mometa
12. h5-factory
13. steedos-platform
14. lz-h5-edit
15. tefact
16. fast-poster
17. openDatav
18. mall-cook
19. form-generator
20. vjdesign
2月4日 打卡day23
# 推荐20个开源的前端低代码项目
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。几个值得学习和使用的低代码开源项目：
1. Appsmith
2. LowCodeEngine
3. Amis
4. tmagic-editor
5. dooring-electron-lowcode
6. vite-vue3-lowcode
7. shida
8. quark-h5
9. gods-pen
10. luban-h5
11. mometa
12. h5-factory
13. steedos-platform
14. lz-h5-edit
15. tefact
16. fast-poster
17. openDatav
18. mall-cook
19. form-generator
20. vjdesign
展开
评论
点赞
#青训营笔记创作活动#
2月3日 打卡day22
我们平时见到的树状结构一般都是这样的，每层数组中的item都会有一个children，里面嵌套一个数组然后每个子item也还会有各自的children，就这样一直嵌套下去。
而拍扁后的树状结构其实是一个对象，每个item都扁平化平铺在第一层，每一个item都有各自的parentId与childrenIds。
介绍了父节点、子节点、渲染、添加、修改、删除的不同点。
2月3日 打卡day22
我们平时见到的树状结构一般都是这样的，每层数组中的item都会有一个children，里面嵌套一个数组然后每个子item也还会有各自的children，就这样一直嵌套下去。
而拍扁后的树状结构其实是一个对象，每个item都扁平化平铺在第一层，每一个item都有各自的parentId与childrenIds。
介绍了父节点、子节点、渲染、添加、修改、删除的不同点。
展开
评论
点赞
#青训营笔记创作活动#
2月2日 打卡day21
# 关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?
## 一、什么是 pnpm ?
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
- 包安装速度极快；
- 磁盘空间利用非常高效。
它的安装也非常简单。
## 二、特性概览
1. 速度快
2. 高效利用磁盘空间
3. 支持monorepo
4. 安全性高
## 三、依赖管理
1. npm/yarn install 原理
2. pnpm依赖管理
## 四、再谈安全
## 五、日常使用
- pnpm install
- pnpm update
- pnpm uninstall
- pnpm link
2月2日 打卡day21
# 关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?
## 一、什么是 pnpm ?
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
- 包安装速度极快；
- 磁盘空间利用非常高效。
它的安装也非常简单。
## 二、特性概览
1. 速度快
2. 高效利用磁盘空间
3. 支持monorepo
4. 安全性高
## 三、依赖管理
1. npm/yarn install 原理
2. pnpm依赖管理
## 四、再谈安全
## 五、日常使用
- pnpm install
- pnpm update
- pnpm uninstall
- pnpm link
展开
评论
点赞
#青训营笔记创作活动#
2月1日 打卡day20
# 纯前端实现「羊了个羊」小游戏
需要考虑的点有：
1. 地图模拟：单层、多层
2. 地图生成：
1. 基础生成：最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 `[i, j]`，那么`[i-1,j] != 1`、`[i,j-1] != 1`、`[i-1, j-1] ! = 1`、`[i1j+1] ! = 1`，否则就会出现**同层卡片重叠**。同时我们加入一个随机系数，保证每次生成的地图不同。
2. 优化地图：卡片的放置是有一定规律的：左右对称；从顶层到底层越来越往中心聚集，卡片越来越少；上一层不会完全覆盖下一层。
3. 卡片渲染：每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 `dom`。然后根据卡片的 x、y、z、宽高 值设置实际位置。
3. 覆盖关系
4. 填充数据：
1. 保证卡片是3的倍数
2. 填充卡片类型
5. 点击交互
1. 是否可以点击
2. 点击卡片
2月1日 打卡day20
# 纯前端实现「羊了个羊」小游戏
需要考虑的点有：
1. 地图模拟：单层、多层
2. 地图生成：
1. 基础生成：最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 `[i, j]`，那么`[i-1,j] != 1`、`[i,j-1] != 1`、`[i-1, j-1] ! = 1`、`[i1j+1] ! = 1`，否则就会出现**同层卡片重叠**。同时我们加入一个随机系数，保证每次生成的地图不同。
2. 优化地图：卡片的放置是有一定规律的：左右对称；从顶层到底层越来越往中心聚集，卡片越来越少；上一层不会完全覆盖下一层。
3. 卡片渲染：每次位置和随机数判定合格，我们应该实际放置一张卡片，一个实际的 `dom`。然后根据卡片的 x、y、z、宽高 值设置实际位置。
3. 覆盖关系
4. 填充数据：
1. 保证卡片是3的倍数
2. 填充卡片类型
5. 点击交互
1. 是否可以点击
2. 点击卡片
展开
评论
点赞
#青训营笔记创作活动#
1月31日 打卡day19
前端应该掌握的浏览器调试技巧
不简单的console:
console.log,console.warn,console.error,consols.time,console.timeend,console.assert,console.dir,console.table,console.$i
Breakpoint:直接断点、代码断点
1月31日 打卡day19
前端应该掌握的浏览器调试技巧
不简单的console:
console.log,console.warn,console.error,consols.time,console.timeend,console.assert,console.dir,console.table,console.$i
Breakpoint:直接断点、代码断点
展开
评论
点赞
#青训营笔记创作活动#
1月30日 打卡day18
# 别整一坨 CSS 代码了，试试这几个实用函数
`clamp()` 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。该函数可以为以例子提供解决思路：
- 流体的尺寸和定位
- 装饰性元素
- 流体高度
- Loading Bar
- 动态分割器
- 动态border radius
- 间距
1月30日 打卡day18
# 别整一坨 CSS 代码了，试试这几个实用函数
`clamp()` 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。该函数可以为以例子提供解决思路：
- 流体的尺寸和定位
- 装饰性元素
- 流体高度
- Loading Bar
- 动态分割器
- 动态border radius
- 间距
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡day17
还在用定时器吗？借住CSS来监听事件
1.hover延时触发：先给需要触发的元素加一个有延时的transition，然后添加监听transitionend方法。
2.长按触发事件：先使用:active实现，然后添加监听transitionend。
3.轮播和暂停：使用setInterval可以重复触发，当 CSS 动画设置次数为infinite就可以无限循环了，和这个定时器效果非常类似，而且可以直接通过:hover暂停和播放动画。监听每次动画的触发可以用animationiteration这个方法，表示每个动画轮回就触发一次。
总结：
比定时器而言，CSS 在控制定时器的开启和暂停上更有优势
1.:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
2.:active配合transition延时、transitionend监听可以实现长按触发效果
3.CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
4.可以直接通过:hover来控制台动画的暂停和播放
1月29日 打卡day17
还在用定时器吗？借住CSS来监听事件
1.hover延时触发：先给需要触发的元素加一个有延时的transition，然后添加监听transitionend方法。
2.长按触发事件：先使用:active实现，然后添加监听transitionend。
3.轮播和暂停：使用setInterval可以重复触发，当 CSS 动画设置次数为infinite就可以无限循环了，和这个定时器效果非常类似，而且可以直接通过:hover暂停和播放动画。监听每次动画的触发可以用animationiteration这个方法，表示每个动画轮回就触发一次。
总结：
比定时器而言，CSS 在控制定时器的开启和暂停上更有优势
1.:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
2.:active配合transition延时、transitionend监听可以实现长按触发效果
3.CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
4.可以直接通过:hover来控制台动画的暂停和播放
展开
评论
点赞
#青训营笔记创作活动#
1月28日 打卡day16
# 前端实现活体人脸检测
1. 创建人脸模型：引入tensorflow训练好的`人脸特征点检测模型`，预测 `486` 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
2. 人脸识别
3. 特征检测：人脸特征提取就是针对人脸的某些特征进行判断
1. 人脸的远近：取4帧 `人脸占画面的比例`，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
2. 张嘴：取2帧 `[10,152]`占`[0,17]`的比例,判断递增，取第一帧和最后最后一帧的距离，根据阈值判断张嘴。
3. 眨眼：根据左眼`[159, 144]` 右眼`[385, 374]`的距离，判断连续4帧小于阈值，即可判断眨眼了。
4. 左右摇头：根据左脸`[195, 93]` 右脸`[195, 323]`的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。
1月28日 打卡day16
# 前端实现活体人脸检测
1. 创建人脸模型：引入tensorflow训练好的`人脸特征点检测模型`，预测 `486` 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
2. 人脸识别
3. 特征检测：人脸特征提取就是针对人脸的某些特征进行判断
1. 人脸的远近：取4帧 `人脸占画面的比例`，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
2. 张嘴：取2帧 `[10,152]`占`[0,17]`的比例,判断递增，取第一帧和最后最后一帧的距离，根据阈值判断张嘴。
3. 眨眼：根据左眼`[159, 144]` 右眼`[385, 374]`的距离，判断连续4帧小于阈值，即可判断眨眼了。
4. 左右摇头：根据左脸`[195, 93]` 右脸`[195, 323]`的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。
展开
评论
点赞
#青训营笔记创作活动#
1月27日 打卡day15
# 为什么说 90% 的前端不会调试 Ant Design 源码？
antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
想调试最初的 tsx 源码需要用 sourcemap。
antd 有三种入口：es 目录对应 esm 入口，lib 目录对应 commonjs 入口，dist 目录对应 UMD 入口。
把 antd 代码下载下来，执行 npm run dist 就可以生成 UMD 形式的代码。
想要 sourcemap 映射到 tsx 源码，需要把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的 sourcemap。
把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。
1月27日 打卡day15
# 为什么说 90% 的前端不会调试 Ant Design 源码？
antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
想调试最初的 tsx 源码需要用 sourcemap。
antd 有三种入口：es 目录对应 esm 入口，lib 目录对应 commonjs 入口，dist 目录对应 UMD 入口。
把 antd 代码下载下来，执行 npm run dist 就可以生成 UMD 形式的代码。
想要 sourcemap 映射到 tsx 源码，需要把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的 sourcemap。
把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。
展开
评论
点赞
#青训营笔记创作活动#
1月26日 打卡day14
使用fabric.js 快速开发一个图片编辑器
选型： fabric.js 和 konva.js都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些，因为比较熟悉fabric就没有采用konva。
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
1月26日 打卡day14
使用fabric.js 快速开发一个图片编辑器
选型： fabric.js 和 konva.js都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些，因为比较熟悉fabric就没有采用konva。
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
展开
评论
点赞