获得徽章 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,避免沙箱逃逸展开评论点赞