coker
获得徽章 0
- #青训营笔记创作活动# 2月7日 打卡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。展开评论点赞 - #青训营笔记创作活动# 2月4日 打卡Day14
使用fabric.js 快速开发一个图片编辑器：
了解了主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
方法：在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。展开评论点赞 - #青训营笔记创作活动# 2月3日 打卡Day13
了解了如何利用css做节流，利用pointer-events禁用点击事件。
第一步：做从禁用到可点击
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
第二步：动画绑定到按钮上
button{
animation: throttle 2s step-end forwards;
}展开评论点赞 - #青训营笔记创作活动# 2月2日 打卡Day12
1、可以阻止开发者操作DOM和调接口
2、with 关键字：作用在于改变作用域，可以将某个对象添加到作用域链的顶部
3、iframe 标签可以创造一个独立的浏览器原生级别的运行环境，这个环境由浏览器实现了与主环境的隔离，利用 iframe 来实现一个沙箱是目前最方便、简单、安全的方法，可以把 iframe.contentWindow 作为沙箱执行的全局 window 对象展开评论点赞 - #青训营笔记创作活动# 2月1日 打卡Day11
对Vite项目屏幕适配的两种方案进行了了解，对用rem和scale进行屏幕适配有了进一步掌握评论点赞 - #青训营笔记创作活动# 1月31日 打卡Day10
学习了一些css属性，包括：
position: sticky：标题在滚动的时候，会一直贴着最顶上
:empty 选择器：通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示
gap：display: 让每个元素之间隔开 20px，flex | grid；gap: 20px;
background-clip: text：用来做带背景的文字效果
user-select ：可以 禁用光标选中
:invalid 伪类：任意内容未通过验证的（不满足条件，就显示）
:focus-within ：表示一个元素获得焦点，或该元素的后代元素获得焦点，该css就会实现
mix-blend-mode:difference：描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。展开评论点赞 - #青训营笔记创作活动# 1月30日 打卡Day08
对Esbuild 有了基本了解，它是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍...评论点赞 - #青训营笔记创作活动# 1月20号 打卡Day07
了解了 WebRTC 的一些 API，学会了如何分享屏幕，录制屏幕，能通过 WebRTC 实现拍照，了解了如何实现视频虚拟背景。评论点赞