Demons741
前端实习生
获得徽章 5
#青训营笔记创作活动#
1月12日 打卡day28
今天学习了"为什么要读一读tapable源码”
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
1月12日 打卡day28
今天学习了"为什么要读一读tapable源码”
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
展开
评论
点赞
#青训营笔记创作活动#
Object1月6日 打卡day27
今天学习了在 JavaScript 中，什么时候使用 Map 或胜过 Object。
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱
Object1月6日 打卡day27
今天学习了在 JavaScript 中，什么时候使用 Map 或胜过 Object。
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱
展开
评论
点赞
#青训营笔记创作活动#
1月1日 打卡day26
今天学习了Islands架构原理和实践
MPA 和 SPA 是构建前端页面常见的两种方式，理解 MPA 和 SPA 的区别和不同场景的取舍是理解 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 应用。
1月1日 打卡day26
今天学习了Islands架构原理和实践
MPA 和 SPA 是构建前端页面常见的两种方式，理解 MPA 和 SPA 的区别和不同场景的取舍是理解 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 应用。
展开
评论
点赞
#青训营笔记创作活动#
12月31日 打卡day25
今天学习了docker的使用指南，docker 使应用部署更加轻量，可移植，可扩展，更好的环境隔离也更大程度地避免了生产环境与测试环境不一致的巨大尴尬。Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
12月31日 打卡day25
今天学习了docker的使用指南，docker 使应用部署更加轻量，可移植，可扩展，更好的环境隔离也更大程度地避免了生产环境与测试环境不一致的巨大尴尬。Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
展开
评论
点赞
#青训营笔记创作活动#
12月30日 打卡day24
今天学习了数据大屏的适配方案
比较主流的方案为vm vh1
实现方式：按照设计稿的尺寸，将px按比例计算转为vw和vh
优点：
1.可以动态计算图表的宽高，字体等，灵活性较高
2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
缺点：
1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
12月30日 打卡day24
今天学习了数据大屏的适配方案
比较主流的方案为vm vh1
实现方式：按照设计稿的尺寸，将px按比例计算转为vw和vh
优点：
1.可以动态计算图表的宽高，字体等，灵活性较高
2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
缺点：
1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
展开
评论
点赞
#青训营笔记创作活动#
12月29日 打卡day23
今天学习了20个开源的前端低代码项目
其中，印象比较深刻的是vite-vue3-lowcode。
vite-vue3-lowcode 是一款基于Vite2.x + Vue3.x + TypeScript技术框架的的H5 低代码平台。目前只是一个简单的模板，支持数据配置的导入和导出，配置的修改和删除操作，用到的技术有sandbox 中执行自定义逻辑、monaco-editor 自定义代码补全、vue3 createRenderer 自定义渲染器等。
12月29日 打卡day23
今天学习了20个开源的前端低代码项目
其中，印象比较深刻的是vite-vue3-lowcode。
vite-vue3-lowcode 是一款基于Vite2.x + Vue3.x + TypeScript技术框架的的H5 低代码平台。目前只是一个简单的模板，支持数据配置的导入和导出，配置的修改和删除操作，用到的技术有sandbox 中执行自定义逻辑、monaco-editor 自定义代码补全、vue3 createRenderer 自定义渲染器等。
展开
评论
点赞
#青训营笔记创作活动#
12月28日 打卡day22
今天学习了如何建造高性能的树妆结构。
整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。
12月28日 打卡day22
今天学习了如何建造高性能的树妆结构。
整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。
展开
评论
点赞
#青训营笔记创作活动#
12月27日 打卡day21
今天学习了一个包管理器-pnpm
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。
12月27日 打卡day21
今天学习了一个包管理器-pnpm
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。
展开
评论
点赞
#青训营笔记创作活动#
12月26日 打卡day20
今天学习了用前端实现羊了个羊小游戏
点击交互
1. 是否可以点击
只有顶层可以被点击，我们之前已经判定过卡片是否被覆盖的逻辑，做对应处理即可。一个简单的方法是给被覆盖的卡片设置一个特殊 style
.covered-item {
pointer-event: none;
}
复制代码这样对应卡片上的任何事件都不会生效
12月26日 打卡day20
今天学习了用前端实现羊了个羊小游戏
点击交互
1. 是否可以点击
只有顶层可以被点击，我们之前已经判定过卡片是否被覆盖的逻辑，做对应处理即可。一个简单的方法是给被覆盖的卡片设置一个特殊 style
.covered-item {
pointer-event: none;
}
复制代码这样对应卡片上的任何事件都不会生效
展开
评论
点赞
#青训营笔记创作活动#
12月25日 打卡 day19
今天学习了几个浏览器的调试技巧
console 是我们开发中经常使用的功能，用来输出打印和调试开发，比较熟悉的有log、error、warn等。
console虽然简单，但是对于bug调试，源码查看，或者大家都不想遇到的历史老项目排错，同事项目排错等较为复杂的场景，起到的作用就没那么大了，还是需要断点调试更为直观高效。打断点的方式有两种：
1.直接断点
打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点。
2.代码断点
在需要断点的地方，书写debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。
12月25日 打卡 day19
今天学习了几个浏览器的调试技巧
console 是我们开发中经常使用的功能，用来输出打印和调试开发，比较熟悉的有log、error、warn等。
console虽然简单，但是对于bug调试，源码查看，或者大家都不想遇到的历史老项目排错，同事项目排错等较为复杂的场景，起到的作用就没那么大了，还是需要断点调试更为直观高效。打断点的方式有两种：
1.直接断点
打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点。
2.代码断点
在需要断点的地方，书写debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。
展开
评论
点赞
#青训营笔记创作活动#
12月24日 打卡day 18
今天学习了几个实用的CSS函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
12月24日 打卡day 18
今天学习了几个实用的CSS函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
展开
评论
点赞
#青训营笔记创作活动#
12月23日 打卡day17
今天学习了用CSS来监听事件
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
12月23日 打卡day17
今天学习了用CSS来监听事件
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
展开
评论
点赞
#青训营笔记创作活动#
12月22日 打卡 day16
今天学习了大佬用前端实现的活体人体检测，
在网页中使用活体人脸检测大部分都是前端录制一段视频，让后端调用第三方接口去判断。
大佬用纯前端方式实现了这个功能，NB
12月22日 打卡 day16
今天学习了大佬用前端实现的活体人体检测，
在网页中使用活体人脸检测大部分都是前端录制一段视频，让后端调用第三方接口去判断。
大佬用纯前端方式实现了这个功能，NB
评论
点赞
#青训营笔记创作活动#
12月21日 打卡day15
今天学习了怎么调试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 源码了。
12月21日 打卡day15
今天学习了怎么调试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 源码了。
展开
评论
点赞
#青训营笔记创作活动#
12月20日 打卡day14
今天学习了用fabric.js快速开发一个图片编辑器
fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能
12月20日 打卡day14
今天学习了用fabric.js快速开发一个图片编辑器
fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能
展开
评论
点赞
#青训营笔记创作活动#
12月19日 打卡day13
今天学习了用css防止按钮重复点击
CSS 实现思路分析
CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。
比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想有什么方式可以禁用事件，没错，就是pointer-events;
然后是时间的限制，每次点击后需要自动禁用300ms，时间过后重新恢复，那么，有什么特性和时间以及状态恢复有关呢？没错，就是animation;
除此之外，还需要有触发时机，这里是点击行为，所以必然和伪类:active有关联。
因此，综合分析，实现这样一个功能需要用到pointer-events、animation以及:active
12月19日 打卡day13
今天学习了用css防止按钮重复点击
CSS 实现思路分析
CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。
比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想有什么方式可以禁用事件，没错，就是pointer-events;
然后是时间的限制，每次点击后需要自动禁用300ms，时间过后重新恢复，那么，有什么特性和时间以及状态恢复有关呢？没错，就是animation;
除此之外，还需要有触发时机，这里是点击行为，所以必然和伪类:active有关联。
因此，综合分析，实现这样一个功能需要用到pointer-events、animation以及:active
展开
评论
点赞
#青训营笔记创作活动#
12月18日 打卡day12
设计一个不能操作DOM和调接口的环境
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
12月18日 打卡day12
设计一个不能操作DOM和调接口的环境
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
展开
评论
1
#青训营笔记创作活动#
12月17日 打卡day11
今天学习了Vite项目屏幕适配的两种方案
一种是基于rem的适配方案
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
另一种是基于scale的适配方案
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。
12月17日 打卡day11
今天学习了Vite项目屏幕适配的两种方案
一种是基于rem的适配方案
rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
另一种是基于scale的适配方案
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。
展开
评论
点赞
#青训营笔记创作活动#
12月16日 打卡day10
今天学习了几个非常有用的css属性
background-clip: text 可以做一个带背景的文字效果gap属性适用于Grid，Flex布局等，可以让元素隔开相同的值。
12月16日 打卡day10
今天学习了几个非常有用的css属性
background-clip: text 可以做一个带背景的文字效果gap属性适用于Grid，Flex布局等，可以让元素隔开相同的值。
展开
评论
点赞
#青训营笔记创作活动#
12月15日 打卡day9
今天学习了TingPng.TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。
12月15日 打卡day9
今天学习了TingPng.TinyPNG使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。
展开
评论
点赞