前端小魔女-CSDN博客

原创 SSE打扮你的AI应用，让它美美哒

刚开始呢，由于问答比较简单，只是一些简单的文本类型，并且后端返回的结果也有限，加上工期比较紧(反正就是各种原因)，我们选择了最原始的。虽然重新连接是自动的，但我们的服务器可能知道在特定时间段内不会有新数据，因此无需保持活动的通信通道。的度过了一段时间，但是由于需求的变更。，使其非常适用于实时信息的更新或者那些在不向服务器发送数据的情况下实时更新客户端的情况。这部分是调用指定的后端接口，将用户信息传递给后端服务，用于做指定信息的处理。也是这种格式，只不过它在前端显示的时候，用了针对这类信息的展示处理。

2024-07-09 09:06:40 680

原创 window.ai 开启你的内置AI之旅

通过访问这个页面，我们可以看到浏览器中各种组件的列表，包括每个组件的当前版本号。上面两个浏览器任意下载一个即可，如果你之前就下载过对应的浏览器，别忘记将浏览器升级到最新版本。因为，行文字数所限，有些概念可能会一带而过亦或者提供对应的学习资料。当出现如下的信息时，就说明我们下载完成了，此时我们下载的版本为。既然，我们按照官方的指导按照了模型，我们可以通过在控制台输入。一样，通过在本机下载对应的模型来实现模型的本地化运行。有的朋友就会想，我们是否有对应的。后，发现我们还无法使用AI，那我们就需要。

2024-07-05 20:29:15 1344

原创大文件分片上传和分片下载

在上传大文件时，需要考虑服务器的处理能力和存储空间，以及安全问题。并且有很多现成的库或者框架都会为我们来实现该部分，但是呢本着探索知识的本质，我们还是对其内部比较核心的部分做一次讲解。在下载过程中，客户端基于分片列表发起并发请求以下载其他分片，并逐渐拼接和合并下载的数据。我非常相信运气，我发现，我越努力，就越幸运。当所有分片下载完成后，客户端将下载的数据合并为一个完整的文件。或数据库记录已接收的分片信息，包括已上传的分片索引和分片大小。上传完成前，保存上传状态，以便在上传中断时能够恢复上传进度。

2024-07-02 09:23:10 908

原创 AI赋能前端：你的Chrome 控制台需要AI(爱)

到这步其实对于大家就有点犯难了，虽然有了🪜魔法的加持，但是呢，注册国外软件，需要短信验证。使用该项功能时，有一个大前提，就是我们需要借助🪜魔法，如果你无法使用，那此篇文章或者该项目功能对你来说毫无作用。然后，按照对应的步骤操作后，猛然发现-原来童话里都都是骗人的，之前口口声声说，的能力，其实有很多玩法。)，如果我们是第一次使用该功能，会出现下面的步骤，这是一份隐私声明。的能力，我们需要更好的英文阅读能力，因为它给出的解释和方案都是英文。咋说呢，现在写到这里，其实有很多想聊的，但是又不知道咋去描述它。

2024-06-21 20:37:46 1443

原创写给前端同学的终端修炼手册

的第三方依赖过久时，我们就会一直在那里干瞪眼啥都干不了，此时我们就会去刷会抖音解解乏。命令，也就是我们所说的终端命令。终端不提供任何有用的信息给你，在执行一下操作时，全凭你对文档目录的了解程度。因此，即使项目使用完全不同的工具，我们也不需要记住每个项目的特殊命令。团队已经给我们访问源代码的权限，并且已经将其下载到我们的机器上。👋🐶：这篇内容针对是对终端命令不甚了解的同学准备的，如果大家对终端命令很熟练，可以忽略此文。当然，有时候我们在开发的时候，会遇到第三方包出错的情况，此时呢，我们可以祭出重启大法。

2024-06-20 09:09:43 632

原创环境变量：熟悉的陌生人

