骑着骆驼去南极-优快云博客

原创 ArayTS：一个功能强大的 TypeScript 工具库

在现代前端开发中，我们经常需要处理各种复杂的业务逻辑和数据操作。今天为大家介绍一个强大的 TypeScript 工具库 —— ArayTS，它提供了丰富的工具函数和数据结构，能够帮助开发者更高效地完成日常开发任务。这些工具函数都经过了严格的性能测试和实际项目验证，能够帮助开发者更高效地处理各种数据操作场景。每个工具函数都提供了完整的类型定义，让 TypeScript 开发更加顺畅。

2025-03-28 18:04:36 624

原创 Web Workers优化 Web 网站的性能

Web Workers 是一种在后台线程中执行 JavaScript 的机制，可以帮助你优化 Web 网站的性能，尤其是在需要进行繁重计算或处理大量数据时。

2025-03-24 16:56:22 1007

拆分任务：将一个大任务拆分成多个小块，每次执行一部分。按时间片执行：在某个时间片（比如浏览器的空闲时间或帧刷新间隔）执行小部分任务。持续调度：通过定时器（setTimeout）帧动画（requestAnimationFrame）或浏览器空闲回调（requestIdleCallback）继续执行剩余任务，直到完成。这种方式可以防止长时间任务阻塞主线程，提高系统的流畅性。分时函数是一种任务调度策略，核心思想是将大任务拆分成多个小任务，并在不同时间片内执行，以提高系统流畅性和性能。

2025-03-04 19:11:51 548

原创 inquirer介绍及配合lerna在Vue中使用示例

Inquirer是一个用于创建交互式命令行工具的 Node.js 库，常用于收集用户输入。它提供了多种类型的提示框，可以用于创建交互式应用程序（比如 CLI 工具），并且支持各种类型的输入，包括文本、选择框、确认框、密码输入框等。这个库在开发过程中非常有用，尤其是在构建脚本和自动化工具时。

2025-02-06 19:13:23 789

原创 ✨TypeScript 中的 Promise 和异步操作全解

Promise是一种用于处理异步操作的对象，表示一个未来可能完成（resolved）或失败（rejected）的值。

2025-01-20 14:44:44 998

原创 ✨TypeScript 中的 Map 和 Set：深入解析及实用示例

在日常开发中，`Map`和`Set`是处理键值对和唯一值集合的两种高效数据结构。TypeScript对它们提供了强类型支持，使代码更加安全和可维护。本文将详细介绍它们的用法、特性及代码示例。

2025-01-20 14:35:42 595

原创 ✨WebSocket 与 Server-Sent Events (SSE) 的对比与应用

WebSocket是一种基于TCP的协议，允许服务器和客户端之间进行全双工通信（即双向通信）。与传统的HTTP请求不同，WebSocket连接一旦建立，服务器和客户端可以随时互相发送数据，而无需重新建立连接。Server-SentEvents(SSE)是一种基于HTTP的协议，允许服务器向客户端单向推送数据。与WebSocket不同，SSE是单向的，客户端无法通过SSE向服务器发送数据（除非通过其他方式，如HTTP请求）。

2024-12-16 11:22:36 1624

原创 ✨TypeScript数组的全部方法总结

在TypeScript中，数组方法是JavaScript数组方法的扩展。大多数方法是从JavaScript继承的，但由于TypeScript的类型系统，你可以获得更好的类型检查和推导。

2024-12-05 14:27:26 1417

原创 ☀️系统设计时应时刻考虑设计模式基础原则

一个类应该只有一个引起变化的原因。

2024-11-25 11:20:32 586

原创【CSS/SCSS】@supports的介绍与用法

supports测试浏览器是否支持CSS功能，如果不支持则允许开发人员提供后备样式，这通常称为功能查询。在这个例子中，只有在浏览器支持 CSS Grid 布局的情况下，main 元素才会应用网格样式。

2024-10-28 18:04:00 587

原创【CSS/SCSS】@layer的介绍及使用方法

