- 博客(190)
- 收藏
- 关注

原创 如何优化 Vite 项目中的 Lodash 引入:从 Tree Shaking 到自动化测试
在现代前端开发中,优化代码的体积和构建速度是非常重要的。特别是在使用 Vite 作为构建工具时,如何正确地处理 Lodash 这种通用的工具库,变得尤为关键。在本文中,我将分享我们如何在 Vite 项目中优化 Lodash 的引入方式,并确保优化后的代码能够正常运行。我们分析了几个优化 Lodash 引入方式的解决方案,并最终决定采用更适合我们项目需求的方案。
2024-08-16 19:16:29
2024

原创 vue3的自定义hooks
Vue3 的 hook函数的出现,可以让我们更好抽离重复逻辑,聚合相同的功能。它与vue2 中的mixins有点类似,但是相对 mixins 而言, hooks 函数 更清楚复用功能代码的来源,更清晰易懂。使用 Vue3 的组合 API 封装的可复用,高内聚低耦合。1、具备可复用功能,才需要抽离为 hooks 独立文件2、函数名/文件名以 use 开头,形如: useXX3、引用时将响应式变量或者方法显式解构暴露出来;vue3 hooks 现在使用比较广泛,介绍基本概念与原理。
2024-01-11 16:57:04
1950
1

原创 前端本地覆盖资源(local override)调试
Chrome 65 中的开发者工具将包含以下新功能:本地替换新的无障碍工具更改标签页新的搜索引擎优化 (SEO) 和性能审核Performance 面板中的多个录制内容使用 worker 和异步代码执行可靠的代码单步调试本篇文章主要学习与实践下本地替换这个功能提示:以下是本篇文章正文内容,下面案例可供参考官网详细描述。
2024-01-11 09:40:18
1634

原创 vue3项目使用pako库解压后端返回zip数据
外部接口返回一个图片数据是经过zip压缩的,前端需要把这个数据处理成可以显示的图片。大概思路:zip解压-> 转换为base64数据 -> img标签显示。pako详细描述🚀 npm 直达pako 是一个流行的 JavaScript 库,用于在浏览器中进行数据压缩和解压缩操作。它提供了对常见的压缩算法(如 Deflate 和 Gzip)的实现,使开发者能够在客户端上轻松进行数据压缩和解压缩,以减少数据传输大小和网络带宽消耗。
2023-12-29 18:03:04
2565

