菜团子QAQ
获得徽章 0
赞了这篇沸点
#青训营笔记创作活动#
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月12日 打卡day35
今日学习
通过 SVG 可编码的特点，利用 SVG 来实现蒙版效果，并且在绘制蒙版时，预留出目标元素的高亮区间（即 SVG 不需要绘制这一部分），这样就解决了使用 z-index 可能会失效的问题。
了解底层实现原理比使用库本身更有意义，当然每个人的想法不同，不过如果你想开始了解原理又不能立马挑战一些高深的内容，为什么不先从自己感兴趣的又不是那么复杂的功能开始呢？
1月12日 打卡day35
今日学习
通过 SVG 可编码的特点，利用 SVG 来实现蒙版效果，并且在绘制蒙版时，预留出目标元素的高亮区间（即 SVG 不需要绘制这一部分），这样就解决了使用 z-index 可能会失效的问题。
了解底层实现原理比使用库本身更有意义，当然每个人的想法不同，不过如果你想开始了解原理又不能立马挑战一些高深的内容，为什么不先从自己感兴趣的又不是那么复杂的功能开始呢？
展开
评论
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月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