layer是 CSS 中用于组织和管理样式优先级的分层规则。通过@layer，可以将 CSS 样式分为多个层（layer），控制不同层的样式覆盖关系，而不需要依赖于选择器的具体优先级。这个功能在较大的项目中尤其有用，因为它可以避免样式冲突，确保自定义样式能覆盖框架或第三方库的默认样式。

2024-10-28 17:49:56 1141

原创 ✨AVIF 图像介绍及创建 AVIF 图像的有用工具

AVIF 作为一种新兴的图像文件格式，凭借其卓越的压缩效率、高质量的图像输出以及广泛的兼容性，正逐渐成为开发者的新宠。通过使用 avif-cli 和 sharp 等工具，开发者可以轻松地将现有图像转换为 AVIF 格式，从而提升应用的性能和用户体验。随着 AVIF 的普及，我们有理由相信它将在未来的图像格式竞争中占据重要地位。

2024-10-22 15:23:38 3021

原创 sdk和API接口的区别

在实际开发中，SDK 和 API 通常是结合使用的。例如，一个 SDK 可能包含多个 API，开发者可以通过 SDK 提供的 API 来访问底层服务或功能。

2024-09-10 13:28:51 671

原创 2023程序员热门技术分析

👉 jQuery 和 Express 是所有受访者接下来的两种流行 Web 技术，专业开发人员使用 jQuery 比学习编程的人多 (24% vs. 18%)，而学习编程的人使用 Express 比专业人士多 (25% vs. 20%)。👉学习编程的人使用 AWS (19%) 的比例与其他两个云平台（19% 使用 Google Cloud 和 19% 使用 Firebase）持平，但使用 Azure 的比例远低于所有受访者（11% vs. 26%）。不到 20% 的开发人员希望明年再次使用它。

2024-08-16 15:55:13 707

原创 ✨2023程序员热门技术分析

👉2023 年，JavaScript 连续 11 年成为最常用的编程语言，延续了这一势头。👉Python 已取代 SQL 成为第三大最常用的语言，但对于那些非专业开发人员或正在学习编码的人来说（其他程序员），Python 排名第一。👉今年，一些技术排名上升了一位（Bash/Shell、C、Ruby、Perl 和 Erlang），其中两项技术排名上升了两位（Elixir 和 Lisp）。👉自 2022 年以来，排名上升七位的最大推动者是可嵌入脚本语言 Lua。

2024-08-16 15:53:54 902

原创【Promise】掌握 Promise.all并行处理异步操作

它接受一个可迭代的 Promise 对象（如数组），并返回一个新的 Promise 对象。这个新的 Promise 对象在所有输入的 Promise 对象都成功完成时才会成功，如果任何一个 Promise 对象失败，则立即失败。接收一个包含三个 Promise 对象的数组，并在所有 Promise 都成功完成后，返回一个包含所有结果的数组。在这个例子中，我们并行地从三个不同的 API 端点获取数据，并在所有数据都成功返回后进行处理。的一个关键特性是，如果任何一个 Promise 失败，整个。

2024-07-22 14:26:27 883

原创【CSS】容器查询：@container

容器查询是一种CSS特性，允许开发者根据组件所在的容器的大小来应用样式，而不是整个视口的大小。这使得组件能够更加灵活地适应不同的布局环境，而不仅仅是依赖于视口的大小。

2024-07-22 13:43:58 622

原创【SCSS】use的详细使用规则

如果发现自己想要一次配置多个变量，将映射作为配置传递，或者在模块加载后更新配置，请考虑编写一个mixin来设置您的变量，然后再编写一个mixin来注入样式。但是，有时您可能想要选择不同的命名空间——您可能想要为经常引用的模块使用较短的名称，或者您可能正在加载具有相同文件名的多个模块。如果你想让一个成员对整个包而不是单个模块私有，只是不要从你的包的任何入口点转发它的模块（你告诉用户加载以使用你的包的样式表）。要加载带有配置的模块，使用。如果使用as *，给该模块中定义的变量赋值，将覆盖其在该模块中的值。

