- 博客(13)
- 收藏
- 关注
RSS订阅原创 Vue 缓存Hook：提高接口性能，减少重复请求
在开发 Web 应用时，我们经常会遇到需要重复调用接口的场景。例如，当用户频繁刷新页面或进行某个操作时，我们可能需要多次请求相同的数据。这不仅会增加服务器负担，还会导致用户体验下降。为此，我们可以使用缓存机制来优化这一问题。本文将教你一步一步实现一个功能较完善的Vue缓存Hook（钩子函数），它可以帮助我们减少接口的重复调用，提高应用性能。这个Hook是一个基于Vue响应式系统的缓存工具，它可以帮助我们轻松地在组件之间共享和管理缓存数据。
2024-01-09 15:43:24
2086
1
原创 Vue实现JSON字符串格式化编辑器组件
1、自动补全输入”(“、”{“、”[“将会自动补全另一半2、自动删除删除括号时也会自动删除另一半3、括号匹配点击括号会高亮另一半括号，方便定位4、支持ctrl+z撤销和ctrl+y重做功能5、编辑器根据字符串的换行计算行号并展示这个JSON编辑器不仅能够让你方便地格式化JSON字符串，还能帮你去掉不必要的空格。而且，它的全屏功能让编辑更加顺畅。最酷的是，它还能实时告诉你格式化的进度，如果遇到问题了，控制台会详细告诉你哪里出错了，这样你就能快速找到问题并解决它。
2024-01-02 18:31:51
2453
原创 谷歌浏览器控制台必会技巧
可能大家的电脑中都已安装了截图工具，但有时我们希望能捕获网页上的全部内容，包括那些在可视区域之外的部分，如滚动条下的内容。当使用第三方库的一些有hover态的组件时，使用此方法没用效果，例如ElementPlus的Tooltip 文字提示组件，由于它实现hover效果的方式可能并不直接依赖于元素的hover属性，这就需要我们采用断点调试的方式来进行监听。3、在控制台顶部点击“元素”按钮，选择处于暂停状态的hover元素，这样就可以成功定位到实现hover效果的元素。此外也可以设置截图的快捷键。
2023-12-29 15:40:28
1108
1
原创 JavaScript实现Sleep函数
在异步编程领域，选择合适的工具对于编写高效、可维护的代码至关重要。对于简单的延迟操作，setTimeout提供了直接且易于理解的解决方案。然而，当涉及到更复杂的异步流程，如顺序执行或错误处理时，Promise和async/await则成为了更强大的工具。尽管它们可能需要更多的学习和理解，但它们提供了更加结构化和可读的代码，从而提高了代码质量和开发效率。因此，根据具体需求和场景，选择最合适的异步处理方法对于成为一名高效的开发者至关重要。
2023-12-23 11:10:26
2752
1
原创 记忆函数—前端显著提高性能和响应速度的神器
记忆函数和闭包是 JavaScript 中非常强大和实用的特性。记忆函数通过闭包实现，可以避免重复计算，提高程序的性能和响应速度，尤其在处理大量数据或频繁调用函数的情况下非常有用。闭包则可以让函数记住并访问其词法作用域，即使函数在其词法作用域之外执行，这一特性为 JavaScript 的函数编程提供了极大的灵活性和表达能力。理解和掌握这两个概念，对于深入学习和应用 JavaScript 来说非常重要。
2023-12-15 16:26:38
261
原创 超简单的原生Hmtl实现元素拖拽交换顺序
相信大家在进行项目开发时都会遇到元素拖拽交换顺序的需求，要实现这个需求有很多种方式，可以通过外部组件，也可以通过原生的draggable方法，此片文章将介绍一下draggable的使用，无需任何外部组件。
2023-12-14 17:55:33
807
2
原创 CSS实现水平垂直居中的几种方法
作者：🤶马可家的菠萝在我们日常开发中，会经常涉及到元素水平和垂直居中的需求，而元素水平和垂直居中是实现美观布局的重要手段。本文将介绍几种常见的实现水平和垂直居中的方法，并分析各自的优缺点，帮助大家更好地掌握这一技能。元素示例综上所述，Flex布局和Grid布局在现代浏览器中表现优秀，是更推荐的选择。而行内元素方式、绝对定位+margin:auto方式、绝对定位（已知宽高）方式和Table布局方式在特定情况下可能适用。绝对定位（未知宽高）方式在实际应用中较少使用。
2023-12-08 15:21:58
1130
1
原创 Vue实现高自由度的自定义拖拽指令
在我的一个项目中有很多自定义的弹框，它们都需要可以随意拖拽，因此我封装了一个vue的自定义指令去实现，只要在需要拖动的元素上加上此指令即可变成可拖动元素。该组件除了可以让元素随意拖动，还能指定鼠标拖动元素上哪个区域才能拖动。该拖拽功能的实现原理主要是通过鼠标事件监听，计算鼠标与目标元素之间的距离，然后在鼠标移动时更新元素的位置。在鼠标释放时，清除相关的事件监听，结束拖拽操作。这种拖拽功能的实现方式简洁明了，易于理解和使用。可以根据实际需求，灵活运用在网页开发中。
2023-12-07 10:10:39
1358
原创 Vue实现全局提示组件
在Web开发中，用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下，全局弹框提示组件成为了一个非常有用的工具。Vue.js，作为当前最受欢迎的前端框架之一，为创建灵活、可复用的弹框组件提供了强大的支持。本文将介绍一个简单而强大的全局弹框提示组件，并探讨它是如何实现的。这个组件的实现原理很简单，但是它在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果，使得弹框在显示和隐藏时都能给用户带来良好的视觉体验。
2023-12-05 17:50:16
2294
2
原创 前端实现带商店和设置的贪吃蛇大作战
此游戏的玩法是控制蛇吃食物并躲避地雷，地雷会随着时间增加越来越多，吃到食物则可加分并减少场上的一颗地雷。分数可以在商店购买物品和属性。在游玩时不要光顾着吃食物哦，如果你撞到了地雷则游戏直接结束，不过，如果你在商店购买了“宝珠”则可以抵消一次死亡。如果觉得难度有点大可以在游戏中按下ESC键可，进到设置界面中关闭地雷功能vuejs+tshtmlcss。
2023-12-04 20:38:30
344
1
原创 ES6常用十大特性详解
随着 JavaScript 语言的发展，ES6（ECMAScript 2015）带来了许多新的语法特性和语言特性。这些特性使得 JavaScript 更加简洁、易读，提高了开发者的工作效率。本文将详细介绍 ES6 常用的几个新特性，并通过代码示例进行解释和说明。
2023-11-30 11:22:00
940
2
为什么前端拆包后性能降低了？
2024-01-29
TA创建的收藏夹 TA关注的收藏夹
TA关注的人