原创 Vue3+hooks快速接入Lodop打印插件
上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件,这篇讲讲vue3如何集成lodop组件。在项目的hooks 文件夹下创建一个hook。根据自己的项目,按实际情况命名。这里是 useLodop.ts// 引入上一步骤创建的lodopfuns})try {} else {rawRow: {}) => {if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')// 根据打印的类型,获取设置的打印机字符串。
2023-12-15 14:22:59
2893
4
原创 Unix 与 Linux 深度应用与对比分析
希望通过本文的详细介绍,能够让您对Unix和Linux的深度应用与对比有更为深入、全面的理解。在实际的应用过程中,依据具体的需求选择恰当的操作系统和开发方法,将有助于您更加顺利地实现业务目标。
2025-01-16 19:14:55
695
原创 啥!GitHub Copilot也免费使用了
最近,GitHub 给开发者们带来了一个好消息:他们的 AI 编程助手 GitHub Copilot 现在可以免费使用了!以前,每个月要花 10 美元才能享受的服务,现在对所有人开放了免费版本。哇哇哇!!之前试用了Cursor,但只有14天免费,当然也有无限续杯的方式。嫌麻烦的伙伴们,可以试一试这个GitHub Copilot废话少说,直接试用一下:1. 打开Vscode,安装以下插件后,登录github的账号。就可以开启 GitHub Copilot 之旅了。
2025-01-12 12:52:18
980
原创 Vscode配置Java开发环境
Java开发用的都是IDE,毕竟是神器。最近用的Cursor,是基于Vscode,这里就搭建Vscode开发Java的开发环境。
2025-01-03 10:16:41
691
原创 一步一步教你用 Pdf.js 把 PDF 变成 PNG 图像
Pdf.js 就像是一个 PDF 阅读器,但它不需要你安装任何插件,只要有浏览器就可以直接运行。它是 Mozilla(也就是 Firefox 浏览器的作者)开源的一个项目,目的是让开发者能够在网页上方便地展示 PDF 文件。而且,Pdf.js 还能将 PDF 文件的每一页渲染成图像,今天我们要做的就是把 PDF 转成 PNG 格式的图片,操作起来简单方便。是 JavaScript 中的一种类型化数组(TypedArray),专门用于存储和操作 8 位无符号整数的数组。
2024-12-03 18:30:32
1624
1
原创 全面解读 USB Key:定义、使用场景、加密技术及 Java 实现
USB Key(或 UKey)是一种基于 USB 接口的硬件安全设备,通常用于身份认证、数据加密以及数字签名。它内置加密芯片,用于存储用户的私钥、公钥和数字证书,所有加密操作均在设备内部完成,以确保密钥安全。USB Key 的核心优势在于其强大的安全性,结合公钥基础设施(PKI),广泛应用于金融、政务、企业内网等需要高度安全保护的场景。
2024-11-15 22:12:18
1130
原创 图像采集协议-TWAIN vs WIA vs ISIS vs SANE
TWAIN协议是一种用于图像采集设备(如扫描仪、数码相机等)与计算机之间的标准通信协议。为了更好地理解 TWAIN 协议,我们可以将它与其他常见的图像采集协议(如WIAISISSANE)进行比较。这些协议各自有优缺点和应用场景,适用于不同的硬件设备和系统。
2024-10-14 16:52:01
1306
原创 java库-lombok
Lombok是一个 Java 编译时注解处理库,通过减少样板代码(boilerplate code)来提高开发效率。它通过注解的方式帮助开发者自动生成常见的代码,如gettersetterequalshashCodetoString、构造器、日志等,而不需要手动编写这些重复性的代码。
2024-10-14 11:03:22
1011
原创 Java 常用语法糖及其对比总结
Java 中的语法糖使代码更简洁、更易读,同时在某些情况下提高开发效率和运行性能。下面列举了 50 个常用的语法糖,每条语法糖都详细比较了使用和不使用的代码,并解释了其优势。通过这些常用语法糖,Java 代码得到了极大的简化和优化,既提升了代码的可读性,也提高了开发效率。在实际开发中,合理使用这些语法糖可以有效减少样板代码,提升代码质量。
2024-10-11 10:30:28
805
2
原创 DBeaver的安装与使用
DBeaver 是一款广泛应用的数据库管理工具,支持多种数据库系统。以下是它的安装与使用方法。DBeaver 是一款功能强大且易于使用的数据库管理工具,尤其适合需要管理多种数据库类型的用户。无论是执行 SQL 查询、查看数据库结构,还是处理大规模数据,DBeaver 都是一个非常可靠的选择。DBeaver 官方文档。
2024-10-10 18:50:17
2297
原创 Java 环境变量的设置及其目的
通过设置JAVA_HOME和PATH,你可以使系统和工具方便地找到JDK,确保在开发和运行Java程序时不需要手动指定路径,从而提高开发效率。
2024-09-27 09:57:54
899
原创 828华为云征文|云服务器Flexus X实例|MacOS系统-宝塔部署Nuxt项目
基于云服务器Flexus X实例,部署Nuxt项目的过程很顺利,选择华为云服务器,意味着您将获得一个稳定而高效的云计算环境。想要购买服务器的同学可以关注下这次华为云828活动,趁着活动优惠挑选自己心仪的服务器!
2024-09-22 18:30:45
1167
原创 828华为云征文|华为云 Flexus云服务器X实例-选购到创建宝塔
华为云Flexus云服务器X实例,是由国家科技进步奖获得者、华为公司Fellow、华为云首席架构师顾炯炯牵头研发。它基于擎天QingTian架构、瑶光云脑、盘古大模型等根技术创新,是业界首款应用驱动的柔性算力云服务器,主要面向高科技、零售、金融、游戏等行业大多数通用工作负载场景,包括网络应用、数据库、虚拟桌面、分析索引、微服务、CI/CD等。从购买到配置再到登录实例再到搭建宝塔面板这个过程,整体的感觉还是非常丝滑的,体验很好的,选择华为云服务器,意味着您将获得一个稳定而高效的云计算环境。
2024-09-14 10:37:03
517
原创 performance.now() 和 Date.now()
和Date.now()是 JavaScript 中用于获取当前时间的两个不同方法,但它们的用途和特性有所不同。1. 概述: 返回一个精确到微秒(千分之一毫秒)的时间戳,用于精确测量时间间隔。Date.now(): 返回自1970年1月1日 00:00:00 UTC以来的毫秒数,用于获取当前的时间戳。2. 精度精度非常高,可以精确到小数点后三位,通常用于测量代码执行的时间。100.345表示自页面加载以来的时间是 100.345 毫秒。Date.now()精度相对较低,只精确到毫秒。
2024-08-28 11:50:04
665
原创 Window Performance API
Window Performance API 是一组浏览器提供的接口,用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标,从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳,通常用于计算精确的时间差。例如,你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
2024-08-28 11:47:02
2021
原创 pnpm-hoisting
pnpm的依赖管理方式与传统的npm和yarn有显著的不同,它采用了一种叫做hoisting(提升)和(内容可寻址存储)的策略来管理依赖。以下是对pnpm的 hoisting 依赖管理方式的详细解析。pnpm的 hoisting 依赖管理方式通过内容可寻址存储和符号链接大大提高了依赖管理的效率和可靠性。虽然这种方式在某些情况下可能带来一些兼容性挑战,但它也通过模块隔离和资源共享带来了巨大的优势。如果你正在处理复杂的依赖树或希望优化项目的依赖管理,pnpm是一个值得考虑的工具。
2024-08-15 09:16:32
789
原创 2024-08-13外语学习
Disgusting” 一词源于拉丁语 “gustus”,意为“味道”,加上否定前缀 “dis-” 形成了 “disgust”,意为“使失去胃口”或“使厌恶”。随着时间的发展,这个词演变成形容词 “flustered”,用来描述人在面对突发状况或压力时表现出的紧张、慌乱或不知所措的状态。随着时间的发展,这个词演变成 “revision”,用来描述对文本、计划或想法进行修改或校正的过程或结果。在 “disgusting” 中,“dis-” 表示“不”或“相反”的含义。让我们来分析一下这个词的词源和历史。
2024-08-13 16:06:52
833
原创 Nest.js 后端生态系统中常见的技术栈组合
Nest.js 是一个基于 TypeScript 的 Node.js 框架,它提供了一个高度可维护且易于扩展的架构来构建高效、可靠的服务器端应用程序。Nest.js 非常适合构建微服务架构,并且可以轻松地与其他技术和工具集成。
2024-08-12 23:21:12
856
原创 JavaScript-Object
在 JavaScript 中,Object是一个非常重要的全局对象,它提供了许多方法来处理对象。以下是Object。
2024-08-12 18:34:03
1218
原创 在 Vue 3 项目中使用 Element UI Plus <el-calendar>组件与时区处理
在 Vue 3 项目开发过程中,我们经常需要对 UI 组件进行定制以满足特定的业务需求。本篇技术博客将分享如何在 Vue 3 项目中使用 Element UI Plus 的组件来展示自定义内容,并实现页面跳转。同时,我们也会探讨如何处理时区问题,确保日期和时间的准确性。以下是使用组件并定制其内容的示例代码:// 假设 dataArr 是从 API 获取的数据 const dataArr = ref([ ]);// 处理点击事件,例如页面跳转 };
2024-08-08 18:54:14
1430
原创 理解 React Hooks:用例与实践
React Hooks 是 React 16.8 引入的一项强大功能,它们为函数组件引入了状态和其他 React 特性。以下是对 React 常用 Hooks 的详细介绍和使用指南。forwardRef与一起使用,可以自定义父组件通过 ref 访问的子组件内容。}));});return (forwardRef用于将 ref 转发到子组件。用于定义暴露给父组件的实例值。forwardRef 与 useImperativeHandle与vue3 中的使用比较。
2024-08-04 19:37:27
1102
原创 Node.js 根据表结构动态生成目标代码
在现代的前端开发中,使用 Vue3 搭配 Element Plus 进行组件化开发已经成为一种常见的实践。最近,我在一个项目中需要根据数据库表结构动态生成表格代码,这让我经历了一次从 MySQL 到 SQL Server 的旅程,并学习了如何使用 ejs 模版引擎来生成代码。在这篇博客中,我将介绍如何使用 mysql2/promise 和 mssql 库连接数据库,以及如何利用 ejs 动态生成代码。
2024-08-02 19:23:31
478
原创 TypeScript-Omit/Pick
类型在实际开发中非常有用,尤其是在需要从一个大的接口中提取特定属性时。Omit:通常用于创建一个没有某些属性的新类型,这在需要排除某些敏感数据或不需要的字段时很有用。Pick:通常用于创建一个包含特定属性的新类型,这在需要精简对象或传递特定属性集时非常有用。的字面意思可以理解为“送出”或“放置出去”,在英语中演变为“省略”或“遗漏”的意思。,并创建一个新的类型,该类型仅包含这些被选择的属性及其类型。的含义紧密相关,即从一个对象类型中“省略”某些属性。Pick:创建一个仅包含指定属性的新类型。
2024-07-25 17:49:44
1486
原创 TypeScript-Exclude
TypeScript 常用的类型 Exclude类型是一个非常有用的工具,可以帮助你在 TypeScript 中创建更精细和精确的类型。通过排除不需要的类型,你可以更好地控制你的类型系统,并使代码更加健壮和类型安全。
2024-07-25 15:20:17
452
原创 TypeScript-内置应用程序类型-Recode
学习TypeScript 内置应用程序类型在 TypeScript 中,Record是一个实用类型,它允许你基于一个键的联合类型和一个值的类型,来创建一个新的对象类型。接受两个类型参数:第一个参数K是键的联合类型,第二个参数T是所有键对应的值的类型。其中KeysUnion是一系列可能的键名的联合类型,ValueType是这些键所对应的值的类型。例如,假设你有一个键的联合类型Keys和一个值的类型Value,你可以使用Record创建一个类型,该类型表示一个对象,其键是Keys中的一个,值是Value。
2024-07-23 13:57:52
921
原创 ts检验-变量的类型不会包含 undefined的几种处理方法
那么为了处理 TypeScript 报错 “Argument of type ‘ApiFunction | undefined’ is not assignable to parameter of type ‘DelApiFunction’,Type ‘undefined’ is not assignable to type ‘DelApiFunction’”,你需要确保。在这个上下文中是存在的,可以使用 TypeScript 的非空断言操作符。你可以根据自己的业务逻辑来定义。赋一个默认值,确保它不是。
2024-07-17 16:46:34
630
原创 一文读懂:URL链接预览与下载的幕后机制
随着互联网的发展,我们经常在浏览网页时遇到需要下载或预览的文件。这些文件的处理方式在很大程度上取决于文件类型和服务器的配置。在本文中,我们将深入探讨URL链接预览与下载的幕后机制,了解浏览器如何处理文件的预览与下载,并分析相关技术细节。
2024-07-12 14:49:17
1577
原创 2024-07-09_外语学习
Routing Instruction对于确保货物能够安全、及时并符合所有相关规定地到达目的地非常重要。它不仅帮助协调不同物流环节,还能提高运输效率,减少误解和错误,确保客户满意度。在跨境电商的物流业务中,“Routing Instruction”指的是一组指示或指导,规定货物从起始地到目的地的运输路线和方法。
2024-07-09 15:27:22
1327
原创 2024-07-03_外语学习
拉丁语 serere “连接,链接,绑在一起”, series “行,链,系列,序列,继承”;servare(拉丁语,意为“保护,保存,观察”);在拉丁语中,“serere” 的派生词 “series” 意思是“一行”、“一列”或“一系列”,它描述了事物按顺序排列的状态。在现代英语中,“serial” 通常表示“连续的”、“系列的”或“连载的”,它可以作为形容词或名词使用。在跨境电商中,SSCC的应用可以显著提高供应链的透明度和效率,因为它允许自动化的追踪和管理,确保货物在国际运输过程中的准确性和安全性。
2024-07-03 15:26:27
996
原创 2024-07-01_外语学习
全球化的环境下,外语,也是生活的一部分。其中特别是单词,背了忘,忘记背。主要是没实际运用,死记硬背,应付下应试教育还可以。所以后面的单词记忆,用理解,词源,结合生活,代码应用等的方式来记忆。
2024-07-01 18:25:25
1066
原创 vue3特性-Teleport源码
Teleport是 Vue 3 的一个内置组件,它允许你将组件的内容渲染到 DOM 树的其他位置,而不是其父组件的 DOM 层次结构中。下面是对Teleport实现源码的详细分析。在中定义了Teleportimport {VNode,process(n2: VNode,) {// 处理逻辑},// 移除逻辑},// 移动逻辑},hydrate: null // SSR 相关逻辑Teleport通过其process。
2024-06-21 16:50:51
600
原创 vue3-自定义指令来实现input框输入限制
使用vue中的自定义指令来实现input框输入限制其中关键代码强制触发input ,来避免,输入规则外的字符时,没触发vue的响应,导致实际值的不一致的问题。使用debounce 来优化性能从vue和lodash库中导入必要的类型和工具函数。定义接口,扩展以包含属性。.valuevalue = ''.replace(/[^\d.]/g, '') // 删除非数字和非小数点字符.replace(/^\./, '') // 删除开头的小数点。
2024-06-18 17:49:45
1448
1
原创 从0到1上线小程序的步骤
开发一个小程序(例如微信小程序)涉及到多个阶段,每个阶段都有特定的步骤和要求。以下是详细的步骤及相关资料和网址,帮助你在开发前、开发中和开发完成后的上线部署过程中顺利进行。通过以上步骤和资料,你可以系统地开发、调试和上线一个高质量的微信小程序。
2024-06-18 15:59:21
933
空空如也
lodop 如何自适应布局?
2023-12-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人