- 博客(223)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 【JS】一文告诉你如何判断JS的数据类型？
typeof、Array.isArray()、instanceof、Object.prototype.toString.call()分别是什么，详细讲给你
2024-06-18 14:43:07
419
转载 CSS的Flex布局语法
一、Flex布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}
2021-12-10 16:55:01
37974
原创 前端使用Blob处理后台传输的文件流
调接口时添加 responseType: ‘blob’ return request('接口', { method: 'POST', responseType: 'blob', data:{ ...params, }, });对返回的文件流进行处理response为获取到的文件流(response: any) => { // 创建blob对象 const blob = window.URL.crea
2020-09-01 11:15:34
43662
原创 最全禁浏览器热键禁F5F12复制粘贴删除前进后退等
document.oncontextmenu = function(){ event.returnValue = false; } // 或者直接返回整个事件 document.oncontextmenu = function(){ return false; } // onselect...
2020-01-10 15:36:11
42885
原创 10 个被严重低估的 JS 特性，直接少写 500 行代码
本文介绍了5个高效的JavaScript API技巧： Set：快速数组去重（时间复杂度O(1)）和事件防重复绑定，比传统filter+indexOf快3倍； Object.entries()/fromEntries()：实现对象与数组互转，支持属性筛选和URL参数解析； ??与??=：精准处理null/undefined，避免||误判0、""等有效值； Intl API：原生国际化支持，零依赖格式化货币、日期，自动适配多语言； Intersection Observer：异步监听元素可
2025-12-17 17:57:58
1140
原创 [特殊字符][特殊字符][特殊字符]别再让用户“清缓存”了！前端缓存策略的“自解”方案全解析
本文提出了一套前端缓存自愈方案，通过版本轮询和404兜底机制，彻底解决用户因缓存导致的页面异常问题。方案核心包括：CI注入版本号、服务器禁止缓存index.html、前端定时检查版本、自动处理资源404、灰度发布与回滚机制。相比传统"清缓存"方案，该方案实现了零人工干预的自动更新，大幅提升用户体验。技术实现涵盖Vite/Vue3项目配置、版本检查模块、错误监控和CDN缓存策略，适用于各类前端框架，成本低廉且效果显著，让"清缓存"成为历史。
2025-12-17 17:53:49
287
原创 一键 i18n 国际化神库！适配 Vue、React！
本文介绍了3款高效的前端国际化工具，可一键实现多语言适配，支持Vue、React等框架。i18n-auto-extractor通过$at()包装自动翻译；auto-i18n-translation-plugins无需修改源码，直接扫描中文翻译；i18n-cli提供命令行工具快速处理老项目。文章对比了三者的适用场景，如新项目推荐i18n-auto-extractor，老项目适合auto-i18n-translation-plugins，需要团队协作则选择i18n-cli。这些工具均开源，能大幅提升国际化效率。
2025-12-16 14:36:25
277
原创 大小仅 1KB！超级好用！计算无敌！
JS原生浮点数计算存在精度问题，number-precision库提供轻量级解决方案。该库仅1KB大小，提供加减乘除和四舍五入等基础功能，能有效解决0.1+0.2≠0.3等常见精度问题。相比toFixed方法，它真正修复计算误差而非简单格式化。适用于电商价格、金融简单计算等场景，API简洁易用。对于更复杂需求，可考虑big.js(6KB)或decimal.js(32KB)。number-precision在体积和功能间取得平衡，是中小型项目解决基础计算精度的理想选择。
2025-12-16 14:30:40
259
原创 面试官最爱挖的坑：用户 Token 到底该存哪？
文章摘要 本文系统分析了用户Token存储的三种方式及其安全性。localStorage易受XSS攻击，普通Cookie同样存在XSS风险且自动携带CSRF风险。推荐使用HttpOnly Cookie，虽然需要额外处理CSRF问题，但能有效防止XSS窃取Token。文章详细对比了三种方式的差异，提供了迁移到HttpOnly Cookie的具体方案，并建议通过SameSite属性和CSRF Token增强防护。对于暂时无法迁移的项目，也给出了降低风险的补救措施。面试时可简明扼要回答HttpOnly Cooki
2025-12-16 14:26:44
1507
原创 React 19.2 已发布，现已上线 npm！
React 19.2带来多项重要更新：新增<Activity>组件实现可控渲染，支持预加载和状态保留；引入useEffectEvent优化副作用逻辑；为RSC添加cacheSignal缓存检测；增强性能追踪工具。服务端渲染方面支持部分预渲染和Web Streams API。其他改进包括Suspense边界批处理、useId前缀变更及多项错误修复。该版本继续优化开发体验和性能，建议开发者关注新特性并升级相关工具链。
2025-12-15 14:55:58
1040
原创 90%前端忽略的3大内存黑洞，这样根治性能飙升300%！
本文揭示了前端开发中三大常见内存泄漏场景及解决方案。针对DOM节点关联数据、缓存与闭包、临时标记与循环引用等高频问题，推荐使用WeakMap/WeakSet的弱引用机制实现自动内存回收，避免传统强引用导致的内存泄漏。文章详细对比了传统方案与弱引用方案的实现差异，并指出使用弱引用时的注意事项。最后介绍了利用Chrome开发者工具的堆快照对比和内存分配时间轴功能精准定位内存泄漏点的方法。通过合理运用弱引用机制和内存分析工具，可有效提升前端应用性能。
2025-12-15 14:33:07
584
原创 我为什么开始讨厌 TypeScript？
摘要：TypeScript的困境与反思 作者曾是TypeScript的忠实拥护者，但近年来开始反思其适用性。文章指出TypeScript虽然带来类型安全，但也伴随着配置复杂、类型定义繁琐、第三方库兼容性等问题。在快速迭代的小项目中，TypeScript反而成为负担。作者提出JSDoc作为中间方案，保留80%的类型优势而不失灵活性。最终强调技术选型应基于实际需求，而非盲目追随"技术正确"，呼吁开发者根据场景选择最适合的工具而非所谓"最好"的工具。
2025-12-12 14:52:14
657
原创 你还在 for 循环里使用 await？异步循环得这样写
摘要： 在JavaScript异步循环中，常见错误包括：在for循环中使用await导致效率低下（约150字）；map中直接使用await返回Promise对象而非结果；Promise.all的"一错全错"问题。解决方案包括：顺序执行用for...of+await，并行用Promise.all+map，错误处理用Promise.allSettled或try-catch，并发控制用p-limit工具。特别注意避免在forEach中使用await，因其不会等待异步完成。应根据实际需求选择方案
2025-12-12 10:55:29
930
原创 React 官方严令禁止：Hook 不能写在 if/else，真相竟然是…
React官方规定Hook不能写在if/else等条件语句中，因为这会破坏Hook的调用顺序规则。React依赖Hook的固定执行顺序来正确匹配状态，条件语句会导致Hook在不同渲染时位置变化，引发状态错乱。正确的做法是将Hook放在组件顶层，或通过useEffect、useMemo处理条件逻辑。Hook必须始终在相同顺序下执行，这是React状态管理的核心机制。
2025-12-12 10:49:04
279
原创 让网页在 PC 缩放时“纹丝不动”的 4 个技巧
本文分享了实现PC端浏览器缩放时首屏内容保持无变形效果的4个关键技巧：1）使用CSS clamp()函数实现文本字号平滑缩放；2）通过max-width和居中锁定容器宽度；3）固定背景图尺寸并居中裁剪；4）在断点内保持固定布局。最终方案实现了不同分辨率下视觉差异小于2%，且移动端自适应无需额外代码。核心思路是在需要的范围内平滑变化，在不需要的范围内锁定不变。
2025-12-11 16:34:28
386
原创 一行生成绝对唯一 ID：别再依赖 Date.now() 了！
本文探讨了前端开发中生成唯一ID的可靠方案。文章首先指出常见误区：时间戳+随机数和全局自增计数器都存在重复风险，不适合生产环境。推荐使用浏览器原生API crypto.randomUUID()，它基于RFC 4122 v4标准，具有极低碰撞概率和加密级随机性，兼容现代浏览器和Node.js。对于旧环境，可使用uuid库作为兜底方案。最终建议2023年后项目直接采用crypto.randomUUID()，确保ID绝对唯一且零依赖。
2025-12-11 16:14:08
1380
原创 16 个 JavaScript 简写神技，提效 60%！
JavaScript 是一门强大且灵活的语言，拥有丰富的特性和语法糖。分享下 16 个最常用的 JavaScript 的简写技巧，掌握它们可以让我们编写出更简洁、更优雅的代码，并显著提升开发效率（增加摸鱼时间）。
2025-02-28 14:47:05
440
原创 抛弃 forEach，让数组遍历更高效
多年来，forEach 方法因其简洁易读的语法成为了我们处理数组的首选。然而，随着性能要求的提高和更多数组方法的出现，是时候重新评估我们的数组遍历策略了。
2025-02-28 14:24:43
340
原创 突发！这个400万开发者在用的VS Code插件存在恶意代码...
2月26日，VS Code热门主题插件 Material Theme 被发现包含恶意代码，随即被微软从市场移除。该系列插件总安装量接近1300万次，涉及以下五个插件：equinusocio.moxer-theme、equinusocio.vsc-material-theme、equinusocio.vsc-material-theme-icons、equinusocio.vsc-community-material-theme、equinusocio.moxer-icons。
2025-02-27 14:40:10
526
1
原创 前端自动化部署的极简方案
在现代软件开发中，自动化部署已经成为了一个不可或缺的环节。它可以大幅度提高开发效率，减少人为错误，并且使得整个部署过程更加可靠和可控。对于前端项目来说，自动化部署同样重要。本文将介绍一个极简的前端自动化部署方案，帮助你快速上手并享受自动化带来的便利。构建工具：使用 Webpack 或者 Rollup 等构建工具来打包和优化前端代码。版本控制：使用 Git 等版本控制系统来管理代码变更。CI/CD 工具。
2025-02-19 17:10:19
1025
原创 前端工程化：从混沌到秩序
前端工程化是前端开发的必然趋势。它可以帮助我们更好地管理和维护大型前端项目，提高开发效率和代码质量，优化用户体验。通过采用脚手架、规范及架构设计、组件化、DevOps和性能与错误监控等核心实践，我们可以将前端开发从混沌带入秩序，实现高效、可靠和可扩展的前端应用。
2025-02-19 11:16:12
746
原创 聊聊单点登录（SSO）
单点登录（Single Sign-On，SSO）是一种身份验证方法，允许用户使用一组凭据（如用户名和密码）在多个相关但独立的系统中进行身份验证。这样，用户只需要登录一次，就可以访问所有需要身份验证的应用程序或服务，而无需在每个应用程序中都输入用户名和密码。
2025-02-18 17:21:28
1125
原创 Chrome 的 API moveBefore() 与 insertBefore() 的对比
Chrome 的 API moveBefore() 与 insertBefore() 的对比
2025-02-17 14:17:26
1260
原创 使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 实现 PDF 文件显示、定位和高亮
使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 实现 PDF 文件显示、定位和高亮
2025-02-12 15:57:27
1665
原创 大前端开发全流程拆解与关键要点
在当今的互联网时代，前端开发已经不再是简单的网页设计和交互实现。随着技术的进步和用户需求的变化，前端开发逐渐演变成一个复杂而多元化的领域，涵盖了从项目前期到上线的各个阶段。本文将从七个方面对大前端开发进行深入分析，帮助读者更好地理解和掌握这一流程。
2025-02-11 14:12:11
5581
原创 什么是DeepSeek？如何入门DeepSeek？
DeepSeek（深度求索）是一款由国内团队开发的开源人工智能工具库，专注于提供高效易用的AI模型训练与推理能力。它既包含预训练大语言模型（如DeepSeek-R1系列），也提供配套工具链，助力开发者快速实现AI应用落地。"instruction": "生成产品描述","input": "无线蓝牙耳机，降噪，30小时续航","output": "XX蓝牙耳机采用主动降噪技术..."
2025-02-10 17:14:58
8436
原创 CSS样式中长度单位含义解析：rpx、px、vw、vh、em、rem、pt
CSS样式中长度单位含义解析：rpx、px、vw、vh、em、rem、pt
2025-02-10 14:58:37
4542
原创 解决 Excel 打开 UTF-8 编码 CSV 文件乱码的问题
在日常数据处理工作中，我们经常会使用CSV文件进行数据的导入和导出。然而，当CSV文件采用UTF-8编码时，有时候在使用Excel打开这些文件时会遇到乱码的问题，这可能会影响数据的正确性和可读性。在本文中，我们将分享如何解决Excel打开UTF-8编码CSV文件乱码的BUG问题，并提供一些实用的方法。
2025-02-10 14:38:33
6790
1
原创 react-native fetch在具有http远程服务器后端的Android设备上抛出“Network request failed“错误
在具有http远程服务器后端的Android设备上，使用react-native fetch时抛出"Network request failed"错误。"Network request failed"错误通常表示在进行网络请求时出现了问题。可能的原因包括网络连接问题、服务器端错误、请求超时等。
2025-02-08 11:10:51
5176
原创 浏览器从输入url到页面显示都做了什么？
当你在浏览器中输入一个 URL 并按下回车键时，会发生一系列复杂的事件。这些事件涉及到多个系统和技术，包括 DNS 解析、HTTP 请求、服务器处理、内容传输和浏览器渲染等。下面我们将详细描述从输入 URL 到页面加载完成的整个过程。从输入 URL 到页面加载完成，整个过程涉及到多个系统和技术，包括 DNS 解析、TCP 连接、HTTP 请求、服务器处理、内容传输和浏览器渲染等。理解这个过程可以帮助我们更好地优化网站性能，提高用户体验。
2025-01-13 11:11:16
5021
原创 浅谈耦合和解耦
耦合和解耦是软件设计中两个非常重要的概念。它们直接影响到系统的可维护性、可扩展性和可靠性。下面我们将从通俗的角度来理解这两个概念，并探讨如何在实际开发中应用它们。在软件设计中，耦合指的是模块、组件或系统之间的依赖关系。简单来说，如果一个模块的更改可能会影响到另一个模块的行为，那么这两个模块就存在耦合。例如，假设你正在开发一个在线商店。你的系统中有一个“订单处理”模块和一个“库存管理”模块。如果“订单处理”模块直接调用“库存管理”模块的函数来更新库存，那么这两个模块就存在耦合。
2025-01-13 11:02:31
5129
原创 React 数据是怎样传递的
在 React 应用程序中，数据传递是非常重要的。它允许我们在组件之间共享信息和状态，从而构建出复杂的用户界面。本文将深入探讨 React 中的数据传递机制，包括 props、state 和 context API。我们还将通过实际例子来演示如何在项目中应用这些概念。
2025-01-03 10:06:30
4890
原创 React虚拟DOM：理解和应用
在现代前端开发中，React 是一个非常流行的 JavaScript 库，用于构建用户界面。它引入了一个名为“虚拟 DOM”（Virtual DOM）的概念，这个概念对于 React 的高效性能和易用性至关重要。本文将深入探讨 React Virtual DOM 的工作原理、优点以及如何在实际项目中应用它。React Virtual DOM 是一个轻量级的 JavaScript 对象，它是真实 DOM 的一个副本。
2025-01-03 10:01:57
5300
原创 React 19有哪些新特性？
React 19是React框架的最新版本，带来了许多令人兴奋的新更新、新特性和新Hooks。这些改进旨在提高开发效率、增强性能和简化代码结构。在本文中，我们将详细介绍React 19的主要更新和新特性，并提供实际的例子来帮助你更好地理解它们。
2024-12-19 10:48:51
2463
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人