由于部署平台可以由我们的整个团队访问,因此我们可以轻松地与正确的人共享密钥,而无需通过互联网发送文本文件。由于我们的密钥存储在一个完全隔离的服务中,我们可以放心,在与同事共享或通过版本控制提交时,我们很可能不会意外泄露它们。如果在数十或数百行环境变量之间的某个地方出了小差错,整个文件都可能无法解析,我们的程序将在整个过程中抛出无关的错误。在某些情况下,我们的部署平台甚至可能不提供此类服务。这些变量用于存储特定用户的信息,如本地安装的库的路径,这些库不对所有用户开放,仅针对特定用户安装的程序的特定值等。

2024-06-07 09:32:37 595

原创宝贝，带上WebAssembly，换个姿势来优化你的前端应用

前面铺垫了那么多，其实为了更好的讲下面的内容，我们先把一些和逻辑代码不相关的配置内容提前介绍了，这样我们就可以将更过的注意力放在代码实现上了。有些代码的逻辑其实很简单，我们已经有对应的注释，所以也不会用多余的篇幅解释。但是，在一些计算量特别大的功能面前，一切的计算都是收效甚微的。提供接近本地执行速度的性能，使得复杂的游戏逻辑和高帧率的图形渲染可以在浏览器中高效运行。对应的页面结构和事件回调和之前是类似的，我们就省略了这部分的解释。有过介绍，为了行文的完整，我们再用简短的内容解释一下它。

2024-06-07 08:06:27 1020

原创在gitlab上发布npm二进制文件

可以看出，我们使用的手动发布的方式。是因为，我们这三个子包其实内部没啥逻辑，只是一个二进制文件，所以我们就选择了用。最终的结果就是，可以使得我们的包能够在全局访问并且执行对应的命令。的命令，也就是在主包下载后，无法下载对应的子包。发布二进制类型的包，同时还涉及多个包直接的交互呢，上面的方案就有点捉襟见肘了。其实它们的内容极其简单。，那我们就需要使用其他方式将其下载到本地，然后执行对应的命令。在被执行时，下载对应平台的二进制文件，并且根据参数执行命令。由于是主包，我们就需要额外的操作，这里就两点需要新增。

2024-06-03 09:17:36 948

原创 AI 赋能前端 -- 文本内容概要生成

针对上面的第一点和第二点，其实我们是有解决方案的，我们可以在解析文案的时候，不是单纯的生成一段文本信息，而是生成一段带有布局/样式信息的。处理文本并将其绘制成图像的功能，我们还可以有改进的地方，这不是本篇文章的主要核心点，就不展开说明了。有对话的，文生图等。拥有活跃的社区和丰富的资源，包括教程、论坛和技术支持，为开发者提供了强大的支持体系。，可以构建强大的文档问答系统，用户可以对大型文档集进行自然语言查询，获取精确的答案。，可以构建复杂的对话系统，这些系统能够进行多轮对话，记住用户的偏好和历史对话内容。

2024-05-30 19:10:29 892

原创 Rust 赋能前端 -- 写一个 File 转 Img 的功能

下，通过文件头图信息就能大致知晓文件的内容(概要信息)，其次如果展示的资源信息过多，每次从后端获取对应的图片资源也是一件极其耗费带宽的事情。下面，有些不重要的代码和实现逻辑，我们就不写了，因为有些代码看起来又臭又长，然后也没啥可聊的。的处理，都是在前端环境中操作的。且不易处理的任务，我们就需要请帮手，而在其他语言中有成熟的方案来处理我们遇到的这些问题。而对于我们的库的使用者来讲，它们在解析文档的时候，其应用环境是不确定的,如果是主线程还好，但是如果是在。应用的开发，可能会用到的前后端数据交互的方式。

2024-05-25 10:21:23 670

原创写一个类ChatGPT应用，前后端数据交互有哪几种

此外，还有一个大背景就是，由于需求是可能要上传多个文件，并且模型那边的操作可能对文档解析有一定的难度。所以，在客户端发起请求时，可能投喂给模型的物料有点多，返回的结果的时间也会很长。而后端是接入我们团队的模型，我咨询过模型团队，也是基于开源模型做参数的微调，这个魔幻的世界真让人欲罢不能。这就是大概的业务背景。数据的发起方是服务端，然后在有合适的数据时，就将其发布给客户端，前端接收到数据后就进行结果的显示。)不是一个难点，我们可以借助简单的库或者手搓一个打字效果都是可以的，而是数据的获取制约我们应用响应。

