Xh1Xxhg
获得徽章 1
关注了标签 
GitHub
GitHub
#青训营笔记创作活动#
2月6日 打卡day28
今天阅读了第二十八篇文章，学习了Tapable源码。
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
使用挺简单的，只需三步：
1.实例化钩子函数（ tapable会暴露出各种各样的 Hook，这里先以同步钩子Synchook为例）
2.注册事件
3.触发事件
2月6日 打卡day28
今天阅读了第二十八篇文章，学习了Tapable源码。
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
使用挺简单的，只需三步：
1.实例化钩子函数（ tapable会暴露出各种各样的 Hook，这里先以同步钩子Synchook为例）
2.注册事件
3.触发事件
展开
评论
点赞
#青训营笔记创作活动#
2月5日 打卡day27
今天阅读了第二十七篇文章，学习了Javascript中map与object的对比使用。
Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。
Map 支持任何数据类型的键。
但更重要的是，Map 在用户定义的和内置的程序数据之间提供了一个干净的分离，代价是需要一个额外的 Map.prototype.get 来获取对应的项。
2月5日 打卡day27
今天阅读了第二十七篇文章，学习了Javascript中map与object的对比使用。
Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。
Map 支持任何数据类型的键。
但更重要的是，Map 在用户定义的和内置的程序数据之间提供了一个干净的分离，代价是需要一个额外的 Map.prototype.get 来获取对应的项。
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡day26
今天阅读了第二十六篇文章，学习了islands架构原理与实践。
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。
SPA(Single-page application) 即单页应用，它只有一个不包含具体页面内容的 HTML，当浏览器拿到这份 HTML 之后，会请求页面所需的 JavaScript 代码，通过执行 JavaScript 代码完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互。如现在使用的大多数 Vue、React 中后台应用都是 SPA 应用。
2月4日 打卡day26
今天阅读了第二十六篇文章，学习了islands架构原理与实践。
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。
SPA(Single-page application) 即单页应用，它只有一个不包含具体页面内容的 HTML，当浏览器拿到这份 HTML 之后，会请求页面所需的 JavaScript 代码，通过执行 JavaScript 代码完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互。如现在使用的大多数 Vue、React 中后台应用都是 SPA 应用。
展开
评论
点赞
#青训营笔记创作活动#
2月3日 打卡day25
今天阅读了第二十五篇文章，学习了docker使用。Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
组成部分:
docker client: 即 docker 命令行工具
docker host: 宿主机，docker daemon 的运行环境服务器
docker daemon: docker 的守护进程，docker client 通过命令行与 docker daemon 交互
image: 镜像，可以理解为一个容器的模板，通过一个镜像可以创建多个容器
container: 最小型的一个操作系统环境，可以对各种服务以及应用容器化，是镜像的运行实例
registry: 镜像仓库，存储大量镜像，可以从镜像仓库拉取和推送镜像
2月3日 打卡day25
今天阅读了第二十五篇文章，学习了docker使用。Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
组成部分:
docker client: 即 docker 命令行工具
docker host: 宿主机，docker daemon 的运行环境服务器
docker daemon: docker 的守护进程，docker client 通过命令行与 docker daemon 交互
image: 镜像，可以理解为一个容器的模板，通过一个镜像可以创建多个容器
container: 最小型的一个操作系统环境，可以对各种服务以及应用容器化，是镜像的运行实例
registry: 镜像仓库，存储大量镜像，可以从镜像仓库拉取和推送镜像
展开
评论
点赞
#青训营笔记创作活动#
2月2日 打卡day24
今天阅读了第二十四篇文章，学习了数据大屏适配方案。如果想简单，客户能同意留白，选用 scale 即可。如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案。至于 rem，个人觉得就是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
2月2日 打卡day24
今天阅读了第二十四篇文章，学习了数据大屏适配方案。如果想简单，客户能同意留白，选用 scale 即可。如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案。至于 rem，个人觉得就是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
展开
评论
点赞
#青训营笔记创作活动#
2月1日 打卡day23
今天阅读了第二十三篇文章，了解了20个开源的前端低代码项目。低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。
2月1日 打卡day23
今天阅读了第二十三篇文章，了解了20个开源的前端低代码项目。低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。
展开
评论
点赞
#青训营笔记创作活动#
1月31日 打卡day22
今天阅读了第二十二篇文章，学习了构造高性能的树状结构。将整个结构扁平化后收益特别多。结构很清晰，我们可以很轻易的对数据进行处理。特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。以前各种在数组对象出现的弊端都消失了。
1月31日 打卡day22
今天阅读了第二十二篇文章，学习了构造高性能的树状结构。将整个结构扁平化后收益特别多。结构很清晰，我们可以很轻易的对数据进行处理。特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。以前各种在数组对象出现的弊端都消失了。
展开
评论
点赞
#青训营笔记创作活动#
1月30日 打卡day21
今天阅读了第二十一篇文章，学习了现代包管理器pnpm。pnpm包安装速度极快，磁盘空间利用非常高效。
安装简单:npm i -g pnpm
虽然 pnpm 内部做了非常多复杂的设计，但实际上对于用户来说是无感知的，使用起来非常友好。并且，现在作者现在还一直在维护，目前 npm 上周下载量已经有 10w +，经历了大规模用户的考验，稳定性也能有所保障。
1月30日 打卡day21
今天阅读了第二十一篇文章，学习了现代包管理器pnpm。pnpm包安装速度极快，磁盘空间利用非常高效。
安装简单:npm i -g pnpm
虽然 pnpm 内部做了非常多复杂的设计，但实际上对于用户来说是无感知的，使用起来非常友好。并且，现在作者现在还一直在维护，目前 npm 上周下载量已经有 10w +，经历了大规模用户的考验，稳定性也能有所保障。
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡day20
今天阅读了第二十篇文章，学习了纯前端实现「羊了个羊」小游戏。
通过数组下标计算实现卡片位置放置
游戏的核心逻辑是 pending 区域存在 3 个同样图案的卡片时会消除
1. 保证卡片是 3 的倍数
新建 CardItem 类的实例，每个卡片实例会记录自己的位置、样式、是否被覆盖等状况。并且我们可以用一个 cardList 数组保存下这些实例并且在地图生成完之后，根据数组数量除 3 的余数，从前开始删除对应数量的卡片
2. 填充卡片类型
我们需要随机的把指定种类的卡片类型，以 3 的倍数填充到现有卡片中去
点击交互
1. 是否可以点击
只有顶层可以被点击，给被覆盖的卡片设置一个特殊 style
.covered-item { pointer-event: none; }
这样对应卡片上的任何事件都不会生效
2. 点击卡片
点击到最上层的卡片之后，我们按如下步骤处理：
把点击到的卡片实例 push 到暂存数组 pendingList 中
把卡片实例从 cardMap、cardList 中去除
pendingList 遍历
如果 pendingList 中存在 3 张相同的卡片，则消除这 3 张卡片
如果不存在，且pendingList 中卡片数为 7，游戏结束 。本局失败
如果 cardList 中的卡片数量为 0，游戏结束。本局成功
1月29日 打卡day20
今天阅读了第二十篇文章，学习了纯前端实现「羊了个羊」小游戏。
通过数组下标计算实现卡片位置放置
游戏的核心逻辑是 pending 区域存在 3 个同样图案的卡片时会消除
1. 保证卡片是 3 的倍数
新建 CardItem 类的实例，每个卡片实例会记录自己的位置、样式、是否被覆盖等状况。并且我们可以用一个 cardList 数组保存下这些实例并且在地图生成完之后，根据数组数量除 3 的余数，从前开始删除对应数量的卡片
2. 填充卡片类型
我们需要随机的把指定种类的卡片类型，以 3 的倍数填充到现有卡片中去
点击交互
1. 是否可以点击
只有顶层可以被点击，给被覆盖的卡片设置一个特殊 style
.covered-item { pointer-event: none; }
这样对应卡片上的任何事件都不会生效
2. 点击卡片
点击到最上层的卡片之后，我们按如下步骤处理：
把点击到的卡片实例 push 到暂存数组 pendingList 中
把卡片实例从 cardMap、cardList 中去除
pendingList 遍历
如果 pendingList 中存在 3 张相同的卡片，则消除这 3 张卡片
如果不存在，且pendingList 中卡片数为 7，游戏结束 。本局失败
如果 cardList 中的卡片数量为 0，游戏结束。本局成功
展开
评论
点赞
#青训营笔记创作活动#
1月28 打卡day19
今天阅读了第十九篇文章，学习了浏览器调试技巧。
console.log console.warn console.error console.time和console.timeEnd console.assert console.dir console.table console.$i breakpoint有直接断点和代码断点 以及DOM断点等。
1月28 打卡day19
今天阅读了第十九篇文章，学习了浏览器调试技巧。
console.log console.warn console.error console.time和console.timeEnd console.assert console.dir console.table console.$i breakpoint有直接断点和代码断点 以及DOM断点等。
展开
评论
点赞
#青训营笔记创作活动#
1月27日 打卡day18
今天阅读了第十八篇文章，学习了css实用函数。
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
1月27日 打卡day18
今天阅读了第十八篇文章，学习了css实用函数。
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day17
今天阅读了第十七篇文章，学习了借助css来监听事件。
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
1月25日 打卡day17
今天阅读了第十七篇文章，学习了借助css来监听事件。
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
展开
评论
点赞
#青训营笔记创作活动#
1月24日 打卡day16
今天阅读了第十六篇文章，学习了前端实现活体人脸检测。引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。人脸特征提取就是针对人脸的某些特征进行判断（以下的动作判断仅供参考，实际情况下需要多个特征点来判断某个动作）取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。根据左眼[159, 144] 右眼[385, 374]的距离，判断连续4帧小于阈值，即可判断眨眼了。根据左脸[195, 93] 右脸[195, 323]的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。
1月24日 打卡day16
今天阅读了第十六篇文章，学习了前端实现活体人脸检测。引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。人脸特征提取就是针对人脸的某些特征进行判断（以下的动作判断仅供参考，实际情况下需要多个特征点来判断某个动作）取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。根据左眼[159, 144] 右眼[385, 374]的距离，判断连续4帧小于阈值，即可判断眨眼了。根据左脸[195, 93] 右脸[195, 323]的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。
展开
评论
点赞