花哨呀i
在下花哨
获得徽章 10
- #青训营笔记创作活动#
2月16日 打卡day21
高效利用磁盘空间
pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件，这个文件系统出色的地方在于:
不会重复安装同一个包。用 npm/yarn 的时候，如果 100 个项目都依赖 lodash，那么 lodash 很可能就被安装了 100 次，磁盘中就有 100 个地方写入了这部分代码。但在使用 pnpm 只会安装一次，磁盘中只有一个地方写入，后面再次使用都会直接使用 hardlink(硬链接，不清楚的同学详见这篇文章)。
即使一个包的不同版本，pnpm 也会极大程度地复用之前版本的代码。举个例子，比如 lodash 有 100 个文件，更新版本之后多了一个文件，那么磁盘当中并不会重新写入 101 个文件，而是保留原来的 100 个文件的 hardlink，仅仅写入那一个新增的文件。
3. 支持 monorepo
随着前端工程的日益复杂，越来越多的项目开始使用 monorepo。之前对于多个项目的管理，我们一般都是使用多个 git 仓库，但 monorepo 的宗旨就是用一个 git 仓库来管理多个子项目，所有的子项目都存放在根目录的packages目录下，那么一个子项目就代表一个package。如果你之前没接触过 monorepo 的概念，建议仔细看看这篇文章以及开源的 monorepo 管理工具lerna，项目目录结构可以参考一下 babel 仓库。
pnpm 与 npm/yarn 另外一个很大的不同就是支持了 monorepo，体现在各个子命令的功能上，比如在根目录下 pnpm add A -r, 那么所有的 package 中都会被添加 A 这个依赖，当然也支持 --filter字段来对 package 进行过滤。
4. 安全性高展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day20
DOM断点
当你想对DOM节点发生变化时进行断点，请使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。设置 DOM 断点：
单击Elements选项卡
找到要设置断点的元素
右键单击该元素
将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
Subtree modifications（子树修改）：当当前选择的节点的子节点被移除或添加，或者子节点的内容被改变时触发。不会在子节点属性更改或对当前选定节点的任何更改时触发。
Attributes modifications（属性修改）：在当前选定的节点上添加或删除属性或属性值更改时触发。
Node Removal（节点移除） : 当当前选中的节点被移除时触发。展开评论点赞 - #青训营笔记创作活动#
2月14 打卡day19
DOM断点
当你想对DOM节点发生变化时进行断点，请使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。设置 DOM 断点：
单击Elements选项卡
找到要设置断点的元素
右键单击该元素
将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
Subtree modifications（子树修改）：当当前选择的节点的子节点被移除或添加，或者子节点的内容被改变时触发。不会在子节点属性更改或对当前选定节点的任何更改时触发。
Attributes modifications（属性修改）：在当前选定的节点上添加或删除属性或属性值更改时触发。
Node Removal（节点移除） : 当当前选中的节点被移除时触发。展开评论点赞 - #青训营笔记创作活动#
2月11日 打卡day18
.decorative--1 {
left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
.decorative--2 {
right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
复制代码事例地址：codepen.io/shadeed/pen…
流体高度
有时候，我们页面的主区的高度需要根据视口大小而变化。这种场景，我们倾向于通过媒体查询或使用视口单位来改变这种情况。展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡day17
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放展开赞过 评论1 - #青训营笔记创作活动#
2月8号 打卡day16
isFarAndNear(face) {
const proportion = this.GetPercent(face.box.width * face.box.height, this.width * this.height);
this.isFarArr.push(proportion);
//计算4帧的动态变化
if (this.isFarArr.length > 4) {
this.isFarArr.shift();
//递增 或 递减
if (this.Increment(this.isFarArr) || this.Decrease(this.isFarArr)) {
const first = this.isFarArr[0];
const last = this.isFarArr[this.isFarArr.length - 1];
const diff = this.GetPercent(first - last, first + last);
if (diff <= -5) {
this.log(`【动作】靠近`, `info`);
};
if (diff >= 5) {
this.log(`【动作】远离`, `primary`);
};
}
};
},展开评论点赞 - #青训营笔记创作活动#
2月6日 打卡day15
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 源码了。
展开评论点赞 - #青训营笔记创作活动#
2月3日 打卡day14
架构设计
选型： fabric.js 和 konva.js都是强大的canvas库，功能上类似，konva.js比较新中文文档也多一些，因为比较熟悉fabric就没有采用konva。
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
展开评论点赞 - #青训营笔记创作活动#
2月2日 打卡day13
CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。
比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想有什么方式可以禁用事件，没错，就是pointer-events;展开评论点赞 - #青训营笔记创作活动#
1月30日 打卡day12
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸展开评论点赞