2024-05-15 09:08:29 396 1

原创 Vite Plugin Just so so

它能够把我们项目中用到的图片或者图标放置到一个图片中，然后依据图片位置来从中获取到我们像要展示的图片资源。的靶向指定，能够处理对应的资源逻辑，并且在一个插件中就可以处理两种情况。其实，处理到这里算是完成了我们的主要逻辑，但是呢大家都知道在开发环境，我们还需要支持。那也就意味着，如果要写针对开发环境的插件时候，我们是利用和服务器相关的hook。那么，我们如何才能让我们的项目如此丝滑的使用这种特性呢。，虽然他们插件机制不同，但是在插件处理资源的是逻辑都是相同的，也就是我们下文中的。话不多少，我们直接上代码。

2024-05-13 09:17:41 418

原创 React19 她来了，她来了，他带着礼物走来了

时，浏览器在下载字体文件时，会显示一段时间的空白文本，直到字体文件完全加载完成。这允许用户在不必等待整个页面在服务器端渲染完成的情况下,更早地看到页面的某些部分。还未开源，所以我们无法得知其内部实现细节，不过我们可以从以往的动态中窥探一下。之前开始写的，为了让大家能够有一个轻松的假期，索性就没在节内发送。将帮助增强用户体验，并应该导致更快的响应。针对，其内部是如何实现的，我们后期会有专门的文章来介绍，这里就不在过多解释了。文档元数据：这是另一个备受期待的改进，让我们能够用更少的代码实现更多功能。

2024-05-09 12:47:06 392

原创 CSS Grid 那些鲜为人知的内幕

随着容器宽度发生变化，当容器宽度小到一定程度，即第一列的宽度小于图像的设定宽度时，就会发生如下的变化。在这个示例中，我们说第一列应该占用1个单位的空间，而第二列占用3个单位的空间。叔本华：人生没有意义，人生就是一团欲望，欲望满足了就空虚，满足不了就痛苦，人生就像摆钟在空虚和痛苦中来回摇摆。在这个例子中，这是位于行网格线 1 和 3 之间，以及列网格线 1 和 3 之间的网格区域。的语言中，比如英语，我们从左到右计算列。让我们更好的操作网格的列，以便可以根据我们的意愿将它们分布在整个网格中。

2024-04-30 08:36:39 396

原创 Vite 热更新(HMR)原理了解一下

允许我们在不刷新页面的情况下更新代码，比如编辑组件标记或调整样式，这些更改会立即反映在浏览器中，从而实现更快的代码交互和更好的开发体验。而在本地开发中，肯定会有本地代码的变更处理，如何最大限度的在不刷新整体页面的情况下，进行代码的替换呢。针对不同的语言环境，也是需要对应的插件进行这些api的调用处理。不是自接受的，我们将继续向上传播以找到一个接受的模块。或者根据需要手动处理。模块的能力，光有能力是不行的，我们需要了解它们何时才会起作用。，但是之后又发生了啥，我们不得而知，这就是我们这节需要了解的内容。

2024-04-26 09:19:09 1317

原创一网打尽 Rust 语法

中，由于受制与文章的脉络，我们只能从概念到使用场景进行事无巨细的解释。但是呢，这种处理方式只是在阅读某个文章时有种豁然开朗的感觉，但是无法从更高的视角去整体把握。生命周期，这意味着它不会从周围范围借用任何东西，并且可以在整个程序的持续时间内存在。（放心，我们会在特定的位置，将附带更详细的文章链接）。中所涉及到的各种数据类型，我们可以从以下的链接中找到更为详细的解释。当变量值被重新分配时，值会给新的所有者，并且旧的所有者被丢弃。，允许我们命名和包装多个相关的值，从而形成一个有意义的组合。

