用户3493817625623
获得徽章 1
#青训营笔记创作活动#
2月23日 打卡day44
前端工程：把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，从而实现前端的4 个现代化:模块化、组件化、规范化、自动化
前端工程化的内容：各种工具和技术
前端工程化的作用：通过使用工具，提升开发效率
2月23日 打卡day44
前端工程：把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，从而实现前端的4 个现代化:模块化、组件化、规范化、自动化
前端工程化的内容：各种工具和技术
前端工程化的作用：通过使用工具，提升开发效率
展开
评论
点赞
#青训营笔记创作活动#
2月22日 打卡day43
语雀实现的划词评论功能是基于 canvas 实现，可以与与页面结构完全解耦，
思路：生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
细节：
1.让 canvas 与文本容器元素重叠
2.获取划词区域文本节点的位置信息
3.获取头尾中间的文本节点
4.处理跨行文本节点的位置信息
5.划词信息持久化与返显
源码地址：
github.com
2月22日 打卡day43
语雀实现的划词评论功能是基于 canvas 实现，可以与与页面结构完全解耦，
思路：生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
细节：
1.让 canvas 与文本容器元素重叠
2.获取划词区域文本节点的位置信息
3.获取头尾中间的文本节点
4.处理跨行文本节点的位置信息
5.划词信息持久化与返显
源码地址：
github.com
展开
评论
点赞
#青训营笔记创作活动#
2月21日 打卡day42
利用TSDoc可以生成ts规范文档
官网：tsdoc.org
包括使用TSDoc解析器，API信息提取器
文档生成器：将API信息提取为JSON之后，根据这个JSON文件来生成具体的文档。
站点生成器：使用md文档打造API站点
2月21日 打卡day42
利用TSDoc可以生成ts规范文档
官网：
tsdoc.org包括使用TSDoc解析器，API信息提取器
文档生成器：将API信息提取为JSON之后，根据这个JSON文件来生成具体的文档。
站点生成器：使用md文档打造API站点
展开
评论
点赞
#青训营笔记创作活动#
2月20日 打卡day41
二次封装 一个el-table，功能包括：
1.表格内容自适应屏幕宽高
2.表格搜索、重置、分页查询 Hooks 封装
等
思路是把一个表格页面所有重复的功能 （表格多选、查询、重置、刷新、分页、数据操作二次确认、文件下载、文件上传） 都封装成 Hooks 函数钩子或组件，然后在 ProTable 组件中使用这些函数钩子或组件。在页面中使用的时，只需传给 ProTable 当前表格数据的请求 API、表格配置项 columns 就行了，数据传输都使用 作用域插槽 或 tsx 语法从 ProTable 传递给父组件就能在页面上获取到了。
2月20日 打卡day41
二次封装 一个el-table，功能包括：
1.表格内容自适应屏幕宽高
2.表格搜索、重置、分页查询 Hooks 封装
等
思路是把一个表格页面所有重复的功能 （表格多选、查询、重置、刷新、分页、数据操作二次确认、文件下载、文件上传） 都封装成 Hooks 函数钩子或组件，然后在 ProTable 组件中使用这些函数钩子或组件。在页面中使用的时，只需传给 ProTable 当前表格数据的请求 API、表格配置项 columns 就行了，数据传输都使用 作用域插槽 或 tsx 语法从 ProTable 传递给父组件就能在页面上获取到了。
展开
评论
点赞
#青训营笔记创作活动#
2月19日 打卡day40
一个带探照灯的 404 页面：
1.带漂浮点的背景
2.使用css画出探照灯的样子
3.通过一个边框线画出一束追光
4.居中404文字
2月19日 打卡day40
一个带探照灯的 404 页面：
1.带漂浮点的背景
2.使用css画出探照灯的样子
3.通过一个边框线画出一束追光
4.居中404文字
展开
评论
点赞
#青训营笔记创作活动#
2月18日 打卡day39
这篇文章介绍一些常用的CSS动画效果，可以考虑收藏以便需要时查阅；
1.淡入效果：从上 从下 从左 从右
2.淡出效果
3.弹跳效果
4.弹入效果
5.弹出效果
6.转入效果
7.转出效果
8.翻转效果
9.闪烁效果
10.震颤效果
2月18日 打卡day39
这篇文章介绍一些常用的CSS动画效果，可以考虑收藏以便需要时查阅；
1.淡入效果：从上 从下 从左 从右
2.淡出效果
3.弹跳效果
4.弹入效果
5.弹出效果
6.转入效果
7.转出效果
8.翻转效果
9.闪烁效果
10.震颤效果
展开
评论
点赞
#青训营笔记创作活动#
2月17日 打卡day38
1.Git 分为 4 个工作区：工作区；暂存区；本地仓库；远程仓库；
2.常用指令：
git init
git remote
git checkout
git branch
git tag
git add
git commit
git push
ait pull
git fetch
git cherry-pick
git merge
git rebase
git reset
git revert
git stash
git reflog
git rm
2月17日 打卡day38
1.Git 分为 4 个工作区：工作区；暂存区；本地仓库；远程仓库；
2.常用指令：
git init
git remote
git checkout
git branch
git tag
git add
git commit
git push
ait pull
git fetch
git cherry-pick
git merge
git rebase
git reset
git revert
git stash
git reflog
git rm
展开
评论
点赞
#青训营笔记创作活动#
2月16 打卡day37
1.颜色选择器
通过设置 input 标签属性，就自带这个颜色选择功能
2.打字效果
纯 CSS 能实现
3.滑顶/触底效果
CSS 一行代码<a id="top" href="#bottom">
4. 顺滑切图
当你滑动横向滚动条到一定位置时，会自动为你切图：scroll-snap-type: x mandatory
2月16 打卡day37
1.颜色选择器
通过设置 input 标签属性，就自带这个颜色选择功能
2.打字效果
纯 CSS 能实现
3.滑顶/触底效果
CSS 一行代码<a id="top" href="#bottom">
4. 顺滑切图
当你滑动横向滚动条到一定位置时，会自动为你切图：scroll-snap-type: x mandatory
展开
评论
点赞
#青训营笔记创作活动#
2月15日 打卡day36
1. 画板搭建：画布区和侧边控件区
2.创建并绘制几何图形
- 定义图形的schema结构
- 根据鼠标光标的位置计算图形创建的元信息：鼠标按下的初始点的坐标和鼠标拖动过程中的实时位置
图形id, 顶点坐标, 宽高样式等属性
3.移动, 编辑几何图形
2月15日 打卡day36
1. 画板搭建：画布区和侧边控件区
2.创建并绘制几何图形
- 定义图形的schema结构
- 根据鼠标光标的位置计算图形创建的元信息：鼠标按下的初始点的坐标和鼠标拖动过程中的实时位置
图形id, 顶点坐标, 宽高样式等属性
3.移动, 编辑几何图形
展开
评论
点赞
#青训营笔记创作活动#
2月14日 打卡day35
使用pixi.js 以及他的 filters 滤镜来完成一个水波交互动画
1.初始化创建 pixi.js 应用
2.水体扭曲：水体背景绘制到界面，在利用过滤器类DisplacementFilter做贴图置换，做纹理偏移
3.水波动画：引入插件库 pixi-filters.js；它可以处理很多的过滤器效果，例如水波：实例化一个ShockwaveFilter类来完成波纹效果。
2月14日 打卡day35
使用pixi.js 以及他的 filters 滤镜来完成一个水波交互动画
1.初始化创建 pixi.js 应用
2.水体扭曲：水体背景绘制到界面，在利用过滤器类DisplacementFilter做贴图置换，做纹理偏移
3.水波动画：引入插件库 pixi-filters.js；它可以处理很多的过滤器效果，例如水波：实例化一个ShockwaveFilter类来完成波纹效果。
展开
评论
点赞
#青训营笔记创作活动#
2月13日 打卡day34
1.借助background-clip实现：
background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
而 background-clip: text 可以实现背景被裁剪成文字的前景色。
并将将文字设为透明 color: transparent
2.使用 mix-blend-mode 实现
使用动画+混合模式mix-blend-mode: darken
2月13日 打卡day34
1.借助background-clip实现：
background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
而 background-clip: text 可以实现背景被裁剪成文字的前景色。
并将将文字设为透明 color: transparent
2.使用 mix-blend-mode 实现
使用动画+混合模式mix-blend-mode: darken
展开
评论
点赞
#青训营笔记创作活动#
2月12日 打卡day33
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。
*React 中任何 state 更新都会触发组件以及它的子组件重新渲染。
*useRef Hook，返回一个可变的 ref 对象（这个 ref 对象只有一个 current 属性），其在组件的整个生命周期内保持不变。useRef 变化不会主动使页面渲染。
*使用 ESLint 的 React Hooks 插件
*掌握useEffect中的异步用法
2月12日 打卡day33
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。
*React 中任何 state 更新都会触发组件以及它的子组件重新渲染。
*useRef Hook，返回一个可变的 ref 对象（这个 ref 对象只有一个 current 属性），其在组件的整个生命周期内保持不变。useRef 变化不会主动使页面渲染。
*使用 ESLint 的 React Hooks 插件
*掌握useEffect中的异步用法
展开
评论
点赞
2月11日 打卡day32
#青训营笔记创作活动#
1.原理：
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素。
2.亮点：
鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove：通过指针事件来进行多端统一的事件监听
3.要点：
打开蒙层；img缩放；移动查看；双指缩放（移动端）
#青训营笔记创作活动#
1.原理：
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素。
2.亮点：
鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove：通过指针事件来进行多端统一的事件监听
3.要点：
打开蒙层；img缩放；移动查看；双指缩放（移动端）
展开
评论
点赞
#青训营笔记创作活动#
2月10日 打卡day31
原因涉及到了vue的底层原理，包括虚拟DOM和diff算法；
即：key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。
2月10日 打卡day31
原因涉及到了vue的底层原理，包括虚拟DOM和diff算法；
即：key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。
展开
评论
点赞