- 博客(39)
- 收藏
- 关注
RSS订阅原创 相比于 class 组件，hooks到底解决了什么问题？
hooks 的出现 让 React 函数组件也能够更好的进行状态复用以及使用 useEffect 模拟生命周期的实现，还提高了代码的可读性、复用性和可维护性。
2024-04-24 10:25:55
925
原创 详解 promise.all 和 promise.allSettled 的区别
说到 Promise.all，很多人应该不陌生，那 Promise.allSettled，可能很多朋友并没有使用过，这两者有相同部分，也有不同部分，今天就带大家一起来了解一下这两个方法。
2024-04-18 09:30:37
703
原创 对后端返回的数据改造程级联数据
在级联数据改造中，还是离不开需要利用复杂数据类型的特性，今天的分享也充分的利用了这一点，我们首先对数据进行改造，将数据以id=>index形式存储起来，然后通过 pid 找到 id 对应的位置添加进去即可。怎么样这种类型的题，如果以这个思路去解答是不是很不错呢？当然也有其他解题的思路，欢迎大家在评论区交流分享，互相学习！
2024-04-16 14:35:51
531
原创 详解 useMemo 和 React.memo 的作用
React 中的这两个函数都带有 memo，看着比较相似，但是作用和使用场景却不一致。memo 的英文含义为，可以理解为保存，记忆之类，从字面意思可以猜测到它的作用。可能没有实战的童鞋还容易把这两个搞混，但是这两个函数有着完全不一样的功能，也不需要拿来比较，千万不要搞混了，今天就带大家一起来详细的分析一下这两个函数的作用和使用场景！
2024-04-10 08:47:19
300
原创 前端 JS 压缩图片的思路（附源码）
我们将图片绘制到 canvas 之后，还需要将 canvas 转化为 Data URl，转化为 DataURl 之后可以显示到我们的屏幕上面，也可以存放到后端服务器，使用 canvas 所提供的 toDataURL 实例方法即可。 官方解释：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI HTMLCanvasElement.toDataURL() - Web API 接口参考 | MDN (mozilla.org)
2024-03-28 16:39:23
1181
原创 详解 WebWorker 的概念、使用场景、示例
WebWorker 是 HTML5 新引入的一种技术，旨在为 Web 内容在后台运行脚本提供一种简单的方法。这样可以允许将一些大量计算工作分配到后台线程中运行，而不产生浏览器不响应或重新渲染的问题，从而可以保证程序的顺畅运行。WebWorke r是一种在 Web 应用中实现多线程运行的技术，可以将耗费 CPU 的任务交给后台线程处理，避免阻塞主线程，从而提高Web应用的响应性能和用户体验。
2024-03-26 10:26:01
1178
原创 详解Router路由 Hash 和 History 两种模式
总的来说,无论是 Hash 模式还是 History 模式,Vue Router 都是通过监听相应的事件,并在事件发生时执行路由切换逻辑,从而实现单页面应用的 URL 导航。两种模式的主要区别在于监听的事件不同,以及 History 模式需要服务端配置支持。
2024-03-20 17:16:22
653
原创 在连续请求过程中，如何取消上次的请求？
首先是第一次调用时为接口请求添加 AbortSignal参数之后在每次进入都判断是否存在实例，有的话直接取消掉取消只会针对还未完成的请求，已经完成的不会取消通过这样就可以达到我们每次都会使用最新的请求接口作为数据来源，因为后面的接口会将前面的干掉如果这道面试题这样给面试官回答，是不是很不错？
2024-03-18 16:34:01
833
原创 面试官：自定义一个React hook，用于监听组件的重新渲染
我们在实现的时候可以先想一下，如果不是封装 hook，在组件内实现应该怎么做，进而将思路理清，然后将实现的代码再转化为 hook 即可。在这个案例中，需要理解 useEffect 的使用，主要是对 useEffect 依赖项不同情况的理解，包括有依赖项依赖项为空数组无依赖项三种情况。
2024-03-15 16:18:15
364
原创 前端图片预加载和懒加载
在说到对图片资源进行优化时，那就不得不提到图片预加载和图片懒加载，可能很多朋友都了解这两者，但是一直没有很清晰的概念，以及什么时候用，用在什么场景下，今天就来详细的了解一下吧！图片预加载是指在页面加载时，提前加载页面中需要使用的图片资源，将它们缓存在浏览器中。这样当用户需要查看这些图片时，就可以直接从缓存中获取,减少等待时间,提升用户体验。通过 JS 创建 Image 对象，设置其 src 属性为要预加载的图片URL，浏览器会自动下载这些图片资源并缓存在本地。
2024-03-15 15:47:14
886
原创 为什么 Vite 速度比 webpack 快？
通过使用 export 和 import 语句，ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时，开发者实际上是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（除IE外）均支持ES Modules，并且可以通过在script标签中设置type="module"来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。
2024-03-12 09:13:03
388
原创 详解 useEffect return 内外的代码执行顺序
当 useEffect 被再次执行时会先清理副作用执行 return，再执行 return 之外的，可以理解为只要 useEffect 被再次执行，都会执行 return当组件销毁时，不管是否有依赖项，useEffect 的 return 都会被执行去清理副作用。
2024-02-29 16:49:04
446
原创 Rem 自适应原理与应用
实现 rem 单位自适应，需要借助 postcss-pxtorem 这款插件将 px 转换为 rem，需要检测窗口的变化去设置根元素的字体大小，从而实现 rem 自动计算，实现自适应。
2024-02-26 17:11:02
1022
原创 使用 Next.js 连接 mysql 数据库
首先在 Next 中创建好接口文件，接口文件的模式按照 Next 所提供的接口格式进行接口配置，最后在页面中直接使用接口路径使用即可。以上就是如何使用 Next 框架实现一个简单的后端接口。
2024-02-20 16:09:42
1754
原创 使用 Nuxt 构建简单后端接口及数据库数据请求
首先在 Nuxt 中实现后端接口数据请求，然后创建好接口文件，进行接口配置，最后在页面中使用 asyncData 函数进行接口请求即可。以上就是如何使用 Nuxt 框架实现一个简单的后端接口。
2024-02-18 16:52:15
1612
原创 如何在 React 中实现全局路由守卫？
在 react 中实现路由守卫和 vue 不同，vue 可以使用内置的前置路由守卫函数，react 需要自己实现，不过原理大致相同。记得对可能造成死循环的路径进行判断，然后返回当前页面即可，否则使用不当可能会造成死循环。另外路由守卫需要根据项目中的需求进行专门的“定制”，以上的代码可能适合我的项目，那如果你也想实现自己的路由守卫，可以借助作者的思路，希望可以帮助到你。当然如果有觉得作者哪里写的不对的地方，大家也可以在评论区指出来，咱们一起交流进步！
2024-02-02 16:44:03
1138
1
原创 Vue 中如何模块化使用 Vuex
在个人小项目当中，不使用模块化没什么问题，但是在公司或者大型项目下就需要使用模块化管理，使用模块化有利于。在需要访问或修改状态的组件中，你可以使用Vuex提供的辅助函数。假设你有两个模块，一个用于管理用户信息，另一个用于管理商品信息。
2024-01-23 19:36:32
416
原创 Vue 中 name 属性的作用
在实际开发中，如果组件没有涉及递归调用，name属性并不是必须的。但是，为了更好地组织和调试代码，给组件设置一个有意义的name是一个良好的实践。另外，使用name属性还可以在Vue开发工具中更容易地定位组件。在浏览器的开发者工具中，你可以通过检查Vue组件实例的属性来获取组件的名称。
2024-01-19 15:29:33
428
原创 详解 React 常用的一些钩子函数（对比vue）
在React中，钩子函数是处理状态、副作用和上下文等方面关键的工具。本文将以Vue的视角对React中常用的钩子函数进行详细对比和学习，帮助你更好地理解这些工具的使用和优势。通过对比学习，你将能够更快速地掌握React的钩子函数，并在React和Vue之间更流畅地切换。提升你的前端开发技能，深入了解这两个流行框架的异同。
2024-01-18 17:41:09
857
1
原创 Node.js 连接 mysql 数据库（Navicat）超详细！！！
打开 navicat（其他数据库软件也可以）点击连接 - 选择 MySql在新建连接中输入以及，默认其他输入框是有值的。连接建好后有几个数据库是自带的，还有的是我之前建的，这些不用管，现在我们需要创建自己的数据库。右键新建数据库 -- 输入数据库名称 test右键数据库名称 -- 新建表在页面中随便写两个字段，类型会自动填充，然后保存为你想存的数据库表名，这里保存为 test。数据库表建好了，随便填充一下数据右键 - 点击打开表输入张三，18 然后记得保存。
2024-01-17 19:26:18
1128
2
原创 React + Node.js 前后端实现图片上传功能
最近笔者在开发个人博客的后台管理系统，里面用到了图片上传相关的功能，在这里记录并分享一下，希望可以帮到大家，话不多说直接开始吧！（想看代码的可以直接跳到最后哦~）
2024-01-11 19:35:22
1091
原创 页面内修改 el-popover 组件样式失效
在单页面内修改 el-popover 样式是不可以的，因为 el-popover 是挂载在全局最外层。如果想修改样式可以在全局入口文件中修改样式。所以如果在页面内这样修改是没有效果的！这张图可以清晰的看到该组件在最外层。
2024-01-09 17:33:23
437
原创 使用 Vue3 实现一个穿梭框效果
我们需要知道如果要实现一个穿梭框效果，我们大概都需要做哪些东西呢？那首先是对左侧的初始化数据，我们需要对数据进行加工，添加 checked 属性，方便后面进行筛选。其次是我们找出我们选中的数据，添加到右侧，同时把左侧选中的数据进行移除。
2023-11-30 16:44:31
1050
原创 css 实现响应式省略号（不固定宽度）
当我们需要一行隐藏文本，而且并不想设置宽度时，因为要实现响应式，该怎么办呢？这时上面的代码就不生效了，因为上面的是建立在固定宽度的，那这时应该怎么办？如何实现一行文本超出自动在末尾加省略号呢？
2023-11-17 17:28:05
237
1
原创 使用 Vue3 自定义v-myLoading指令~
在实现一个自定义指令的时候，我们首先要明白在做的东西是什么，如果使用 js 的话应该怎么实现？其内部原理还是 js，就好比一个简单的 input 自动聚焦指令，mounted: (el) => el.focus()，只需要一行代码就行了。其次就是对于自定义指令的内部一些参数、方法知道如何使用，这个需要我们做过一次，就明白了。
2023-11-15 17:19:47
176
1
原创 css实现展开收起效果！！
之所以分享这个效果，一是是觉得挺有意思的，二是也是感慨目前随着前端技术的发展，一些新技术慢慢已经取代了老技术，就比如 flex 和 float，我们在工作中可能更多的是使用 flex 进行布局，而慢慢的忽视了 float，而真正的需要 float 登场的时候，又想不起来要去使用它了。
2023-10-23 18:52:18
610
原创 Vue实现楼层滚动效果
该功能类似于楼层滚动的效果，只不过对右侧的目录滚动进行优化，滚动每次基于中间位置，总体来说难度不大，主要判断当前元素是否已经滚动到顶部即可，那么核心就是怎么处理这个问题。如果觉得以上思路对你有任何帮助或者启发，可以给作者点下赞哦~你的鼓励就是作者最大的动力呢~
2023-10-21 17:38:20
271
1
原创 我使用 Vue 实现了原神官网的全屏滚动效果
全屏滚动的核心还是判断上一页还是下一页，动态计算页面高度，对内层容器进行滚动，从而显示我们需要展示的元素即可。
2023-08-17 18:03:12
384
1
原创 Vue 插槽 slot 传值失效问题
今天工作时遇到一个奇怪的问题，我使用插槽进行传值，在父组件收不到子组件传过来的值，找了好久，最后发现竟然是版本问题，给大家分享一下！一开始我是使用这种方式进行接收的：我在我的测试电脑上运行：是没问题的，可以实现，但是为什么我的工作代码就是不行了，这个时候我进入了官方文档一看究竟！v-slot:foo在 2.6 以上的版本才支持。对于之前的版本，你可以使用。我又一看我的工作时的 vue 版本是 "vue-template-compiler": "^2.5.11"
2023-08-14 17:29:08
514
原创 Vue 实现全选、多选、单选效果
假如这里有多个卡片，点击相应卡片之后需要提交卡片内信息，我们需要把点击的卡片筛选出来，在不使用组件库的前提下实现全选，多选，单选操作（其中全选和多选为一个需求，单选为一个需求）
2023-08-05 14:21:39
2970
1
原创 详解JS：||，&& ，??表达式
在JavaScript逻辑运算中0、”“、null、false、undefined、NaN都会判为false，其他都为true。
2023-07-29 14:28:05
86
1
原创 HTML+CSS+JS实现遮罩层+Tabs效果
使用原生HTML、CSS和JavaScript，实现一个遮罩层效果，里面的内容垂直水平居中，并且内容是一个Tabs组件。您可以点击相应的Tabs切换到对应的内容。点击遮罩层可以隐藏它，点击Tabs右上角的关闭按钮也会隐藏遮罩层。话不多说，直接上代码！
2023-07-22 17:01:56
750
2
原创 浅谈js深拷贝-structuredClone
我们对a对象的属性info，进行修改，结果并不会影响b的值，说明深拷贝以及成功，这是一些基本情况的深拷贝，复杂的情况如果遇到再来追加。浏览器出了一个新的深拷贝函数，效果很不错，直接上代码！
2023-07-21 09:27:38
82
1
原创 Vue2使用watch同时监听多个属性
使用watch监听时，有时需要需要监听多个属性，处理的逻辑是一样的，这个时候可以进行统一监听，直接上代码！值得注意的是，a，b，c需要是this上挂载的属性，可以存在于data/props。
2023-07-20 10:10:24
2224
原创 nvm下载（一些坑需要注意的）
注意：下载exe文件时用管理员身份打开，打开cmd（win+r）时需要用管理员身份运行，需要把之前的node卸载，需要路径不带中文。可以通过nvm ls查看是否切换成功，通过node -v查看是否切换成功。6.nvm install 版本号 安装node版本。7.nvm use 版本号 切换需要的版本。2.下载路径需要改成不带中文的（必须）4.nvm -v查看安装是否成功。5.nvm ls 现有的列表。3.把之前的node删除掉。
2023-01-16 12:51:31
64
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人