用户3493817625623
获得徽章 1
- #青训营笔记创作活动#
2月23日 打卡day44
前端工程：把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上，从而实现前端的4 个现代化:模块化、组件化、规范化、自动化
前端工程化的内容：各种工具和技术
前端工程化的作用：通过使用工具，提升开发效率展开评论点赞 - #青训营笔记创作活动#
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月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月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月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月14日 打卡day35
使用pixi.js 以及他的 filters 滤镜来完成一个水波交互动画
1.初始化创建 pixi.js 应用
2.水体扭曲：水体背景绘制到界面，在利用过滤器类DisplacementFilter做贴图置换，做纹理偏移
3.水波动画：引入插件库 pixi-filters.js；它可以处理很多的过滤器效果，例如水波：实例化一个ShockwaveFilter类来完成波纹效果。展开评论点赞
github.com