cspD_C
获得徽章 1
- #青训营笔记创作活动#
2月23日 打卡day43
Git 分为 4 个工作区：
工作区：指在本地仓库中的全部代码区域；
暂存区：指在本地仓库中通过 git add 后的代码区域；
本地仓库：指在本地仓库中的 git commit 后的代码区域；
远程仓库：远程仓库指的托管代码的服务器。展开评论点赞 - #青训营笔记创作活动#
2月22日 打卡day43
们通常是这样实现点击按钮，滚动条立即触顶/触底效果的：
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop
if (c > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, c - c / 8)
}
}展开评论点赞 - #青训营笔记创作活动#
2月21日 打卡day42
我们继续沿用上一篇文章几何学在前端边界计算中的应用和原理分析的工程, 由于几何画板相当于一个独立的小应用, 具备一定的复杂度, 这里我们来对 vite 工程配置一下对 less 的支持:
安装 less 和less-loader (推荐yarn, pnpm)
在vite.config.ts里做如下配置:展开评论点赞 - #青训营笔记创作活动#
2月20日 打卡day41
覆盖逻辑，Block的渲染从第一个开始，到最后一个结束。也就是按照数组的顺序，那么层级关系也就很明显了，优先渲染的Block会被下一次渲染的Block覆盖掉（重叠的话会被覆盖,如果两个Block离得很远，就不会被覆盖）我们就判断当前Block的后面的所有元素 是否有和我重叠（重叠逻辑比较复杂，后面有详细讲解）的,如果有就被遮挡，否则不遮挡。例如：[1,2,3,4,5] 我们判断3是否被遮挡，我们需要去和展开评论点赞 - #青训营笔记创作活动#
2月19日 打卡day40
先实例化一个 DisplacementFilter 类，把纹理错位图传入进去，然后把这个过滤器实例添加到 filters 数组里面，最后执行 ticker 在 step 方法里会连续不断的执行， 通过不停改变 x 轴坐标，来实现纹理偏移水体扭曲的效果展开评论点赞 - #青训营笔记创作活动#
2月18日 打卡day39
过将文字设置为透明，原本 div 的背景就显现出来了，而文字以外的区域全部被裁剪了，这就是 background-clip: text 的作用。
因此，对于上述效果，我们只需要实现一个从透明到渐变色到透明的渐变背景即可，随着鼠标的滚动移动背景的 background-position 即可！
有了上面的铺垫，我们很容易的实现上述的苹果官网的文字效果。（先不考虑滚动的话）展开评论点赞 - #青训营笔记创作活动#
2月17日 打卡day37
在 React 16.8 以前，像状态和生命周期函数这样的 React 特性只适用于类组件，函数组件由于无法访问状态和生命周期函数，只能用来作为 UI 组件。React Hooks 的出现使函数组件能够以新的方式编写、重用和共享 React 代码。
在我们的多个项目中也开始使用了 React Hooks。然而，在实际开发过程中，我发现 React Hooks 除了带来简洁的代码外，也存在对其使用不当的情况。展开评论点赞 - #青训营笔记创作活动#
2月16日 打卡day37
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day36
key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。展开评论点赞 - #青训营笔记创作活动#
2月14日 打卡day35
随着应用功能越来越多，繁多而详细的功能使用和说明文档，已经不能满足时代追求 快速 的需求，而 引导页（或分步引导） 本质就是 化繁为简，将核心功能以更简单、简短、明了的文字指引用户去使用对应的功能，特别是 ToB 的项目，各种新功能需求迭代非常快，免不了需要 引导页 的功能来快速帮助用户引导。展开评论点赞