程序小猿2
学生
|
天津理工大学
平平无奇的大学生，喜欢编程......
获得徽章 0
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[奋斗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_29.2801857.png)
day02学习了7 个不常用但很有用且你见过也可能没见过的 CSS 属性：
1. position: sticky
2. empty 选择器
3. gap
4. background-clip: text
5. user-select
6. :invalid 伪类
7. :focus-within 伪类
1. position: sticky
2. empty 选择器
3. gap
4. background-clip: text
5. user-select
6. :invalid 伪类
7. :focus-within 伪类
展开
评论
2
赞了这篇文章
Day 1
今天阅读了一篇推荐文章
了解了：
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
今天阅读了一篇推荐文章
了解了：
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
展开
评论
2
#青训营笔记创作活动#
1月21日 打卡day39
今日学习
第一种方式是借助 background-clip。
background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
而 background-clip: text 可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
看个最简单的 Demo ，没有使用 background-clip:text.
1月21日 打卡day39
今日学习
第一种方式是借助 background-clip。
background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
而 background-clip: text 可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
看个最简单的 Demo ，没有使用 background-clip:text.
展开
评论
1
#青训营笔记创作活动#
1月16日 打卡day38
今日学习
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。。
随着 Hooks 开始改变开发人员编写 React 组件的方式，需要编写一套 React Hooks 的最佳实践，以便团队内成员更轻松地开发和协作。
虽然本文肯定还有遗漏的内容，但我希望本文分享的技巧能多少帮助大家在项目中以正确的方式编写 React Hooks。
1月16日 打卡day38
今日学习
React Hooks 作为 React 库的重要补充，它使函数组件能够以新的方式编写、重用和共享 React 代码。。
随着 Hooks 开始改变开发人员编写 React 组件的方式，需要编写一套 React Hooks 的最佳实践，以便团队内成员更轻松地开发和协作。
虽然本文肯定还有遗漏的内容，但我希望本文分享的技巧能多少帮助大家在项目中以正确的方式编写 React Hooks。
展开
评论
1
#青训营笔记创作活动#
1月15日 打卡day37
今日学习
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的横坐标和纵坐标等。
1月15日 打卡day37
今日学习
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的横坐标和纵坐标等。
展开
评论
1
#青训营笔记创作活动#
1月13日 打卡day36
今日学习
key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。
简单来说，key是唯一标识，为了让diff算法更准确的找到需要被对比的两个节点。
1月13日 打卡day36
今日学习
key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。
简单来说，key是唯一标识，为了让diff算法更准确的找到需要被对比的两个节点。
展开
评论
1
#青训营笔记创作活动#
1月12日 打卡day35
今日学习
通过 SVG 可编码的特点，利用 SVG 来实现蒙版效果，并且在绘制蒙版时，预留出目标元素的高亮区间（即 SVG 不需要绘制这一部分），这样就解决了使用 z-index 可能会失效的问题。
了解底层实现原理比使用库本身更有意义，当然每个人的想法不同，不过如果你想开始了解原理又不能立马挑战一些高深的内容，为什么不先从自己感兴趣的又不是那么复杂的功能开始呢？
1月12日 打卡day35
今日学习
通过 SVG 可编码的特点，利用 SVG 来实现蒙版效果，并且在绘制蒙版时，预留出目标元素的高亮区间（即 SVG 不需要绘制这一部分），这样就解决了使用 z-index 可能会失效的问题。
了解底层实现原理比使用库本身更有意义，当然每个人的想法不同，不过如果你想开始了解原理又不能立马挑战一些高深的内容，为什么不先从自己感兴趣的又不是那么复杂的功能开始呢？
展开
评论
1
#青训营笔记创作活动#
1月11日 打卡day34
今日学习
三元运算符我觉得大家应该都很熟悉吧，很多时候简单的一些判断我们都可以使用三元运算符去替代 if else，这里只推荐 一层 三元运算符，因为多层嵌套的三元运算符也不具备良好的可读性🥹。
Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else
逻辑或 || 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。
短路运算跟三元运算虽然很好用，代码也很简洁，不过都只能用于简单的判断，遇到多重条件判断就不能使用了。
对于 switch case，虽然它的可读性确实比 else if 更高，但是我想大家应该都觉得它写起来比较麻烦吧（反正我觉得很麻烦）。
1月11日 打卡day34
今日学习
三元运算符我觉得大家应该都很熟悉吧，很多时候简单的一些判断我们都可以使用三元运算符去替代 if else，这里只推荐 一层 三元运算符，因为多层嵌套的三元运算符也不具备良好的可读性🥹。
Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else
逻辑或 || 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。
短路运算跟三元运算虽然很好用，代码也很简洁，不过都只能用于简单的判断，遇到多重条件判断就不能使用了。
对于 switch case，虽然它的可读性确实比 else if 更高，但是我想大家应该都觉得它写起来比较麻烦吧（反正我觉得很麻烦）。
展开
评论
1
#青训营笔记创作活动#
1月10日 打卡day33
今日学习
Pinia 号称下一代的 Vuex。
经过初步体验，发现相比于 Vuex，Pinia 确实有了很大进步，最明显的就是删减了复杂的概念，简化了数据流转的过程，现在只剩下了 store、state、getters、actions 这四个核心概念。
用了一个常见的登录场景，先注册好 pinia 插件，然后定义需要管理的数据（状态）和方法（登录逻辑），然后在组件中初始化 store，并使用数据，调用方法，演示了使用 Pinia 的基本流程，最后还介绍了一个持久化插件，帮助持久化 Pinia 中的状态。
从这个过程中很明显体会到，Pinia 的使用相比 Vuex ，API 更加简单，数据的流转也更加清晰。
1月10日 打卡day33
今日学习
Pinia 号称下一代的 Vuex。
经过初步体验，发现相比于 Vuex，Pinia 确实有了很大进步，最明显的就是删减了复杂的概念，简化了数据流转的过程，现在只剩下了 store、state、getters、actions 这四个核心概念。
用了一个常见的登录场景，先注册好 pinia 插件，然后定义需要管理的数据（状态）和方法（登录逻辑），然后在组件中初始化 store，并使用数据，调用方法，演示了使用 Pinia 的基本流程，最后还介绍了一个持久化插件，帮助持久化 Pinia 中的状态。
从这个过程中很明显体会到，Pinia 的使用相比 Vuex ，API 更加简单，数据的流转也更加清晰。
展开
评论
点赞
#青训营笔记创作活动#
1月9日 打卡day32
今日学习
渲染数据this.fileData必须是一个ArrayBuffer格式的数据，如果请求的的数据是Blob格式必须要先使用Blob.arrayBuffer()转换
pdf文件渲染后如果不能调整大小会因为源文件的大小和文件内容，出现模糊的问题,所以进行缩放渲染是有必要的
1月9日 打卡day32
今日学习
渲染数据this.fileData必须是一个ArrayBuffer格式的数据，如果请求的的数据是Blob格式必须要先使用Blob.arrayBuffer()转换
pdf文件渲染后如果不能调整大小会因为源文件的大小和文件内容，出现模糊的问题,所以进行缩放渲染是有必要的
展开
评论
点赞
#第五届青训营阅读打卡#
1月8日 打卡day31
今日学习
AST（抽象语法树） 到底是什么？
AST基础：从零到一手撸一个功能完备的编译器
AST基础：Babel 的设计理念
AST的应用：手写console插件，再也不怕打开控制台满屏的console了
AST的应用： ES6 是如何转成 ES5 的？
AST的应用：30行代码依靠 AST 实现代码压缩
AST的应用：40行代码知晓 ESLint 的工作原理
AST的应用：手写 按需加载插件 ，同事看了都说666
AST的应用：手写 Typescript 代码检测插件（fork-ts-checker-webpack-plugin），原来 TS语法检测如此简单
其他延伸：结合 AST 手写监控系统中的日志上传插件
其他延伸：教你玩转AST，最佳实践
1月8日 打卡day31
今日学习
AST（抽象语法树） 到底是什么？
AST基础：从零到一手撸一个功能完备的编译器
AST基础：Babel 的设计理念
AST的应用：手写console插件，再也不怕打开控制台满屏的console了
AST的应用： ES6 是如何转成 ES5 的？
AST的应用：30行代码依靠 AST 实现代码压缩
AST的应用：40行代码知晓 ESLint 的工作原理
AST的应用：手写 按需加载插件 ，同事看了都说666
AST的应用：手写 Typescript 代码检测插件（fork-ts-checker-webpack-plugin），原来 TS语法检测如此简单
其他延伸：结合 AST 手写监控系统中的日志上传插件
其他延伸：教你玩转AST，最佳实践
展开
评论
点赞