2024-04-25 09:15:01 676

原创位图/矢量图/GIF/PNG/JPEG/WEBP一网打尽

便携式网络图形）是一种基于栅格的高质量文件格式，是无损的，支持透明度。任何位图图形中的像素数量都是固定的，这意味着任何尝试调整大小/放大都将导致失真和/或模糊的视觉效果，因为系统无法凭空创建额外的像素。算是最早的图片格式，那就意味着后面出现的各种图片格式都是直接或者间接的去弥补它的错误或者增强它的某些特性。的主要优势是较小的文件大小，这导致了更好的用户体验和更快的加载时间。它支持透明度，并且据开发人员称，无损的。下面的内容，我们都是选择我们平时开发中常见的知识点，针对一些特别拗口的东西，我们就不介绍了。

2024-04-08 10:24:45 874

原创文件上传 = 拖拽 + 多文件 + 文件夹

其实还真不是，之所以会出现这个问题，是因为现有的解决方案不支持我们的需求，我们才会大费周折的去找解决方案。现在，我们把我们的上传场景再做一次限定，我们可以将我们整个页面作为我们的拖拽区域，这样我们就不必拘泥于特定组件了。前面讲过，文件拖拽就是文件收集的过程，这里不需要额外的操作，但是对于文件{夹}来将我们需要唤起对应的弹窗。并且，该页面的子组件用。利用库，有很多业界比较出名的拖拽库能处理我们的问题，使用库的好处就是我们通过简单的。因为，我们在做项目展示的时候，需要用到一些组件库和工具库，所以我们就抛弃。

2024-04-08 10:24:07 1241

原创你的css选择器可视化备忘录

这个 CSS 规则选择了在另一个元素之后出现的任何元素（除了容器中的第一个元素），并在顶部应用了一定的边距，有效地使元素均匀地间隔开来。有一种望而却步的赶脚。，因为它会匹配页面上的所有元素，包括嵌套元素，这可能会增加浏览器的渲染负担。这使得子选择器非常有用，因为它可以帮助我们更精确地定位特定层次结构的元素，并应用相应的样式。允许我们选择与指定元素具有相同父元素且位于其后面的所有兄弟元素，而不仅仅是直接的兄弟元素。例如，如果我们想为页面上的所有元素设置相同的字体样式，我们可以使用通用选择器来实现。

2024-04-08 10:10:42 853

原创如何在Rust中操作JSON

然而，如果我们在库中搜索不安全代码，我们会发现比之前的库中的不安全代码可能更多。如果我们不怕不安全行为，或者确信它不会出错，还有很多未经检查的方法可供我们使用。由于文章篇幅的原因，我们就没详细介绍这块的内容，而今天我们就抽空聊聊这个话题。其实市面上有很多相关的库，但是我们还是选择一种我们比较熟悉并且流行度高的库。例如，如果我们想要一个。的数据时，我们就可以直接从流中反序列化，而不是在内存中添加缓冲区。相同，因此如果我们想在任何时候切换，通常不应该遇到任何问题。这并不意味着我们不应该使用它，而是要谨慎使用。

2024-04-08 10:10:03 1361

原创 Rust跨平台编译

的标准库就设计为跨平台的,它利用了一些跨平台的抽象层,如跨平台系统调用接口,从而使标准库能够在不同操作系统上运行。为跨平台编译提供了很好的支持,但由于不同平台的差异,仍然可能需要一些平台特定的代码。这只是其中一个平台，如果我们的程序想要在多个平台上发布，那就需要做更多的设置。但是呢，由于受文章内容的限制，我们就一带而过，没有过多的去解释。的单元测试在编译时就运行,可以确保在发布时,程序在不同平台上的行为是一致的。由于编码的原因，有些汉字没显示全，但是这不是主要的核心点，我们就不做处理了。

2024-04-08 10:08:50 1725

原创 2023面试真题之浏览器篇

人生当中，总有一个环节，要收拾你一下，让你尝一尝生活的铁拳大家好，我是。今天，我们继续系列。我们来谈谈关于的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。

