- 博客(59)
- 收藏
- 关注
RSS订阅原创 ts中any和unknow的区别
总的来说，any 和 unknown 都为 ts 中的类型系统提供了一定的灵活性，但 unknown 更加注重类型安全。在实际开发中，我们应该尽量减少 any 的使用，多考虑使用 unknown，以充分利用 ts 的类型检查功能，写出更安全、更可靠的代码。下次再想用 any 时，先问问自己：这里真的没法确定类型吗？用 unknown 会不会更安全？毕竟写 ts 的乐趣，不就是在类型系统的钢丝上优雅地跳舞吗？
2025-04-17 09:55:48
884
原创 Macbook终端显示node/nvm/code：command not found解决办法
首先检查你是zsh还是bash命令然后在相应的文件里加入以下命令，打开配置文件open .bash_profile 或者 open .zshrc ）
2024-11-24 18:27:09
1284
原创 首屏优化之：SSR（服务端渲染）
SSR，即服务端渲染，是指在服务器端生成 HTML 内容并将其发送到客户端。这样一来，用户在首次访问页面时，浏览器可以直接展示完整的HTML内容，而无需等待 JS 在客户端完成渲染。还是跟上面的一样，我们来看一下网站的响应的内容，这里我们拿掘金进行举例。很明显，我们看到，掘金并不是和上面的 CSR 网站一样，直接返回一个空的 div，而是返回了很多的 html 内容，掘金的这个网站是采用 nuxt 实现的 ssr 渲染，nuxt 是基于 vue 实现的 ssr 框架，而react 对应的 next。
2024-09-28 15:33:59
2017
原创 首屏优化之：import 动态导入
在进行首屏优化时，可以采取动态导入的方式实现，使用 import('./文件路径')实现，虽然动态导入有一些优化首屏渲染的优势，但是也有一些缺点，比如首次加载延迟，不利于 SEO 优化等，所以在使用动态导入时应该好好进行规划，比如一些不常用的模块或者内容不太复杂，对加载速度无要求的文件可以进行动态导入，这个还是要根据项目的需求来进行使用的。
2024-08-09 09:29:40
742
原创 script 加载的三种方式详解
这三种方式各有优势，在首屏优化方面不能直接说哪一种就是最好的，可以结合起来进行使用，还要根据实际需求。总结就是：<script></script>：阻塞 HTML 解析，严格按照书写顺序执行脚本，适用于少量必须即时执行的脚本。defer：异步下载脚本，不阻塞 HTML 解析，按顺序执行，适用于大部分需要等待 HTML 解析完成的脚本。async：异步下载和执行脚本，不阻塞 HTML 解析，但无法保证执行顺序，适用于独立的或不依赖执行顺序的脚本。如果脚本需要在 DOM 准备好之前执行，使用直接加载。
2024-08-01 14:32:35
1290
原创 记录 drawer 组件拖拽过程中 onmousemove事件 在 iframe 失效问题
于是乎，这个问题得到了解决，今天分享这篇文章主要是为了记录这个问题，希望可以帮助那些遇到相同问题的人，毕竟当时自己并没有第一时间发现这个问题，现在解决了，觉得挺值得保存并分享出去的。一开始我对问题的定位不够清楚，导致浪费了很多时间，在这个过程中如果求助 ai 也是没什么效果的的，因为一开始就没有正确的把问题描述出来，ai 所提供的答案只是它所看到的问题。所以在遇到问题时，一定要冷静下来思考代码结构，思考问题的核心，这样解决起来事半功倍。
2024-07-23 09:28:44
1011
原创 对 Ant-design 的 Drawer 组件 增加拖拽效果
实现这个需求首先确定按下元素的位置，为按下元素添加相应事件，根据移动的距离动态赋值内容容器的宽度，再根据Drawer的width：auto，自动撑开Drawer组件即可。当然实现过程中也有其他小 bug，比如选中文字，设置最小宽度等等，其实还有小问题，文章中并没有呈现，就是如果里面的内容时 iframe 引入的话，会导致移动事件失效，这个会单独写一篇文章，主要方便有相同问题的朋友进行搜索解决问题。
2024-07-23 09:27:50
1829
1
原创 浅谈 Webpack5 模块联邦
以上对模块联邦进行简单的介绍，当然实际使用当中还要根据各自的项目进行配置，大家可以查看官方文档进行更深一步了解Webpack 5 发布 (2020-10-10) | webpack 中文文档。
2024-07-10 15:59:09
1011
原创 说一下浏览器中的强缓存和协商缓存的区别
对于一道高频的面试题，可能很多小伙伴还不知道这两者的概念，不知道是用来做什么的，以及有什么好处，强缓存和协商缓存是 Web 缓存机制的重要组成部分，它们在优化 Web 应用性能方面发挥了重要作用，接下来我们就来详细的聊一下吧！
2024-07-05 15:47:56
1060
原创 获取 url 地址栏 ? 后面的查询字符串，并以键值对形式放到对象里面
首先我们使用获取?后面的请求参数在获取到请求后直接使用进行处理对处理完的数据进行for of循环拿到里面的请求参数最后直接存到 obj 对象中即可。
2024-06-29 17:38:49
875
原创 git 代码提交规范，feat，fix，chore都是什么意思?
使用规范的提交消息可以让项目更加模块化、易于维护和理解，同时也便于自动化工具（如发布工具或 Changelog 生成器）解析和处理提交记录。通过编写符合规范的提交消息，可以让团队和协作者更好地理解项目的变更历史和版本控制，从而提高代码维护效率和质量。
2024-05-31 09:00:09
35427
1
原创 调试小技巧：除了可以在控制台编写js代码，还有一个地方也可以，来试试吧！
使用源代码里面的代码片段进行代码调试更加方便一些，可以像在编辑器里编写代码一样，在实际复杂的调试过程中会更加便捷一些！
2024-05-29 11:53:56
313
原创 实现一个自定义 hook，用于强制刷新当前组件
为什么会刷新？当我们在中使用hook 时，内部的状态tick会成为MyComponent组件的一部分。调用函数会更新tick状态，触发的重新渲染。这是因为 react 的状态更新机制会导致使用该状态的组件重新渲染，即使这个状态在组件中没有直接使用。
2024-05-23 09:26:14
1196
1
原创 Interface 和 Type 的区别
当需要定义一个对象类型时，interface通常是首选，因为它更灵活、可扩展，并且具有自动合并的特性。当需要创建可复用的类型别名、联合类型、交叉类型时，使用type。在 ts 中适当使用两者，可以让代码更加清晰、可维护。
2024-05-17 09:26:17
307
原创 JS 优化双重 for 循环了
使用 Map 对象，提高了代码的简洁性、易读性，保证了时间复杂度维持在O(n)，所以笔者建议大家以后再遇到类似的需求，可以首先往 Map 这里想一下，而不要下意识的就直接双重for循环了。
2024-05-15 14:09:56
1619
原创 相比于 class 组件，hooks到底解决了什么问题？
hooks 的出现 让 React 函数组件也能够更好的进行状态复用以及使用 useEffect 模拟生命周期的实现，还提高了代码的可读性、复用性和可维护性。
2024-04-24 10:25:55
1302
原创 详解 promise.all 和 promise.allSettled 的区别
说到 Promise.all，很多人应该不陌生，那 Promise.allSettled，可能很多朋友并没有使用过，这两者有相同部分，也有不同部分，今天就带大家一起来了解一下这两个方法。
2024-04-18 09:30:37
3686
原创 对后端返回的数据改造程级联数据
在级联数据改造中，还是离不开需要利用复杂数据类型的特性，今天的分享也充分的利用了这一点，我们首先对数据进行改造，将数据以id=>index形式存储起来，然后通过 pid 找到 id 对应的位置添加进去即可。怎么样这种类型的题，如果以这个思路去解答是不是很不错呢？当然也有其他解题的思路，欢迎大家在评论区交流分享，互相学习！
2024-04-16 14:35:51
630
原创 详解 useMemo 和 React.memo 的作用
React 中的这两个函数都带有 memo，看着比较相似，但是作用和使用场景却不一致。memo 的英文含义为，可以理解为保存，记忆之类，从字面意思可以猜测到它的作用。可能没有实战的童鞋还容易把这两个搞混，但是这两个函数有着完全不一样的功能，也不需要拿来比较，千万不要搞混了，今天就带大家一起来详细的分析一下这两个函数的作用和使用场景！
2024-04-10 08:47:19
1467
原创 前端 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
5967
1
原创 详解 WebWorker 的概念、使用场景、示例
WebWorker 是 HTML5 新引入的一种技术，旨在为 Web 内容在后台运行脚本提供一种简单的方法。这样可以允许将一些大量计算工作分配到后台线程中运行，而不产生浏览器不响应或重新渲染的问题，从而可以保证程序的顺畅运行。WebWorke r是一种在 Web 应用中实现多线程运行的技术，可以将耗费 CPU 的任务交给后台线程处理，避免阻塞主线程，从而提高Web应用的响应性能和用户体验。
2024-03-26 10:26:01
7706
2
原创 详解Router路由 Hash 和 History 两种模式
总的来说,无论是 Hash 模式还是 History 模式,Vue Router 都是通过监听相应的事件,并在事件发生时执行路由切换逻辑,从而实现单页面应用的 URL 导航。两种模式的主要区别在于监听的事件不同,以及 History 模式需要服务端配置支持。
2024-03-20 17:16:22
4362
原创 在连续请求过程中，如何取消上次的请求？
首先是第一次调用时为接口请求添加 AbortSignal参数之后在每次进入都判断是否存在实例，有的话直接取消掉取消只会针对还未完成的请求，已经完成的不会取消通过这样就可以达到我们每次都会使用最新的请求接口作为数据来源，因为后面的接口会将前面的干掉如果这道面试题这样给面试官回答，是不是很不错？
2024-03-18 16:34:01
1174
原创 面试官：自定义一个React hook，用于监听组件的重新渲染
我们在实现的时候可以先想一下，如果不是封装 hook，在组件内实现应该怎么做，进而将思路理清，然后将实现的代码再转化为 hook 即可。在这个案例中，需要理解 useEffect 的使用，主要是对 useEffect 依赖项不同情况的理解，包括有依赖项依赖项为空数组无依赖项三种情况。
2024-03-15 16:18:15
847
原创 前端图片预加载和懒加载
在说到对图片资源进行优化时，那就不得不提到图片预加载和图片懒加载，可能很多朋友都了解这两者，但是一直没有很清晰的概念，以及什么时候用，用在什么场景下，今天就来详细的了解一下吧！图片预加载是指在页面加载时，提前加载页面中需要使用的图片资源，将它们缓存在浏览器中。这样当用户需要查看这些图片时，就可以直接从缓存中获取,减少等待时间,提升用户体验。通过 JS 创建 Image 对象，设置其 src 属性为要预加载的图片URL，浏览器会自动下载这些图片资源并缓存在本地。
2024-03-15 15:47:14
1730
原创 为什么 Vite 速度比 webpack 快？
通过使用 export 和 import 语句，ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时，开发者实际上是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（除IE外）均支持ES Modules，并且可以通过在script标签中设置type="module"来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。
2024-03-12 09:13:03
558
原创 详解 useEffect return 内外的代码执行顺序
当 useEffect 被再次执行时会先清理副作用执行 return，再执行 return 之外的，可以理解为只要 useEffect 被再次执行，都会执行 return当组件销毁时，不管是否有依赖项，useEffect 的 return 都会被执行去清理副作用。
2024-02-29 16:49:04
877
原创 Rem 自适应原理与应用
实现 rem 单位自适应，需要借助 postcss-pxtorem 这款插件将 px 转换为 rem，需要检测窗口的变化去设置根元素的字体大小，从而实现 rem 自动计算，实现自适应。
2024-02-26 17:11:02
2921
原创 使用 Next.js 连接 mysql 数据库
首先在 Next 中创建好接口文件，接口文件的模式按照 Next 所提供的接口格式进行接口配置，最后在页面中直接使用接口路径使用即可。以上就是如何使用 Next 框架实现一个简单的后端接口。
2024-02-20 16:09:42
5011
原创 使用 Nuxt 构建简单后端接口及数据库数据请求
首先在 Nuxt 中实现后端接口数据请求，然后创建好接口文件，进行接口配置，最后在页面中使用 asyncData 函数进行接口请求即可。以上就是如何使用 Nuxt 框架实现一个简单的后端接口。
2024-02-18 16:52:15
3242
原创 如何在 React 中实现全局路由守卫？
在 react 中实现路由守卫和 vue 不同，vue 可以使用内置的前置路由守卫函数，react 需要自己实现，不过原理大致相同。记得对可能造成死循环的路径进行判断，然后返回当前页面即可，否则使用不当可能会造成死循环。另外路由守卫需要根据项目中的需求进行专门的“定制”，以上的代码可能适合我的项目，那如果你也想实现自己的路由守卫，可以借助作者的思路，希望可以帮助到你。当然如果有觉得作者哪里写的不对的地方，大家也可以在评论区指出来，咱们一起交流进步！
2024-02-02 16:44:03
1899
1
原创 Vue 中如何模块化使用 Vuex
在个人小项目当中，不使用模块化没什么问题，但是在公司或者大型项目下就需要使用模块化管理，使用模块化有利于。在需要访问或修改状态的组件中，你可以使用Vuex提供的辅助函数。假设你有两个模块，一个用于管理用户信息，另一个用于管理商品信息。
2024-01-23 19:36:32
588
原创 Vue 中 name 属性的作用
在实际开发中，如果组件没有涉及递归调用，name属性并不是必须的。但是，为了更好地组织和调试代码，给组件设置一个有意义的name是一个良好的实践。另外，使用name属性还可以在Vue开发工具中更容易地定位组件。在浏览器的开发者工具中，你可以通过检查Vue组件实例的属性来获取组件的名称。
2024-01-19 15:29:33
674
原创 详解 React 常用的一些钩子函数（对比vue）
在React中，钩子函数是处理状态、副作用和上下文等方面关键的工具。本文将以Vue的视角对React中常用的钩子函数进行详细对比和学习，帮助你更好地理解这些工具的使用和优势。通过对比学习，你将能够更快速地掌握React的钩子函数，并在React和Vue之间更流畅地切换。提升你的前端开发技能，深入了解这两个流行框架的异同。
2024-01-18 17:41:09
1150
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人