- 博客(16)
- 收藏
- 关注
RSS订阅原创 清除浮动的五种方法以及优缺点
*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。: 简单粗暴直接有效，清除了浮动带来的影响。：符合闭合浮动思想，结构语义化正确。通俗易懂，书写方便。
2023-01-06 15:40:27
220
原创 vue2.x与vue3.x中自定义指令详解
vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作，比如防抖、节流、懒加载、输入框自动聚焦等等，使用起来非常方便，比如vue自带的v-text、v-html、v-show、v-if等等。
2023-01-06 15:34:13
320
原创 React diff算法的运行原理
React 的渲染机制 Reconciliation 过程React 采用的是虚拟 DOM (即 VDOM )，每次属性 (props) 和状态 (state) 发生变化的时候，render 函数返回不同的元素树，React 会检测当前返回的元素树和上次渲染的元素树之前的差异，然后针对差异的地方进行更新操作，最后渲染为真实 DOM，这就是整个 Reconciliation 过程，其核心就是进行新旧 DOM 树对比的 diff 算法。
2023-01-06 15:12:06
486
原创 如何理解回流和重绘，以及触发场景
在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制具体的浏览器解析渲染机制如下所示：在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。
2023-01-06 15:05:41
139
原创 前端面试题以及小功能合集
目录React系列vue系列html系列css系列JS系列开发工具系列小功能合集react面试题合集React diff算法的运行原理vue2.x与vue3.x中自定义指令详解如何理解回流和重绘，以及触发场景如何使用css实现三角形清除浮动的五种方法以及优缺点fiber架构的理解Git的介绍以及使用小球环绕大球效果使用React Draggable实现拖拽vue与mongodb的图片上传关于element-ui的el-dialog页面不居中问题
2023-01-06 14:47:36
146
原创 React Draggable 实现拖拽
react-draggable 经过几年的发展，已经是一个相对比较稳定的库了。从 npm trends 上看，从 16 年起它的流行程度就迅速超过了其它几个类似的项目。它在 github 上算非常热门的项目了，使用它的项目众多，所以可以放心地使用。如果有 bug 反馈也会非常快如果看它的源码的话，会发现它的原理其实很简单，它只是将一个需要被拖拽的组件包到它定义的一个组件中，当鼠标拖拽时，重新计算组件的位置，这样就实现了“拖拽”的效果。这也是绝大多数拖拽组件库的实现方式。
2022-12-29 20:36:18
856
原创 小球环形转圈效果
首先我使用了html+js+css来实现这个效果，并且可以均匀分布小球之间的距离。里面的div就是旋转的小球，可以任意添加数量。这是js部分代码，使用了函数计算。
2022-12-28 11:32:42
205
原创 git的介绍及使用
Git是一个分布式版本控制系统,用于不同版本之间的代码管理。有了Git就可以多个人共同去操作同一份代码，避免的传统的文件与文件之间的拷贝。
2022-12-23 18:54:08
165
原创 Typescript泛型
上例中，我们在函数名后添加了 ，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array 中即可使用了。泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。但是我们预期的是，数组中每一项都应该是输入的 value 的类型。上例中，因为泛型 T 不一定包含属性 length，所以编译的时候报错了，是一个错误的例子。上例中，我们使用了之前提到过的数组泛型来定义返回值的类型。使用泛型接口的时候，需要定义泛型的类型。
2022-12-17 12:14:07
106
原创 面试题（vue，react，前端）
但是如果props的值来自于父组件的state，在这种情况下，父组件state发生了改变就会导致子组件的重新渲染，所以一旦指令setState就会执行render，useState会判断当前值有没有发生改变，确定是否去执行render方法，一旦父组件发生渲染，子组件也就会发生渲染。工作原理：redux要求我们把数据放在一个state公共存储的空间中，一个组件改变了state里面的数据，其他组件就能感受到state的变化，再来获取store里的数据，从而间接的实现了这些数据传递的功能。
2022-12-08 21:19:29
803
原创 说说你对fiber架构的理解？解决了什么问题？
JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待如果JavaScript线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿而这也正是React 15的所面临的问题，当React在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程。
2022-12-08 15:32:55
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人