- 博客(247)
- 资源 (12)
- 收藏
- 关注
RSS订阅
原创 100 行代码打造小而美的 uni-app 请求库
在开发 uni-app 项目时，我们经常需要对接后端接口进行数据请求。虽然 uni-app 框架本身提供了用于发起请求，但在实际项目中，我们往往会封装一些请求库来简化请求的操作，提高代码复用性和可维护性。本文将介绍基于实现一款小而美的请求工具，通过大约 100 行代码的实现，为 uni-app 项目打造一个简洁高效的请求库。
2025-03-10 14:31:01
1945
原创 最全攻略！涉及DeepSeek-R1模型本地部署、免费满血版DeepSeek推荐！
除了上述介绍的两个工具使用 DeepSeek 以外，还可以集成到我们开发编辑器里面，作为一个前端开发人员，VSCode 重度使用者，怎么能缺少了它呢，接下来以 VSCode 为例，看一下如何集成 DeepSeek。使用过 Cursor 工具的开发者应该了解它的强大，它是一款专为程序员打造的新一代 AI 编程助手，它目前不仅支持了 DeepSeek R1，同时也支持 DeepSeek V3 模型。现在它开始思考，您可以看到速度相当快，当然这主要取决于您的电脑配置，配置越好，速度越快。这就是我们部署到本地的。
2025-02-17 10:15:08
2093
原创 ECharts 海量数据渲染性能优化方案
本篇文章将从实践出发，深入探讨 ECharts 渲染十万级数据的性能优化方案，通过实际案例和经验总结，探讨如何提升大规模数据可视化的渲染效率和用户体验。
2025-01-21 13:20:14
2814
原创 ECharts 地图下钻实践：实现一个完整的省市区地图下钻功能
地图下钻（Drill-down）是一种常见的高级交互功能，可以使用户能够深入地图的不同层级，查看更加详细的地理数据，帮助用户逐层深入地查看不同区域或层级的数据分布情况，极大地增强了数据可视化的深度和用户体验。
2024-12-23 13:35:24
3939
1
原创 ECharts 鼠标框选方案：实现鼠标自由刷选区域，定向放大图表（文末附源码）
通过以上流程性的介绍和学习，按照顺序仔细阅读的话，相信大家对于实现通过鼠标框选区域，放大数据图表的功能有一个清晰的思路，主要有两种方案进行选择，如果需要快速的使用刷选功能而尽量少的改动代码，就使用方案一：使用toolbox配置dataZoom区域放大组件，简单快捷，使用方便。如果不仅想要刷选区域放大，还需要对刷选区域进行统计数据，则需要定制使用brush刷子，但同时要注意代码的性能优化。本篇文章到这就结束了，希望能够帮助你更好地理解和使用 ECharts，以上为项目经验所得，如果有任何错误，敬请指出!
2024-12-17 09:59:09
2749
1
原创 VOLTA：更优秀的项目级 Node.js 版本管理工具
Volta 极大地简化了跨项目管理 Node.js 版本的过程，通过使用 Volta 管理项目级别的 Node.js 版本，我们可以确保每个项目都有一个干净且独立的开发环境。这不仅有助于避免版本冲突问题，还能提高团队协作效率，确保所有开发人员都在同一环境下进行开发工作。因此，无论是对于个人开发者还是团队协作，都能显著提高开发效率和项目稳定性。自动化: Volta 自动检测并安装项目所需的 Node.js 版本，无需手动切换。一致性: 确保所有团队成员使用相同的 Node.js 版本，减少潜在的错误。
2024-12-12 14:29:52
2179
2
原创 uni-app 扫码插件推荐：基于支付宝 mPaaS 扫码组件开发，支持 Android 和 iOS
mPaaS 扫码组件是支付宝的扫码组件，目的是可以让我们的 APP 拥有像支付宝一样的扫码体验，识别速度、识别率远超开源扫码。扫码组件完全免费提供使用，但是接入时需要在阿里云上进行注册开通并添加项目。
2024-10-22 11:37:27
4079
3
原创 号外！独立开发的软考刷题小工具，助力软考和 PMP 等级考试
总结一下我在开发这款小程序时所用到的一些技术栈，主要是基于 uni-app + uniCloud 来开发的，不得不说，uni-app 用来开发小程序太便捷了！
2024-09-03 09:58:38
1617
原创 【超详细】从 0 到 1 打包你的 uni-app 应用：安卓篇打包指南
在当前移动应用开发的大环境下，uni-app 作为一种使用 Vue.js 开发多平台应用的框架，为开发者提供了快速构建跨平台应用的能力。本文将为你介绍如何将 uni-app 项目打包成安卓应用，让你的应用在安卓设备上运行并上架应用市场。确保将 HBulider X 升级到3.2.15+版本，否则 App 将会出现问题App 提交云端打包时请勾选“**GooglePlay(AAB)**”渠道，生成.aab 格式的应用不能直接下载 apk 方式安装应用，需引导用户到安装不能存在动态加载代码行为。
2024-08-30 14:15:21
3511
1
原创 整理一个非常强大的 CSS 选择器：has()
你有没有想过使用CSS选择器来检查父元素中是否存在特定的元素？例如，如果一个卡片组件中有图片，就给它添加一个。这以前在CSS中是无法实现的，而全新的 CSS 选择器:has就可以帮助我们选择包含特定元素的父元素。下面来看看这个全新的 CSS 选择器吧！在CSS中，我们无法根据元素中是否存在特定的元素来设置父元素的样式，要想实现这一点，就必须创建CSS类，并根据需要进行类的切换。来看下面的例子：这里有两种卡片：包含图片和不包含图片。/* 有图片的卡片 */.card {gap: 1rem;
2025-04-25 14:50:39
725
原创 告别冗长的 if…else，掌握优化条件语句的技巧
在日常的代码编写过程中，我们经常会使用条件语句（if...else）来控制程序的流程。然而，当条件语句过多时，我们很容易陷入代码难以理解和维护的困境中。重复的逻辑和冗长的代码会增加我们阅读和修改代码的难度，同时也会影响程序的性能。为了更好地优化条件语句，提高代码的可读性和可维护性，我们可以使用一些小技巧来简化和精简我们的代码。本文将分享几个优化条件语句的小技巧，帮助开发者更高效地编写代码。通过上述优化条件语句的小技巧，我们可以改善代码的可读性和可维护性，提高程序的性能，减少开发和维护成本。
2025-04-23 10:23:10
722
原创 【全解析】深入理解 JavaScript JSON 特性操作和实用技巧
来将 JSON 对象转换为字符串。它支持第二、三个参数。我们可以借助第二三个参数来格式化 JSON 字符串。当 JSON 中的内容很多时，想要查看指定字段是比较困难的。的第二个属性来获取指定值，只需传入指定一个包含要查看的属性。这里的 2 其实就是为返回值文本在每个级别缩进 2 个空格。下面来看看 JSON 有哪些实用技巧。
2025-04-23 09:47:18
384
原创 【全解析】深入理解 JavaScript JSON 数据解析
JSON 全称为 JavaScript Object Notation，是一种轻量级的数据交换格式。它是 JavaScript 中用于描述对象数据的语法的扩展。不过并不限于与 JavaScript 一起使用。它采用完全独立于语言的文本格式，这些特性使 JSON 成为理想的数据交换格式。易于阅读和编写，同时也易于机器解析和生成。所有现代编程语言都支持这些数据结构，使 JSON 完全独立于语言。
2025-04-22 10:29:06
899
原创 React 单一职责原则：优化组件设计与提高可维护性
单一职责原则的定义是每个类应该只有一个职责，也就是只做一件事。这个原则是最容易解释的，因为我们可以简单地将其理解为“每个功能/模块/组件都应该只做一件事”。在 React 组件中，单一职责原则要求将组件的功能分解为更小的部分，每个部分只负责一个特定的职责。这样做的好处是，当需求发生变化时，只需要修改与该职责相关的部分，而不会影响整个组件。这提高了代码的可维护性和可测试性。在所有这些原则中，单一职责原则是最容易遵循的，也是最有影响力的一项，因为它极大提高了代码的质量。
2025-04-22 10:23:18
1147
原创 编程效率翻倍！推荐使用智能进化版的 VS Code
使用 Cursor 一定要用好这四个键：Tab⌘ K⌘ L⌘ I提高编码效率：Cursor 的智能代码补全和实时建议功能显著加快了编码速度，减少了在编写代码时的思考时间。减少 bug 率：通过实时的错误检测和智能重构，Cursor 能够及时捕捉拼写和语法错误，提升代码的质量和可靠性。攻克疑难问题：对于复杂困难的编码问题，Cursor 能够提供一下解决问题灵感，协助快速实现问题，解决疑难杂症。提升学习效果：Cursor 提供的即时反馈和解释功能，有助于理解编程概念和最佳实践，加速学习过程。
2025-04-21 10:42:18
1788
原创 如何编写单元测试
关于断言方法有很多，这里仅摘出常用方法，如果你想了解更多，你可以去 Jest 官网 API (https://www.jestjs.cn/docs/expect) 部分查看。但是需要注意的是：我们必须使用一个函数将被测试的函数做一个包装，正如下面 getIntArrayWrapFn 所做的那样，否则会因为函数抛出错误导致该断言失败。不支持 async await 导致的，这时候就需要对 babel 配置进行增强，可以安装。下面我们以 fetchEnv 方法作为案例，编写一套完整的单元测试用例供读者参考。
2025-04-21 10:27:18
362
原创 前端单元测试实战：如何开始？
单元测试覆盖率是一种软件测试的度量指标，指在所有功能代码中，完成了单元测试的代码所占的比例。单元测试覆盖率 = 被测代码行数 / 参测代码总行数 * 100%
2025-04-18 17:28:55
1018
原创 前端为什么需要单元测试？
对于现在的前端工程，一个标准完整的项目，通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够，因此我写了这篇文章，一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例，让你掌握写单元测试实践能力。
2025-04-18 17:27:18
797
原创 使用 useRef 优化 React 性能问题
如何使用 useRef 修复 React 性能问题？通过一个实际项目中的案例应用考虑如何更好的使用 useRef 这一钩子函数？Refs 是 React 中很少会使用到的特性。如果你已经读过了官方的 React Ref Guide，你会从中了解到 Refs 被描述为重要的 React 数据流的 “逃生舱门”，需谨慎使用。Refs 被视为访问组件的基础 DOM 元素的正确方法。伴随着 React Hooks 的到来，React 团队引入了Hook，它扩展了这个功能：useRef()
2025-04-18 17:18:49
812
原创 React 开放封闭原则详解，构建可扩展的应用
开放封闭原则是面向对象编程的一个重要原则，也适用于 React 框架。通过遵循开放封闭原则，我们可以编写可扩展和可维护的 React 应用程序。组件化开发、Props 和 State 的使用、生命周期方法等技术都是 React 中实现开放封闭原则的实践。
2025-04-17 10:05:01
689
原创 React 设计艺术：如何精确拆分组件接口，实现接口隔离原则
在实际开发中，我们应该注重代码的设计和组织，提高代码的可读性和可复用性，并避免不必要的依赖关系。通过将接口拆分成较小、单一的组件，并通过组合的方式将它们组装起来，我们实现了接口的隔离。这样一来，不同的组件在使用时不会依赖不需要的功能，从而提高了代码的可维护性和可扩展性。总结起来，React 中的接口隔离原则可以通过组件的拆分和组合，或者使用 Hooks 来实现。接口隔离原则主张最小化系统组件之间的依赖关系，使它们的耦合度降低，从而提高可重用性。将功能相关的组件接口拆分成独立的组件，通过组合的方式进行组装。
2025-04-17 10:02:08
870
原创 一文了解流媒体传输协议HLS，FLV的功能和特点
HLS和FLV是常见的流媒体传输协议，各自具有特定的功能和特点。HLS适用于在线视频点播，支持自适应比特率调整和广泛的设备兼容性；FLV适用于实时音视频流的传输和播放，支持低延迟的直播场景，但在安全性和兼容性方面相对有限。选择合适的协议取决于具体的应用需求和平台兼容性要求。
2025-04-16 11:44:42
374
原创 uni-app 实现好看易用的抽屉效果
分享一个在有题记小程序中的抽屉组件，使用 uni-app 实现一个完整的抽屉效果，通过侧滑的效果打开一个菜单或额外的内容区域。
2025-04-16 10:54:52
1841
原创 解析 WebSocket 协议的基本原理
本文介绍了 WebSocket 协议的基本原理、建立连接过程和数据交互方式。相比传统的 HTTP 协议，WebSocket 具有更高效、实时的数据传输能力，广泛用于实时通信和推送通知等应用场景。在实际开发中，WebSocket 可以与后端服务器配合，实现实时的数据传输和交互。合理使用 WebSocket 可以提升 Web 应用的用户体验，满足实时通信的需求。了解 WebSocket 协议，并在实际的开发中灵活运用 WebSocket 来实现实时通信功能。
2025-04-10 13:26:07
877
原创 uni-app 高效开发小程序技巧：自动化切换环境变量
uni-app 作为一个开发利器，方便了广大开发者，尤其是在开发小程序的时候，今天给大家分享一个使用 uni-app 高效开发小程序的技巧，如何自动化切换环境变量，无缝适配微信小程序的各种版本！
2025-04-10 13:19:24
1127
原创 WebSocket 的错误处理与断线重连
在这个时候，就需要我们的心跳包了，用于维持长连接，保活。事实上这是为了保持长连接，至于这个包的内容，是没有什么特别规定的，不过一般都是很小的包，或者只包含包头的一个空包。第二次客户端定时再次发送请求依旧携带唯一标识、以及时间戳，服务端到 db 或者缓存去查询改请求的唯一标识，如果存在就把上次的时间戳拿取出来，使用当前时间戳减去上次的时间，这时候我们就需要知道服务端设置的超时时长是多少，在小于超时时间内发送心跳包，有 2 中方案:一种是客户端主动发送上行心跳包，另一种方案是服务端主动发送下行心跳包。
2025-03-24 10:36:27
1310
原创 100 行代码打造小而美的 uni-app 请求库（二）
之前通过一篇文章的介绍，详细说明了在 uni-app 框架中，使用大约100 行代码打造小而美的 uni-app 请求库，基于，支持多种运行环境，包括浏览器 H5、小程序、APP 等各端。100 行代码打造小而美的 uni-app 请求库（一）因为我已经用 uni-http 开发了许多个成型的 APP、H5、 及小程序，Android 和 iOS 均已正常上线应用商店，因此可以证明，它的兼容性是良好的。本篇文章我们继续聊聊 uni-http 这个请求框架，并主要实现以下功能：支持处理请求的。
2025-03-24 09:26:44
1167
原创 HTTP 各版本协议简介
事实上，它并不能保证数据包一定会到达，因此，如果数据完整性对应用实例很重要并且使用的是 HTTP/3，则将必须构建相应的机制来确保消息排序和完整的到达。尽管有这些进步，如今由于移动设备的大量使用，互联网流量的爆炸式增长使得 HTTP/2.0 难以提供流畅、透明的网页浏览体验，特别是在实时应用程序及其用户需求日益增长的情况下。协议，是万维网的主要通信方式。HTTP/1.1 是 Web 浏览器和服务器中最广泛支持的版本，它的到来是向前迈出的一大步，因为它实现了一些非常重要的优化和增强，从持久和管道连接到新的。
2025-03-13 09:48:03
890
原创 ECMAScript 私有字段
x = 0;this.#x++;super();render() {第一眼看到#x是不是觉得很别扭，目前 TC39 委员会以及对此达成了一致意见，并且该提案已经进入了 Stage 3。那么为什么使用符号，而不是其他符号呢？TC39 委员会解释道，他们也是做了深思熟虑最终选择了 # 符号，而没有使用 private 关键字。其中还讨论了把 private 和 # 符号一起使用的方案。并且还打算预留了一个 @ 关键字作为 protected 属性。
2025-03-13 09:45:40
315
原创 有效封装一个 WebSocket 供全局使用
在现代 Web 应用中，实时通信已经成为越来越重要的一部分。而 WebSocket 技术的出现，使得实时通信变得更加高效和便捷。WebSocket 协议是一种基于 TCP 协议的双向通信协议，它能够在客户端和服务器之间建立起持久性的连接，从而实现实时通信。在前端开发中，为了更好地利用 WebSocket 技术，我们通常会对其进行封装，以便于全局调用并根据自己的业务做不同的预处理。本文将介绍如何有效封装一个 WebSocket 供全局使用，并根据自己的业务做不同的预处理，实现更方便的调用，减少重复代码。
2025-03-12 09:27:06
741
原创 关于 Vue 3.0，你是使用 ref 还是 reactive？别再用错了
reactive 重新赋值丢失响应是因为引用地址变了，被 proxy 代理的对象已经不是原来那个所以丢失响应了，其实 ref 也是一样的，当把.value 那一层替换成另外一个有着.value 的对象也会丢失响应 ref 定义的属性等价于 reactive（{value:xxx}）另外说使用 Object.assign 为什么可以更新模板。
2025-03-12 09:18:50
789
原创 Web Workers 客户端 + 服务端应用
子进程和工作线程的选择取决于具体的应用场景。在 Node.js 中，除了使用工作线程外，还可以使用子进程来实现类似的功能。它还提供了兼容模式，可以填充 Node.js API，以便可以使用该运行时的工作线程语法。1.创建一个新的 JavaScript 文件，其中包含要在工作线程中运行的代码（耗时任务）。Node.js 在版本 10 中实现了类似 Web Worker 的功能，称为 Worker thread（工作进程）。在服务端，一个单独的 Node.js 脚本文件可以同时包含主线程和工作线程的代码。
2025-03-11 09:48:40
982
原创 从零开始认识 Web Workers
多线程是现代软件开发中用于增强应用的性能和响应能力的重要技术。然而，JavaScript 是一门单线程语言，它天生是不支持多线程的。为了克服这一限制，引入了 Web Workers。本文就来探讨 Web Workers 对 Web 多线程的重要性，以及使用它们的限制和注意事项。Web Workers 是现代 Web 开发的一项强大功能，于 2009 年作为 HTML5 规范的一部分引入。它们旨在提供一种在后台执行 JavaScript 代码的方法，与网页的主执行线程分离，以提高性能和响应能力。
2025-03-11 09:46:42
973
原创 如何规范的升级项目的 NPM 包
在日常工作中，当组件跨项目使用时，我们往往会选择把组件抽成 npm 包。那么在 npm 开发以及发布的过程中有什么需要注意的事项吗？本文将从我自己的角度，来为大家介绍一下我认为的一些需要大家注意的点。
2025-03-10 14:38:52
750
原创 追求最佳的用户体验：探究前端响应式网页设计
多屏时代到来了，手机、平板、电脑、投影，各式各样的终端，出现再大家的生活中。最近一句话比较火，世界上最远的距离是我在你面前，而你却在玩手机。多屏时代的来临，网页设计师不得不面对一个问题，如何让我们做出的网站能很好的呈现在终端上呢？这就是我们要谈的响应式WEB。这里我们主要从两个方式来说：响应式WEB设计(Responsive Web Design)响应式WEB开发(Responsive Web Development)
2025-02-20 09:40:42
665
原创 前端开发中移动优先的响应式设计
其实是否移动优先也要考虑具体的实际情况，相信大家现在手上一般都是有做好的 PC 项目，想要改为响应式，要移动优先是不太可能的了。其实不管道路是从大到小还是从小到大，最终达成的结果是应该是差不多的结果，那就是一个在手机端还是桌面端表现都非常好的网站。但是，”移动优先“的策略的确越来越被大家接受为响应式设计的最佳实践了。所以以后再做项目或者练手的时候，一定要推崇移动优先。
2025-02-20 09:38:28
1081
原创 响应式设计的核心技巧：媒体查询（ media queries）
因为新的设备不断涌现，各种宽度都会有的。具体的做法是，还是本着移动优先的思想，先考虑最小宽度的设备，例如 iphone6 ，来进行页面布局。虽然已经知道了媒体查询的语法，逻辑操作符的用途，再来学习一下，真正起作用的媒体特征（ media features ）。only 逻辑操作符是一个新出现的运算符，使用 HTML4 算法的浏览器并不支持它，这样一些较老的，不支持媒体查询的浏览器就不能使用它所给定的样式了。不幸的是，IE 8 及其之前的浏览器，还有其它一些比较老的浏览器，都不支持媒体查询。
2025-02-19 10:01:27
460
原创 了解几个 HTML 标签属性，实现优化页面加载性能
async 属性：用于异步加载脚本文件，适用于独立运行的脚本，可以提高页面加载性能。defer 属性：用于延迟执行脚本文件，适用于依赖其他资源或 DOM 元素的脚本，可以保证按顺序执行。preload 属性：用于预加载必需的资源，如脚本、样式表、字体等，以加快后续加载和渲染过程。prefetch 属性：用于预先获取未来可能需要的资源，如下一页的 HTML 文件、图片、视频等，以提高用户访问时的加载速度。
2025-02-19 10:00:04
1489
1
原创 浏览器 viewport 视口解析
但是不同的笔记本的像素密度其实是不一样的，比如我的笔记本的硬件像素是：2560x1700。这个默认行为是我们在做响应式网页设计的时候不希望看到的，所以在一般的响应式页面中，第一步就是添加上面这一行，来禁用手机的这种默认缩放行为。简单来说，dip 是咱们在做设计的时候真正要关心的，而设备真正的硬件像素值一般是不需要关心的。：显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。：手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。
2025-02-18 09:49:09
480
原创 常见的几种跨标签页通信方案总结
BroadCast Channel：使用 Broadcast Channel API 可以在不同的浏览器上下文之间进行消息广播和接收。通过创建一个广播频道，并在不同的标签页中监听该频道，可以实现跨标签页通信。Service Worker：Service Worker 是一种在浏览器后台运行的脚本，可以拦截和处理网络请求。通过在 Service Worker 中监听和处理消息事件，可以实现跨标签页通信。
2025-02-18 09:45:57
1093
Android Fragment嵌套ViewPager，ViewPager嵌套多个Fragment
2016-03-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人