- 博客(51)
- 收藏
- 关注
RSS订阅原创 新旧方法对比：JavaScript 中改变 `this` 指向的方式详解
JavaScript 提供了多种方式来改变this指向，从传统的callapply和bind到 ES6 引入的箭头函数、ReflectAPI 和Proxy，每种方式都有其独特的应用场景。开发者可以根据需求选择最合适的方式，以编写更简洁、可读性更高的代码。
2025-04-02 15:37:24
476
原创 前端通信事件：深入理解 Event Bus 与浏览器通信 API
Event Bus是一种基于发布-订阅模式的通信机制，常用于模块之间的解耦。它是 Node.js 各模块的基石，同时也是前端组件通信的重要手段之一。：通过实现页面与 Service Worker 之间的通信。适合离线缓存和后台任务场景。' });});：允许多个页面共享一个 Worker 实例，用于跨页面通信。' });WebSocket：用于实时通信，适合需要服务器参与的场景。' }));IndexedDB：虽然主要用于存储，但也可以通过轮询或监听变化实现通信。' });
2025-04-02 11:50:14
677
原创 深入理解 JavaScript 的 Set 对象
Set是一个集合（collection），其中的元素是唯一的，并且按照插入顺序存储。它可以存储任何类型的值，包括原始值和对象。Set是一个强大的工具，适用于需要存储唯一值的场景。通过本文的介绍，你应该对Set的特性、用法以及与其他数据结构的对比有了更深入的了解。希望你能在实际开发中灵活运用Set，提升代码的效率和可读性！
2025-03-28 17:49:46
910
原创 深入理解 JSONP：跨域的经典解决方案
JSONP（JSON with Padding）是一种跨域数据请求的解决方案。它的核心思想是利用<script>标签不受同源策略限制的特性，通过动态创建<script>标签来实现跨域请求。JSONP 是一种经典的跨域解决方案，其简单性和兼容性使其在过去的前端开发中占据了重要地位。然而，随着 CORS、反向代理等技术的普及，JSONP 的使用场景逐渐减少。在现代开发中，我们更倾向于选择安全性更高、功能更强大的跨域技术。但了解 JSONP 的原理和实现，仍然是每个前端开发者的必修课。
2025-03-28 14:26:01
945
原创 理解 JavaScript 中的迭代协议和迭代器协议
迭代协议允许 JavaScript 对象定义或定制它们的迭代行为。例如，在for...of循环中，哪些值可以被遍历到。let i = 0;},return() {// 解构可迭代对象break;// 迭代一次，执行 return 方法可迭代协议定义了对象如何被迭代，要求实现方法。迭代器协议定义了如何生成一系列值，要求实现next()方法。JavaScript 提供了许多内置的可迭代对象和支持迭代的 API。
2025-03-28 06:00:00
279
原创 深入理解 JavaScript 生成器（Generator）(后含async/await实现原理)
生成器是由function*声明创建的特殊函数，它返回一个Generator 对象，该对象符合可迭代协议和迭代器协议。生成器函数可以在执行过程中暂停，并在稍后恢复，其上下文（包括变量绑定）会在恢复时保持不变。生成器是 JavaScript 中非常强大的工具，适用于异步编程、迭代器实现、无限序列生成等场景。通过灵活使用yield和yield*，可以大大提升代码的可读性和可维护性。
2025-03-27 15:05:52
588
原创 深入理解 JavaScript 的 `async/await`
是对generator的封装，它隐藏了Promise和迭代器的复杂性，使得异步代码更易读、更易写。可以将理解为一种更高级的generator用法。通过本文的介绍，相信你对的概念、优势以及底层原理有了更深入的理解。希望你能在实际开发中灵活运用它，编写出更优雅的异步代码！
2025-03-26 17:36:10
619
原创 WebGPU 全面解析：下一代 Web 图形与计算 API 的崛起
WebGPU 是 Web 图形和计算领域的一次革命，它为开发者提供了前所未有的性能和灵活性。虽然目前仍处于早期阶段，但其潜力巨大。→🐒。
2025-03-26 16:18:07
1168
原创 浅谈 Vue3 中的设计模式
设计模式是软件开发中的一种最佳实践，它提供了解决特定问题的通用解决方案。通过合理运用设计模式，可以提高代码的可维护性、可扩展性和可读性。在 Vue3 的源码中，设计模式被广泛应用于各个模块中，充分体现了其在现代前端框架中的重要性。
2025-03-25 14:37:19
831
原创 还在让主线程忙到崩溃？用 Web Worker 解锁前端多线程的正确姿势！
JavaScript 是一种单线程语言，意味着它在一个时间点只能执行一个任务。尽管如此，一个进程可以包含多个线程，例如浏览器中的 Web Worker 提供了一种在后台线程中运行脚本的方式，从而避免主线程被阻塞。
2025-03-24 16:20:27
596
原创 居然还不知道防抖和节流？前端性能优化的必备神器！
防抖（Debounce）和节流（Throttle）是前端开发中常用的性能优化技术，主要用于控制高频触发的事件处理函数的执行次数。
2025-03-23 21:42:53
281
原创 深入解析大文件切片上传：Vue3 实现全流程指南
通过切片上传技术，我们可以有效解决大文件上传中的网络问题，并显著提升用户体验。结合 Vue3 的响应式特性和现代浏览器的 API（如 Web Worker 和 IndexedDB），可以进一步优化上传性能和稳定性。希望本文的示例代码能为你的项目提供实用的参考！
2025-03-23 19:00:42
715
原创 使用 patch-package 优雅地修改第三方依赖库
在前端开发中，有时我们需要对第三方依赖库进行修改以满足项目需求。然而，直接修改中的文件并不是一个好方法，因为每次重新安装依赖时这些修改都会丢失。是一个优秀的工具，可以帮助我们优雅地管理这些修改。本文将介绍如何使用修改的代码，并将修改保存为补丁文件。
2025-03-23 18:46:06
1178
原创 解决 ECharts Map3D 在高分辨率大屏下鼠标与地图位置错位的问题
代码里设置了跟大屏的window.devicePixelRatio作比较，导致地图组件容器缩放了，但是渲染的地图的位置还是。是浏览器提供的属性，用于返回当前显示设备的物理像素与 CSS 像素的比例，通常用于处理高分辨率屏幕的适配问题。参数，用于适配不同分辨率的屏幕。可以在初始化 ECharts 实例时手动设置该参数，确保渲染比例正确。我们的大屏做了fit模式的自适应，根据屏幕宽高比和大屏的宽高比自动计算缩放比例。修改设备模式为responsive，调整一样的尺寸。尺寸，导致位置定位错误。
2025-03-22 11:48:14
399
原创 深入理解 Vue3 中的 Reflect 和 Proxy 使用
本文深入讲解Proxy和Reflect的搭配使用，为什么要搭配？ 有没有别的替代方案
2025-03-13 15:40:42
1081
原创 从 Vue 到 React：理解作用与副作用
这篇博客对比了 Vue 和 React 中的作用与副作用，解释了如何在 Vue 中使用 watchEffect 和生命周期钩子管理副作用，以及在 React 中使用 useEffect 处理副作用，并介绍了严格模式的作用。
2025-03-13 11:48:27
1073
1
原创 vscode更新后: 适用于 Linux 的 Windows 子系统必须更新到最新版本才能继续。可通过运行 “wsl.exe --update” 进行更新
适用于 Linux 的 Windows 子系统必须更新到最新版本才能继续。可通过运行 “wsl.exe --update” 进行更新
2025-03-11 09:05:02
2036
原创 SSE接口切换页签/页面，接口重复调用问题
调用栈Initator里不是我们的代码引起的，而是@microsoft/fetch-event-source库，由此可见是该库的。查阅@microsoft/fetch-event-source库的配置项参数，发现有。时，使用@microsoft/fetch-event-source 联调SSE接口。3. 尝试配置为true，代码生效，再次切换浏览器页签，也不重复调用。，我又没有复现，经过来回测试，后端同事提出个奇怪的问题，库源码，发现是绑定了。
2025-03-10 11:05:05
328
原创 为什么大模型网站使用 SSE 而不是 WebSocket？
在大模型网站（如 ChatGPT、Claude、Gemini 等）中，前端通常使用来与后端对接，而不是。这是因为 SSE 更适合类似流式文本生成的场景。下面我们详细对比。
2025-03-10 10:32:36
1008
原创 JavaScript反调试技术详解：如何保护你的网站代码
反调试技术是一系列用于阻止或增加分析JavaScript代码难度的方法。其中一种最流行的技术是使用debugger语句，当开发者打开浏览器的调试工具（如Chrome DevTools）时，会自动触发断点，阻碍代码的顺利审查。当你在浏览某些网站时，打开F12开发者工具后突然发现调试器被触发，浏览器显示类似VM108的脚本中含有debugger语句，这就是反调试技术在起作用。
2025-03-10 10:13:35
784
原创 前端需要在大模型项目中具备的知识
随着人工智能和大数据技术的发展，大模型项目在各个领域得到了广泛应用。作为前端开发者，参与大模型项目需要具备一些特定的知识和技能。本文将从Vue入手，介绍前端开发者在大模型项目中需要掌握的知识，并通过实例进行说明。
2025-03-09 10:54:22
476
原创 没有与此调用匹配的重载
在开发TypeScript项目时，可能会遇到“没有与此调用匹配的重载”错误。这个错误通常是由于函数或方法的参数类型不匹配引起的。本文将介绍该错误的常见原因，并分别从React和Vue项目的角度说明如何避免该错误。
2025-03-09 10:49:58
459
原创 vue3项目兼容信创环境处理
为了让 Vue 项目兼容低版本浏览器，我们可以使用 @vitejs/plugin-legacy 插件。这个插件可以为我们生成兼容低版本浏览器的代码。
2025-03-07 16:53:42
437
原创 vue使用slot时子组件的onUpdated执行问题
在使用 Vue 的插槽 (slot) 功能时，可能会遇到一个问题：当父组件的任何状态更新时，子组件的。根据 Vue 官方文档的解释，作用域插槽允许我们将数据从子组件传递到父组件，从而避免不必要的更新。而作用域插槽则不会有这个问题，因为它们只会在相关的插槽内容发生变化时才会更新。使用了默认插槽和作用域插槽。默认插槽会导致子组件在父组件状态更新时触发。通过使用作用域插槽，可以更好地控制组件的更新行为，避免不必要的性能开销。以下是一个示例，展示了如何使用默认插槽和作用域插槽。这个问题在使用默认插槽时尤为明显。
2025-03-07 16:26:28
340
原创 vue3+vite-plugin-pwa实现PWA demo
PWA（Progressive Web App）是一种能够提供类似于原生应用体验的网页应用。它结合了网页和移动应用的优点，具有离线访问、推送通知、快速加载等特性。
2025-03-06 13:24:21
815
6
原创 vue项目中使用@microsoft/fetch-event-source库实现流式接口对接
项目中使用实现调用大模型的流式接口，实现类似chatGPT流式输出效果。
2025-03-04 15:43:57
5315
原创 终于学会了merge与rebase的区别
learngitbranching网站良心之作，一步步从简至繁，以闯关的模式一步步帮你掌握git底层原理👍。
2023-09-06 16:35:40
237
原创 安装pnpm报错 : pnpm : 无法加载文件 C:\Users\ctsi\AppData\Roaming\npm\pnpm.ps1
安装pnpm报错。
2023-03-21 19:08:35
829
原创 react启动报错： Error: error:0308010C:digital envelope routines::unsupported at new Hash
Node.js 的版本太高，在 Node.js V17+ 版本中发布的 OpenSSl3.0 对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成影响。：命令行输入 以下命令执行即可。
2023-03-21 19:03:19
1367
原创 前端模块化 CommonJs、AMD、CMD、UMD、ESmodule 发展历程与关系
前端模块化cmd amd umd commonjs esmodule
2022-11-10 10:39:15
417
原创 windows cmd常用基础命令
常用基础命令dir 查看当前目录cd dirctory 进入某个文件夹cd… 返回上一层文件夹md dirname 创建文件夹copy a.txt b 复制到a.txt到b目录下move a.txt b 移动a.txt到b目录下del dirname 删除文件rename a.txt b.txt 修改文件名字D: 进入d盘根目录ctrl c 终止命令type a.txt 查看文件内容cls 清屏tasklist 查看启动的进程ping 172.16.1.1 检测与目标网址
2020-08-15 12:11:40
433
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人