2023-09-01 19:41:23 162

原创 2023面试真题之CSS篇

最常用的还是和，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们。关于opacity: 0。

2023-09-01 19:39:01 217

原创 2023前端面试真题之JS篇

自定义数据存放这个标签原本的图片地址。

2023-09-01 19:38:10 267

原创 Rust学习笔记之包、Crate和模块

模块让我们可以将一个crate中的代码进行分组，以提高可读性与重用性。模块还可以控制项的私有性项是可以被外部代码使用的（public还是作为一个内部实现的内容，不能被外部代码使用（private通过执行，来创建一个新的名为restaurant的库。在中，来定义一些模块和函数。用关键字mod定义一个模块，指定模块的名字，并用大括号包围模块的主体。我们可以在模块中包含其他模块，就像本示例中的hosting和serving模块。模块中也可以包含其他项，比如结构体、枚举、常量、trait。

2023-09-01 19:29:13 157

原创 Rust学习笔记之枚举和匹配模式

假设我们要处理IP 地址。目前被广泛使用的两个主要IPIPv4）和IPv6任何一个IP地址要么是IPv4的要么是IPv6的，而且不能两者都是。IP地址的这个特性使得枚举数据结构非常适合这个场景，因为枚举值只可能是其中一个成员。通过在代码中定义一个IpAddrKind枚举来表现这个概念并列出可能的IP地址类型，V4和V6。这被称为枚举的{成员|variants}V4,V6,现在IpAddrKind就是一个可以在代码中使用的自定义数据类型了。

2023-09-01 19:27:37 39

原创 Rust学习笔记之结构体

结构体和元组类似。和元组一样，结构体的每一部分可以是不同类型。但不同于元组，结构体需要命名各部分数据以便能清楚的表明其值的意义。不需要依赖顺序来指定或访问实例中的值。定义结构体，需要使用struct关键字并为整个结构体提供一个名字。结构体的名字需要描述它所组合的数据的意义。接着，在大括号中，定义每一部分数据的名字和类型，我们称为{字段|field}。一旦定义了结构体后，为了使用它，通过为每个字段指定具体值来创建这个结构体的实例。创建一个实例需要以结构体的名字开头，接着在大括号中使用。

2023-09-01 19:26:41 50

原创 Rust学习笔记之所有权

一般来讲，所有的程序都需要管理自己在运行时使用的计算机内存空间。某些使用垃圾回收机制的语言会在运行时定期检查并回收那些没有被继续使用的内存而在另外一些语言中，程序员需要手动地分配和释放内存。Rust采用了第三种方式：它使用特定规则的所有权系统来管理内存。这套规则允许编译器在编译过程中执行检查工作，而不会产生任何的运行时开销。

2023-09-01 19:24:35 44

原创 Rust学习笔记之基础概念

❝要么我说了算，要么我什么也不说 -- 拿破仑❞大家好，我是「柒八九」。今天，我们继续「Rust学习笔记」的探索。我们来谈谈关于「基础概念」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章listRust学习笔记之Rust环境配置和入门指南你能所学到的知识点❝变量与可变性「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️数据类型「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️Rust中函数「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️流程控制「推荐阅读指数

2023-01-03 17:34:32 201

原创计算机底层知识之汇编语言

❝大家往往高估自己一天能学会的东西，低估三年能学会的东西❞大家好，我是「柒八九」。今天，我们继续「计算机底层知识」的探索。我们来谈谈关于「汇编语言」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章list计算机底层知识之CPU计算机底层知识之二进制计算机底层知识之处理小数计算机底层知识之内存和磁盘的关系&数据压缩计算机底层知识之运行环境&可执行文件计算机底层知识之操作系统你能所学到的知识点❝汇编语言和本地代码是「一一对应」的

2022-11-06 13:31:01 573

原创计算机底层知识之操作系统

