weixin_49523082的博客

原创 TypeScript 知识点补充（第三部分：工程化与高级类型）

本部分是前两部分的延续。前面已覆盖「基础坑」「进阶坑」「实战模式」，本部分聚焦。

原创 TypeScript 中 import type 写法与 any 的取舍

引入用于约束数据形状的interfacetype时，加type是最规范、最安全的写法。写类型的意义在于保护自己（少写 Bug）、帮助队友（一眼知道传什么数据）、提高开发速度（智能提示）；写any等于把这些优势全部丢掉。

原创 TypeScript 类型系统常见「坑」详解

本文承接前两轮关于与「能不能直接写any」的讨论，把 TypeScript 类型系统里最容易踩的几个隐藏坑，逐一用「现象 → 错误代码 → 原因 → 正确写法」的方式讲透。

原创 前端 iframe 内容防复制 / 防截图 / 防去水印方案汇总

判断项说明协议httphttps必须相同域名a.com与b.com不同；a.com与www.a.com也不同端口默认端口相同算同域；8000与8080不同路径、查询参数不影响判断。与：同域与：不同域与：不同域与：不同域同域 iframe：父页面可通过读写内部 DOM，能注入防复制逻辑。跨域 iframe：父页面拿不到内部 DOM，会抛，不能直接禁止内部复制，只能用通信。同域 = 父页面能操作 iframe 内部；跨域 = 只能通信，不能操作 DOM。

原创 前端实现图片与PDF文字识别敏感信息打码方案

在证书、合同、发票、简历、身份证、营业执照等场景中，用户上传的图片和 PDF 文件里经常包含姓名、身份证号、手机号、邮箱、住址、银行卡号等敏感信息。如果这些文件需要在浏览器中预览、分享或二次流转，就需要在导出前进行文字识别和打码处理。本文介绍一种基于和。

原创 Axios 中 params 与 data 的区别与原理

Axios 中params和data决定参数放在 HTTP 请求的paramsdata。

原创 JavaScript / TypeScript 易踩坑知识点 —— 性能与内存类

坑点错误写法正确写法循环操作 DOM每次循环 append事件监听器泄漏未移除监听器销毁时 removeEventListener定时器泄漏未清除定时器useEffect 返回清理函数闭包引用大对象闭包持有大对象引用避免在闭包中引用不需要的大对象缓存无限增长Map/Array 只增不减LRU 缓存设置上限高频事件无节流直接绑定 scroll/input防抖/节流每个子元素绑定事件forEach 绑定监听器事件委托大数据列表全渲染渲染 10000 行 DOM。

原创 JavaScript / TypeScript 易踩坑知识点 —— TypeScript 专属类

坑点错误写法正确写法滥用 any+ 类型收窄函数重载顺序通用签名在前具体签名在前未开启tsconfig 中开启非空断言滥用obj!.prop先做类型守卫类型断言错误类型守卫 + 类型断言失去类型检查定义明确的 interface混用对象类型用 interface，联合/交叉用 typenever 穷举不处理 default。

原创 TDD（测试驱动开发）详解

TDD（Test-Driven Development，测试驱动开发）在编写任何功能代码之前，先编写一个会失败的测试，然后通过编写最少的代码让这个测试通过，最后再重构优化。传统开发流程是"写功能 -> 再补测试"，而 TDD 把它反过来——“先写测试 -> 再写功能”。它的核心不是"为了测试而测试"，而是用测试来反向驱动设计和编码：测试用例先行逼迫开发者先想清楚"这段代码应该做什么、接口应该长什么样、边界在哪里"，从而写出更清晰、耦合更低、更易维护的代码。

原创 Vue3 与 Angular 处理 RESTful 动态路径接口规范文档

时可以获得完整的类型提示。

原创 JS/TS 易踩坑知识点 — 数字与精度类

坑点错误写法正确写法浮点精度用toFixed()或整数运算金额计算直接用浮点数用分（整数）存储和计算parseInt大整数用BigInt精确比较a === b用空字符串判断str === ''布尔转换if (str)

原创 JS/TS 易踩坑知识点 — 数组与对象方法类

坑点错误写法正确写法数字排序forEach 退出splice 返回值以为返回新数组返回被删除元素for…in 遍历数组浅拷贝{...obj}删除属性。

原创 JS/TS 易踩坑知识点 — 模块化与工程化类

坑点错误写法正确写法循环依赖提取公共模块或动态 import导出混用默认导出用命名导入区分 default 和 named import动态导入CommonJS 引用拷贝ES Module 的 live binding文件有 console.log标记打包体积全部打包路由懒加载 + 动态 import。

原创 JS/TS 易踩坑知识点 — 自动分号插入（ASI）

场景错误写法正确写法return 换行return\n{}return {}函数表达式前let x = 1;数组/对象前let a = 1;[1,2,3]模板字符串前hello``let x = 1;hello``通用规则依赖 ASI始终显式写分号 + ESLint。

原创 JavaScript / TypeScript 易踩坑知识点 —— 运算符类

坑点错误写法正确写法逻辑短路误判row.isShelf && '下架''下架' : '上架'误伤 0误伤空字符串可选链报错a.b.ca?.b?.c一元加号不确定转换结果显式用Number()赋值当比较if (x = 1)位运算混淆和&&混用语义明确选择。

原创 JavaScript / TypeScript 易踩坑知识点 —— 异步编程类

坑点错误写法正确写法回调地狱多层嵌套回调Promise 错误吞掉不加 .catch()链式末尾加 .catch()async 未捕获不在 try/catch 中调用外部 try/catch 或内部捕获Promise.all 中断一个失败全部中断forEach 中用 awaitfor…of包装为 Promise竞态条件不控制请求顺序AbortController 或序列号Promise 反模式new Promise 包装已有 Promise直接返回 Promise。

