ota裤
获得徽章 1
- #青训营笔记创作活动#
2月21日 打卡day29
今日学习
position: sticky吸顶的需求
通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示
background-clip: text
user-select 属性可以 禁用光标选中
:invalid 表示任意内容未通过验证的 input 或其他 form 元素
:focus-within 表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上
mix-blend-mode:difference 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。
展开评论点赞 - #青训营笔记创作活动#
2月20日 打卡day28
今日学习
React.memo() 是对函数组件进行优化，React.PureComponent 是定义类组件时使用的
相比于 React.PureComponent，React.memo() 可以支持指定一个参数，相当于 shouldComponentUpdate 的作用，如果该参数不传递，则默认只会进行 props 的浅比较
React 提供了一个 useRef Hook，返回一个可变的 ref 对象（这个 ref 对象只有一个 current 属性），其在组件的整个生命周期内保持不变。useRef 变化不会主动使页面渲染
这里有一个好规则可以避免遇到过时的变量：如果你使用当前状态来计算下一个状态，总是使用函数方式来更新状态。
当创建类组件时，遵循一定的顺序可以帮助我们更好地维护和改进 React 应用程序代码： static 开头的类属性
构造函数，constructor
getter/setter
组件生命周期
_ 开头的私有方法
事件监听方法，handle*
render*开头的方法，有时候 render() 方法里面的内容会分开到不同函数里面进行，这些函数都以 render* 开头
render() 方法
。展开评论点赞 - #青训营笔记创作活动#
2月19日 打卡
今日学习
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的横坐标和纵坐标等。
展开评论点赞 - #青训营笔记创作活动#
2月18日 打卡day26
今日学习
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
展开评论点赞 - #青训营笔记创作活动#
2月17日 打卡day25
今日学习
<input type="color" value="#FF99FF" />
自带颜色选择器
css实现打字效果，
一个动画负责文字width从0过渡，另一个动画负责对文字的边框transparent和显示
顺滑滚动js利用requestAnimationFrame和scrollTo递归执行
css利用html和body上的scroll-behavior:smooth
scroll-snap-type: x mandatory;
顺滑图片切换
展开评论点赞 - 2月16日 打卡day24
今日学习
#青训营笔记创作活动#
Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等.展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day23
今日学习
制定项目规范和代码风格,分支管理,提交审核,TDD测试驱动开发,使用GITHUB ACTION风格代码管理,发包到npmjs,monorepo风格代码管理
展开评论点赞 - #青训营笔记创作活动#
2月13日 打卡day22
今日学习
高亮部分 通过控制 z-index 的值，让目标元素展示在蒙层之上
引导部分 通过 position: fixed 实现定位效果，并通过动态修改 left、top 属性实现引导弹窗跟随目标移动
过渡动画 通过 transition 实现位置的平滑移动
页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息
。
展开评论点赞 - #青训营笔记创作活动#
2月12日 打卡day21
今日学习
docx预览,使用docx-preview库,创建一个容器标签,然后引入并创建渲染函数
PDF预览,使用pdfjs这个插件,通过文件流解析写到canvas上实现预览效果,创建canvas标签,渲染函数中要创建文件流
展开评论点赞 - #青训营笔记创作活动#
2月11日 打卡day20
今日学习
pinia，只有store,state,getters,actions
使用步骤 1.创建pinia 2,注册pinia 3.创建store 4.抽离需要管理的状态数据作为state,声明getters优化状态读取，声明actions处理业务逻辑 5.在需要的地方，导入和使用store
const useUserStore = defineStore('user', {
// 定义状态：一个函数，返回一个对象
state: () => ({
username: '',
token: ''
}),
// 定义 getters，等同于组件的计算属性
getters: {
// getter 函数接收 state 作为参数，推荐使用箭头函数
hello: state => '!' + state.username
},
// 定义 actions，有同步和异步两种类型
actions: {
// 异步 action，一般用来处理异步逻辑
async login(userData) {
const result = await axios.post('/api/user/login', userData)
const { data, code } = result.data
if (code === 0) {
// action 中修改状态
this.username = data.username
this.token = data.token
}
},
}
})
过去要修改 store 中的状态，需要先 dispatch action，再 commit mutation，真的很繁琐。
不再需要 dispatch 了，也没有 mutation 的概念了，可以当作普通函数那样使用就好了。无论是同步逻辑，还是异步逻辑，现在都可写在 actions 中了。在一个 action 函数中， this 就是当前 store 的实例，可以直接修改状态。展开评论点赞