申小兮的个人主页 - 动态

1年前

7月254日打卡day2
今日学习：现代前端工程为什么越来越离不开 Monorepo?
1、Monorepo与传统MultiRepo
Monorepo：把多个项目放在一个仓库里面
MultiRepo：每个项目对应一个单独的仓库来分散管理
2、Monorepo的目录
packages 存放多个子项目，并且每个子项目都有自己的

展开

青训营-快乐出发

1年前

7月24日打卡day1
今日学习：我用 ChatGPT 读 Vue3 源码
1、setup函数
（1）runtime-core文件夹是 Vue3 的运行时核心代码，有两个函数
①setupComponent 函数是在packages/runtime-core/src/renderer.ts文件中的mountComponent函数中【mountComponent 是挂载组件的方法】
②createComponentInstance函数看名字是创建组件实例
（2）
①创建了代理缓存accessCache
②创建公共实例代理对象（proxy）
③执行组件的 setup()
（3）setup函数的始末
①从组件挂载开始调用createComponentInstance创建组件实例
②传递组件实例给setupComponent
③setupComponent内部初始化 props 和 slots
④setupStatefulComponent 执行组件的setup
⑤完成 setup 流程
⑥返回渲染函数

展开

青训营-快乐出发

2年前

Vuex的安装、配置、使用，核心概念(state、getter、mutation、action),Module模块化...

1

2年前

#青训营笔记创作活动#
2月3日打卡day17
今日学习
1、hover延时触发
（１）JS定时器法：设置定时器，销毁定时器，考虑 dom 嵌套结构（容易误触发）
（２）CSS法：添加监听transitionend方法，设置一个无关紧要的样式【 opacity: 0.999;】，及延时transition: 0s 1s opacity;
２、长按触发事件
监听transitionend方法
el.addEventListener('transitionend', () => {
// 具体逻辑
})
３、轮播和暂停
CSS 动画设置次数为infinite就可以无限循环，通过:hover实现暂停和播放动画，然后再监听animationiteration方法实现每次动画的触发

展开

青训营-快乐出发

赞过

1

2年前

#第五届青训营阅读打卡#
1月31日打卡day16
今日学习
纯前端实现活体人脸检测编写思路
创建人脸模型（引入人脸特征点检测模型）->人脸识别->特征检测（人脸远近、是否张嘴，眨眼，左右摇头）

青训营-快乐出发

赞过

1

2年前

#青训营笔记创作活动#
1月30日打卡day15
今日学习
调试 antd 组件库的源码
创建配置，添加断点，调试源码，安装依赖，执行build，找到package.json 文件下的三种入口，调试配置

展开

青训营-快乐出发

赞过

1

2年前

#青训营笔记创作活动#
1月29日打卡day14
今日学习
认识canvas库 fabric.js ，通过源代码学习其基础用法，划分一个个小组件实现整个功能
①初始化对象、事件；②设置画布样式、背景颜色、图片等等；③插入基础元素，文字、正方形、SVG；④属性调整，旋转角度、坐标、透明度等等；⑤多向对齐等等

展开

青训营-快乐出发

赞过

1

2年前

#青训营笔记创作活动#
1月28日打卡day13
今日学习
1、节流：可以有效的避免函数过于频繁的执行，例如对一个提交按钮，只允许每300ms提交一次
2、CSS实现节流思路一
（1）pointer-events：禁用点击事件
（2）animation：控制禁用时间
（3）伪类:active：触发点击
3、CSS实现节流思路二
通过:active触发transition变化，然后通过监听transition回调动态设置按钮的禁用状态
（1）定义一个无关紧要的过渡属性，比如opacity
（2）监听transition的起始回调
该方法的优势：禁用的逻辑是完全和业务逻辑是解耦的【指可以在任意场合下无缝接入，不受框架和环境影响】

展开

青训营-快乐出发

赞过

1

2年前

#青训营笔记创作活动#
1月27日打卡day12
今日学习
拓展JS知识，关于利用沙箱禁止开发者操作 DOM 和调接口的环境

青训营-快乐出发

赞过

1

2年前

#青训营笔记创作活动#
1月26日打卡day11
今日学习
1、rem：相对于根元素字体大小的单位，根元素的字体设置为10px时，子元素的1rem就相当于10px
2、基于rem和scale的适配方案的实操

展开

青训营-快乐出发

赞过

1

2年前

#青训营笔记创作活动#
1月25日打卡day10
今日学习
认识更多CSS属性，满满干货

1、position: sticky 可以实现标题吸顶的需求
2、选择器:empty 选中内容为空的容器，然后通过伪元素为空容器添加提示
3、gap属性可以实现每个元素之间隔固定距离
4、background-clip: text 用来做带背景的文字效果
5、user-select属性禁用光标选中效果
6、选择器:invalid 伪类实现校验提示的效果，例如当 input 值有效时，元素颜色为绿色【input:valid {background-color: #ddffdd;}】，无效时为红色【input:invalid {background-color: #ffdddd;}】
7、选择器:focus-within 伪类根据子元素的状态来改变父元素的样式
8、mix-blend-mode:difference属性元素内容与元素的直系父元素内容和元素背景如何混合，其中difference 表示差值

展开

青训营-快乐出发

赞过

1

2年前

#青训营笔记创作活动#
1月24日打卡day9
今日学习
TinyPNG压缩工具，减少WEBP、JPEG和PNG的文件大小
1、安装：在打包工程代码前，执行命令行$ npm i yx-tiny -D，使用$ npx tiny ，输入「文件夹名称-tinyImg」，选择一或多个tinyImg，最后选择压缩模式「全量」或「自定义」，选择需要压缩的图片
2、TinyPng实现原理：查找图片资源，分配任务进程，上传原图到TinyPng，下载压缩图片，写入覆盖图片。

展开

青训营-快乐出发

赞过

1

2年前