原创 JavaScript / TypeScript 易踩坑知识点 —— 作用域与变量类

坑点错误写法正确写法变量提升var a = 1或let a = 1块级作用域var在 if/for 中letconstfor 循环闭包for…in 遍历原型遍历数组for...infor...of或forEach默认声明varconst（优先）/let（需重赋值时）

原创 JavaScript / TypeScript 易踩坑知识点 —— 类型与转换类

坑点错误写法正确写法相等比较a == ba === b加法拼接陷阱'5' + 1判断 null/undefinedv === null判断 NaNv === NaN判断数组判断空对象obj === {}对象比较a === b（内容不同）深比较函数布尔转换或!!val。

原创 JavaScript / TypeScript 易踩坑知识点完全指南 -假值（Falsy Values）完全指南

检查方式0''nullundefinedNaNfalse42'0'{}!

原创 Vue 3 中使用 Promise

💡 核心原则：Promise 负责管理异步流程，Vue 的响应式数据负责驱动视图更新。你只需要把 Promise 的结果赋值给 ref 或 reactive 的变量，Vue 就会自动帮你刷新页面。Vue 3 中使用 Promise 非常普遍，核心思路是：在组件中发起异步操作 → 拿到结果后更新响应式数据 → Vue 自动刷新视图。下面从实际场景出发帮你梳理。

原创 vue3里“devDependencies 是开发环境依赖，dependencies 是生产环境依赖”

(注：在较新的 npm 版本中，直接运行 npm install @vicons/fluent 默认就是加 -S 参数，会写入 dependencies)这样包只会下载到本地的 node_modules 文件夹中，但不会修改你的 package.json 文件。

原创 前端“伪防盗链”方案

如果你使用的是 Vue，强烈建议封装成一个自定义指令（Directive）。这样你只需要在需要保护的。标签上加一个 v-protect 即可，非常干净。前端“伪防盗链”方案。

原创 浏览器在请求外部图片（403 Forbidden）问题

前端开发中非常实用的一个属性配置，通常用于解决图片防盗链（403 Forbidden）问题。

原创 vue3 语法糖中withDefaults的用法

【代码】vue3 语法糖中withDefaults的用法。

原创 在 Angular 项目中实现国际化（i18n）和翻译 使用ngx-translate

/</

原创 Bootstrap 4 常用工具类速查表

Bootstrap 4 常用工具类速查表

原创 echarts

【代码】echarts。

原创 在 VSCode 里遇到报红是因为 Angular 编译器无法识别

原创 现在一个项目起了两个 在一个vscode写的 但是另一个vscode找不到这个分支

使用命令面板强制获取。

原创 框选主体截图

框选主体截图 naiveui 截图

原创 前端文字转语音

/ 1. 声明 window 上可能存在 webkitAudioContext。// 2. 使用声明好的变量创建上下文。// --- 关键修改结束 ---// 音量放大 2 倍（可调）

原创 Element Plus 的 ＜el-table＞ 怎么点击请求后端接口 tableData 进行排序而不是网络断开之后还可以自己排序

使用 sortable=“custom” 后，Element Plus 不会对 :data 做任何排序操作，只负责通知你用户点了哪个字段、要升序还是降序。sortable 属性一旦设置为 true（或 ‘custom’ 以外的值），Element Plus 默认启用前端排序。所以在网络失败、fetchData 没更新数据的情况下，用户看到的是 前端临时排的结果，而非真实后端数据顺序。这样修改后，即使网络断开，点击排序也不会出现“前端乱排”的情况，行为完全可控 ✅。

原创 echarts 的用法

【代码】echarts 的用法。

原创 echarts折线图的 线条的样式怎么控制

【代码】echarts折线图的 线条的样式怎么控制。

原创 用nz-tabel写一个合并表格

用nz-tabel写一个合并表格。

原创 每个元素后面加“、”，但最后一个元素不加

在 Angular 中，如果你想使用 *ngFor 遍历一个数组，并在每个元素后面加“、”，但最后一个元素不加标点符号，你可以使用 $last 这个由 *ngFor 提供的上下文变量来判断是否是最后一个元素。假如在vue 里 每个元素后面加“、”，最后一个不加 warningPromptSkuList = [‘A001’, ‘B002’, ‘C003’]

原创 前端项目中实现页面看起来像是浏览器缩放到了80%的效果

需要注意的是，直接缩放整个html标签可能会导致一些布局问题，特别是在考虑页面宽度和滚动条时。因此，你可能需要根据具体的设计进行调整，比如设置合适的视口(viewport)或者父容器的样式以确保布局正确。要在前端项目中实现页面看起来像是浏览器缩放到了80%的效果，你可以通过CSS来调整整个页面的缩放比例。zoom属性是非标准的CSS属性，但广泛支持于大多数桌面浏览器中（除了大部分移动浏览器）。使用transform与scale函数是一种更符合标准且跨浏览器兼容性更好的方法，包括对移动设备的支持也很好。

原创 vue3使用 Tailwind CSS （4.多版本）

【代码】vue3使用 Tailwind CSS （4.多版本）

原创 在 Angular 中， `if...else if...else`

或者，如果可能的话，考虑将这些逻辑移至组件类中，并通过一个方法返回需要显示的内容，这样可以保持模板的整洁。假设你有一个变量 status，你希望根据它的值显示不同的内容。指令结合其else模板功能来实现类似的效果。在 Angular 中，模板语法本身并不直接支持。这样的多条件分支结构。不过，你可以通过使用。

原创 vue3使用tailwindcss报错问题

注意： 要看清版本 现在安装的tailwindcss 是4.x 官网是3.x。地址：https://tailwindcss.com/