❝给时光以生命，而不是给生命以时光❞大家好，我是「柒八九」。今天，我们继续「计算机底层知识」的探索。我们来谈谈关于「操作系统」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章list计算机底层知识之CPU计算机底层知识之二进制计算机底层知识之处理小数计算机底层知识之内存和磁盘的关系&数据压缩计算机底层知识之运行环境&可执行文件你能所学到的知识点❝操作系统功能的历史「推荐阅读指数」 ⭐️⭐️⭐️⭐️意识到操作系统的存在「

2022-11-03 17:33:51 379

原创计算机底层知识之运行环境&可执行文件

❝学习，说到底是一个「学」和「练」，以及学以致用的过程❞大家好，我是「柒八九」。今天，我们继续「计算机底层知识」的探索。我们来谈谈关于「运行环境&可执行文件」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章list计算机底层知识之CPU计算机底层知识之二进制计算机底层知识之处理小数计算机底层知识之内存计算机底层知识之内存和磁盘的关系&数据压缩你能所学到的知识点❝运行环境 = 操作系统 + 硬件「推荐阅读指数」 ⭐️⭐️⭐️

2022-11-03 12:05:34 649

原创计算机底层知识之内存和磁盘的关系&数据压缩

❝强者是什么？从「绝对意义」来说，是强于大多数人。从「相对意义」来说，是强于昨天的自己。❞大家好，我是「柒八九」。今天，我们继续「计算机底层知识」的探索。我们来谈谈关于「内存和磁盘关系」&「数据压缩」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章list计算机底层知识之CPU计算机底层知识之二进制计算机底层知识之处理小数计算机底层知识之内存你能所学到的知识点❝不读入内存就无法运行「推荐阅读指数」 ⭐️⭐️⭐️⭐️磁盘缓存「推

2022-11-02 11:11:02 467

原创计算机底层知识之内存

❝渔夫出海前，并不知道鱼在哪里，可是他们还是选择出发，因为他们相信，一定会满载而归。人生很多时候，是「选择了才有机会，是相信了才有可能」。 -- 「稻盛和夫」❞大家好，我是「柒八九」。今天，我们继续「计算机底层知识」的探索。我们来谈谈关于「小数运算」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章list计算机底层知识之CPU计算机底层知识之二进制计算机底层知识之处理小数你能所学到的知识点❝内存的物理机制「推荐阅读指数」 ⭐️⭐️⭐️

2022-11-01 11:31:54 248

原创计算机底层知识之处理小数

❝生活中最大的障碍之一就是对羞辱的恐惧❞大家好，我是「柒八九」。今天，我们继续「计算机底层知识」的探索。我们来谈谈关于「小数运算」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章list计算机底层知识之CPU计算机底层知识之二进制你能所学到的知识点❝计算机精度缺失「推荐阅读指数」 ⭐️⭐️⭐️如何用二进制表示小数「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️计算机精度缺失的原因浮点数「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️正则表达式和EXC

2022-10-31 09:06:12 742

原创计算机底层知识之二进制

❝巴西作家保罗·科埃略的一句话：「如果你想成功，你必须遵守一条规则：永远不要对自己撒谎。」❞大家好，我是「柒八九」。今天，我们继续「计算机底层知识」的探索。我们来谈谈关于「二进制」的相关知识点。如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。文章list计算机底层知识之CPU你能所学到的知识点❝用二进制数表示计算机信息的原因「推荐阅读指数」 ⭐️⭐️⭐️⭐️什么是二进制「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️补数「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️逻

2022-10-30 16:24:37 1144

原创计算机底层知识之CPU

❝Only the disciplined in life are free. 唯自律者得自由❞大家好，我是「柒八九」。想必能看到这篇文章的小朋友，大都是有一定编程能力的「程序媛、程序猿」。无论，你是从事切图的前端工作，还是对数据有一种爱而不得的后端开发。更甚者，是和底层打交道的嵌入式开发人员。无论你平时在工作环节中，对编程语言API做到如何的得心应手，但是在遇到一些比较「底层」的逻辑和知识时。或多或少，有点「捉襟见肘」。而今天，我们又准备开辟一个新的知识体系 --「计算机底层知识」。老话说的好，

2022-10-29 15:18:30 304

空空如也

空空如也