用户3493817625623
获得徽章 1
- #青训营笔记创作活动#
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月11日 打卡day32
#青训营笔记创作活动#
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月9日 打卡day30
1.||的短路运算
let c = a || b
2.三元运算符
n >= 2 ? add(n - 1) : result;
3.switch case
4.对象配置/策略模式
let type = 'A'
let tactics = {
'A': 1,
'B': 1,
'C': 2,
'D': 3,
default: 0
}
console.log(tactics[type]) //1
展开评论点赞 - #青训营笔记创作活动#
2月8日 打卡day29
1.Pinia的核心功能：
store：状态仓库
state：状态，和 vuex 保持一致
getters：类似组件的计算属性，和 vuex 中的 getters 的保持一致
actions：和 vuex 中的 actions 保持一致，可以处理逻辑并修改 state
2.Pinia的使用
- 创建
创建一个pinia 插件实例供 Vue 注册和使用。
- 注册
app 实例调用 use 方法来注册插件
- 创建用户store
使用 defineStore 方法创建 store，store 的命名遵循 useXXX 的形式。创建时需要指定一个唯一的 id
- 组件中使用 Pinia
导入后，先实例化 store；实例化 store 之后，可以直接使用它的 state、getters 和 actions展开评论点赞 - #青训营笔记创作活动#
2月7号 打卡day28
使用第三方库来实现文档预览功能，并封装成preview组件
1.docx-preview：
github.com安装：
npm i docx-preview
2.使用：创建容器标签，引入并创建渲染函数
3.pdf预览需要安装PDFJS插件，通过文件流解析写道cavas上实现预览效果；安装：
npm i docx-preview展开评论点赞 - #青训营笔记创作活动#
2月6号 打卡day27
1.AST（抽象语法树）：
源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。AST是源代码的抽象语法结构的树状表现形式，简单点就是一个深度嵌套对象，这个对象能够描述我们书写代码的所有信息
2.手写编译器：三个部分：Parsing(解析过程)，Transformation（转化过程），Code Generation（代码生成）
3.真实场应用景:使用Babel修改函数名等；展开评论点赞 - #青训营笔记创作活动#
2月5号 打卡day26
qiankun 的三大沙箱：
1.SanpshotSandbox：快照沙箱：
把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了。
2.LegacySandbox：通过监听对 window 的修改来直接记录 Diff 内容
3.ProxySandbox：也即一个页面中只能同时展示一个微应用，而且无论是 set 还是 get 依然是直接操作 window 对象。
qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。展开评论点赞 - #青训营笔记创作活动#
2月4日 打卡day25
package.json 的配置主要分为7大类：
1.描述配置
2.文件配置
3.脚本配置
4.依赖配置
5.发布配置
6.系统配置
7.第三方配置
展开评论点赞
github.com