2024-06-06 20:07:02 1128

原创【CSS】will-change 属性详解

will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化渲染性能，提前做一些准备工作，从而提高性能。

2024-06-05 14:35:31 2277

原创【CSS】clip-path 属性详解

clip-path 属性用于在 SVG 和 HTML 中创建复杂的裁剪区域（即剪切路径），从而只显示元素的一部分。

2024-06-05 11:06:09 1757

原创【CSS】object-fit 和 object-position 属性详解

object-fit和object-position是CSS属性，用于控制图像或视频在其容器中的适应和定位方式。

2024-06-04 18:04:50 1592

原创【CSS】aspect-ratio属性详解

aspect-ratio 属性是 CSS 中的一个有用属性，它允许你轻松地设置元素的宽高比。这个属性可以确保元素在不同屏幕尺寸和容器大小下保持一定的宽高比，非常适用于响应式设计中。

2024-06-04 10:31:30 3680

原创【CSS】scroll-snap属性详解

scroll-snap 是一个用于实现流畅滚动捕捉效果的 CSS 模块。它包含多个属性，可以应用于滚动容器和滚动子项上。

2024-06-03 19:14:03 1476

原创【CSS】小众但非常有用的 CSS 属性一览

属性可以帮助你创建流畅的滚动体验，常用于图片画廊和轮播图。属性可以提示浏览器某些元素将要发生变化，从而优化渲染性能。属性允许你设置元素的宽高比，适用于保持图片和视频的比例。属性可以控制滚动边界行为，防止滚动事件“溢出”到父元素。属性可以控制替换元素（如图片或视频）如何适应其容器，属性可以应用图像处理效果，如模糊、亮度和对比度。属性可以在背景内容上应用图像处理效果。属性允许你创建复杂的形状和遮罩效果。可以控制替换元素在其容器内的位置。属性定义元素内容的混合模式。属性可以控制文本的书写方向。

2024-06-03 18:24:23 389

原创【vue3】Vue3+ts引入Markdown（支持边写边编译）

是vue3 环境的 Markdown 编辑器，使用 jsx 和 typescript 语法开发，支持在 tsx 项目使用。使用更多的扩展工具栏组件，例如：导出内容为 PDF。使用已存在的语言、主题扩展，例如：日语。

2024-03-11 10:09:03 1425

原创【2024】vue-router和pinia的配置使用

有点复杂，但是正规，修行看个人，看懂多少凭本事吧，其实上面哪些也够用了！在使用的时候引入就可以了！

2024-03-05 17:39:39 1396

原创【2024】使用Vuetifi搭建vue3+Ts项目，并使用tailwind.css

只要跟着官方文档来就不会出错。

2024-03-05 16:46:05 818

原创【Vue3】Ref 和 ShallowRef 的区别

Ref 是 Vue 3 中的一个新的基本响应式数据类型，它允许我们包装任意的 JavaScript 值，并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值，同时还提供了一些额外的 API 来处理数据。Ref 可以被用于跟踪单个值的变化，并在需要时自动触发重新渲染。ShallowRef 与 Ref 类似，它也是用来包装值并监听变化的。但是，与 Ref 不同的是，ShallowRef 会对其包装的值进行浅层的响应式转换。

2024-03-05 12:56:09 2470

原创【CSS】进阶grid布局理论知识(第一章)

对于由不同大小的元素组成、需要复杂布局的网站，grid是您的最佳选择。虽然您可以实施一些 Flexbox hack 来实现这些布局，但这些 hack 通常很复杂并且需要更长的代码行，因为您没有使用正确的工具来完成这项工作。虽然grid和 flex都不是万能的解决方案，但在某些情况下，grid作为完成这项工作的正确且更好的工具而大放异彩。显式网格线是在 CSS 中定义的行和列的开发工具中可见的实线。而是由浏览器做出的。最后，如果您希望更灵活地移动元素，无论 HTML 标记的结构如何，grid应该是您的首选。

2024-03-03 20:11:47 888

Dart学Dart？这一篇就够了！

空空如也