m0_47999208的博客

原创 ts中的注释

字段、接口、属性、参数、返回值常用写法，直接复制就能运行体验。

原创 文件上传接口测试

【代码】文件上传接口测试。

原创 svg动态样式

动态大小：用动态颜色：用不变形：必须加viewBox可改色前提：SVG 内部不要写死fill。

原创 skills

Ai工具：https://sofindai.com/categoriesskill市场：https://agentskill.sh/?utm_source=sofindai.com

原创 埋码，浏览器指纹

document.reference:当前页面是从何处跳转过来的（页面内点击过来，不是手动切换url， 也不是浏览器打开的不同页面切换可以获取到的）referrerreferrerreferrer.type // 跳转类型：navigate/reload/back_forward整理的字段 + 可直接复制的 JS 代码，分「基础隐蔽」「强指纹（Canvas/WebGL/ 音频）」「行为指纹」三类，都是埋码常用、普通用户感知不到的。说明：所有都是浏览器原生 JS 获取，不需要权限，无痕模式也能拿到。

原创 短点调试js

官方示例开发者学习文档。

原创 CSS颜色

表格方案作用范围兼容性适合场景整个元素✅ 极高暗黑模式、图标反色、整体换肤单个颜色变量⚠️ 现代浏览器动态主题、变量级补色仅色相✅ 高只转色相、保留亮度MDN Web Docs。

原创 JSONP

会内存泄漏，DOM 节点堆积 + 全局函数不回收；删 script 节点 + 删全局回调 + 清定时器 + 解绑事件 + 变量置空；项目里直接用上面Promise 封装版，零泄漏、无全局污染、可复用。

原创 JSZip的使用

要在浏览器中使用 ‌‌ 压缩一个文件夹（即包含多个文件和子目录的结构），可以借助 HTML5 的 ‌‌ 和 ‌‌ 库实现。

原创 UMD和IIfe

IIFE = 仅浏览器（最小、最快）UMD = 全环境通用（浏览器 + Node + AMD + ESM）需要我帮你把你的配置改成 UMD 万能版吗？IIFE格式和UMD格式的js有啥区别长啥样子我用最简单、最直观、带样子的方式给你讲清楚！你一看就懂，再也不会混淆！表格对比IIFEUMD运行环境仅浏览器全环境（浏览器 + Node+AMD）代码大小最小稍大一点代码样子简单圆括号一堆 if 判断适合你✅ 完美❌ 没必要。

原创 水平，垂直居中

代码简洁、响应式友好（IE10+）。上，不是直接加在行内元素自己身上。让子元素左上角居中，再回退自身尺寸一半。

原创 性能优化学习

默认情况下，所有的 JS 代码，包括业务代码、三方依赖以及 Webpack 所依赖的模块化代码都会被打包进入一个 bundle 文件中。当访问这个页面时，首先会下载这个页面的 HTML，然后进行解析，当解析到 script 标签时就会下载该标签 src 所引用的资源，由于所有的代码都在一个 bundle 文件中，所以该文件势必会非常大，就会造成白屏时间过长，严重影响首页的加载速度。动态导入允许在代码执行过程中按需加载特定的模块，只有当模块被真正用到时，相关的代码才会被加载和执行。动态引入 JS 文件。

原创 Node.js 创建可二次编辑的 HTML 文档并生成文件

Node 环境必须用 jsdom模拟 DOM，才能使用newDoc是标准 DOM 对象，支持所有浏览器 DOM 二次编辑操作最终通过fs模块写入文件，生成可直接运行的真实 HTML代码可直接复制运行，无其他依赖，轻量稳定。

原创 创建文档 / 元素

全部是，不依赖任何框架，一看就懂、一用就会。

原创 nest，java对比

DomainEntity（数据库表结构）MapperRepository（操作数据库）DTO/VODTO（接收前端参数）

原创 ruoyi前后端分离版本

RuoYi-Vue 分模块，是「代码层面的模块化拆分」，为了解耦、复用、好维护；不是「运行层面的微服务拆分」—— 它最终还是一个单体应用，所有模块跑在同一个进程里我给你画成层级结构图 + 依赖箭头，一眼看懂谁依赖谁、谁是入口、谁是公共包。

原创 nest-admin，static， Class内new Class, constructor, public，Injectable，Repository，ioc，dto, entity

不加 static：属于实例（造出来的对象）加了 static：属于类本身（图纸本身），不需要 new 就能用加 static → 属于类，不用 new 就能用不加 static → 属于实例，必须 new 才能用静态方法不能访问普通属性静态属性全类共享，只有一份类：模板、图纸实例：根据模板 new 出来的真实对象你代码里return一个 new 出来的、真实可用的 ResultData 对象。

原创 nest架构

Nest.js 标准架构是，遵循原则，从请求入口到数据库 / 外部服务，层层解耦、职责单一。下面用讲清楚，一眼看懂层级关系与调用链路。

原创 h5开发：输入框被键盘遮挡后h5滑动页面、苹果手机打开弹框后背景可以随页面滑动滚动

/ 12. 在弹框消失的时候，给弹框的父元素的父元素的父元素的父元素移除这个class，让父元素的父元素的父元素的父元素的position为relative。// 11. 在弹框出现的时候，给弹框的父元素的父元素的父元素的父元素添加一个class，让父元素的父元素的父元素的父元素的position为fixed。// 9. 在弹框出现的时候，给弹框的父元素的父元素的父元素添加一个class，让父元素的父元素的父元素的position为fixed。###输入框被键盘遮挡。

原创 html,vue,react中的点击事件

原创 document.reference

从a页面内部跳转到b页面：在b页面获取document.reference可以知道b页面是从哪里来的。一定是从页面内部的某个超链接跳转过才可以，常常用于埋点数据统计。

原创 实例化后的数据跟新，computed 同时写 get() 和 set()

只有get依赖其他值做计算展示有get + set既要计算展示，又要能修改并同步回源头双向绑定 + 状态中转 + 表单格式化 + 全选反选。

原创 window环境使用git-filter-repo

你从 GitHub 拉取下来之后。

原创 剪头函数和普通函数的this，apply,bind,call

1、apply，bind, call的第一个参数是this（和函数内部的this相关的，会指向新的this）1.剪头函数：他的规则是，不管谁调用，函数内部的this是全局变量。2.普通函数：在函数调用时，谁调用，this就是谁。3、bind方法返回一个新的函数要手动再次调用。call的第其余参数是一个一个值。2、（和函数的入参数相关的）apply的第二个参数是数组。bind的第二个参数是数组。

原创 时间复杂度

O (log n)：常见于「二分查找」「平衡二叉树操作」等，每步将问题规模减半。O (n log n)：常见于「归并排序」「快速排序（平均情况）」「堆排序」等，结合了线性遍历和对数级拆分。

原创 LeetCode 动态规划

6 道题的优化版均实现空间复杂度 O (1)，是面试中更推荐的写法，核心是用有限变量保存前序状态，替代完整 DP 数组；所有代码的注释都标注了DP 状态定义和转移逻辑，对照注释能快速回忆每道题的 DP 核心；做完这 6 道题后，可通过「复写代码（不看答案）」检验是否真正理解，这是掌握 DP 的关键步骤。

原创 LeetCode 第一题

LeetCode 第一题（两数之和）用哈希表解法的核心是，将查找目标值的时间从 O (n) 降到 O (1)，整体时间复杂度 O (n)，空间复杂度 O (n)。

原创 hash（map,object）结构

数组的核心优势是按位置快速访问 + 天然有序，适合 “按顺序存 / 取” 的场景；哈希表的核心优势是按键快速映射，适合 “按标识查 / 存” 的场景；两者最核心的区别是索引方式：数组是 “数字位置索引”，哈希表是 “任意键映射索引”。选数组：当需要有序存储按位置访问 / 操作（如列表渲染、排序、切片）时，数组是最优解，核心优势是 “下标 O (1) 访问 + 天然有序”。选哈希表：当需要快速键值映射去重 / 统计缓存数据时，哈希表是最优解，核心优势是 “按键 O (1) 查找 + 键唯一性”。

原创 H5 中调用微信的原生方法

权限前置：所有接口需先完成wx.config配置，且jsApiList必须包含对应接口名；域名校验：分享链接、图片链接、页面 URL 必须匹配公众号配置的「JS 接口安全域名」，且需为 HTTPS；支付特殊要求：微信支付需公众号开通支付权限，且paySign需后端按微信支付规则生成；调试技巧：配置可查看接口调用日志，优先用「微信开发者工具」调试；兼容处理：部分接口（如分享）在微信新版本中需配合「自定义分享」规则，建议参考最新官方文档。

原创 app和h5通讯

JSBridge 是一个开源库（如 GitHub 的 xinyuanhe/JsBridge），用于实现 Android WebView 与 JavaScript 的双向通信，支持 Native 调用 JS 方法或 JS 调用原生功能（如摄像头、支付）。以下是详细解析：概念与核心作用。

原创 全局注册关闭弹框方法

【代码】全局注册关闭弹框方法。

原创 大文件分片上传

【代码】大文件分片上传。

原创 移动端如何拉起安全键盘，input 类型为 password无法截图 ，出现的小眼睛图标, 输入框花活

// 切换 input 的 type 属性// 可选：切换按钮图标'🙈' : '👁️';});

原创 媒体查询

媒体查询核心语法是@media 媒体类型 and 媒体特性 { 样式 }screen+ 宽度 / 横竖屏是最常用组合；用于按屏幕宽度适配，用于检测横竖屏；移动端使用时必须配置视口标签，且注意样式的层叠顺序。可以的，CSS 媒体查询专门提供了 orientation属性来检测设备的横竖屏状态，能在切换时实时触发样式变化。/* 竖屏（默认） */body {/* 横屏 */body {关键注意点基于视口的宽高比判断，portrait是宽 ≤ 高，landscape是宽 ＞ 高。

原创 h5在浏览器，app内的调试，非真机调试，iqoo真机调试要电脑和手机都要安装互传软件，手机如何模拟平板，页面放缩和像素点的关系，以及和图片像素的关系

解压两个压缩包后复制adb所在的文件路径添加系统变量。就可以再任何地方使用adb命令了。

原创 js中进制之间的转化

转换场景核心方法关键函数十进制 ↔ 其他进制字节数组 ↔ 十六进制手动遍历 + 补零uint8ToHexhexToUint8字节数组 ↔ ASCIIcharCodeAt这些是 JS 中进制转换的核心逻辑，尤其在处理文件签名、加密、网络数据时高频使用，结合之前的 PDF 上传场景，能彻底理解 “魔数校验” 的底层原理。

原创 组件库的有些点击事件是name-click这是如何分装de

命名逻辑name-click是语义化命名，核心是 “业务动作 + 事件类型”，区分原生事件，便于维护；封装核心Vue：通过定义自定义事件，内部监听原生click后emit派发；React：通过 Props 传递回调，内部触发回调实现；扩展能力：可在封装层统一处理防抖、节流、权限校验、日志埋点等通用逻辑，避免重复代码；使用体验：用户使用时和原生事件一致（Vue 用，React 用），降低学习成本。如果是其他框架（如 Angular），核心逻辑类似：监听原生点击事件，通过派发自定义的。

原创 剪头函数和普通函数

特性普通函数箭头函数this绑定动态绑定，取决于调用方式。词法绑定 (Lexical)，继承自外层作用域。arguments对象有自己的arguments对象。没有自己的arguments对象，会继承外层函数的。构造函数可以用作构造函数 (new Func()不能用作构造函数，会抛出错误。prototype属性有prototype属性。没有prototype属性。super关键字可以在类的方法中使用super。不能使用super。适用场景需要根据调用者动态改变this。

原创 XSS攻击

那么富文本的呢，由于富文本的实现原理就是就是给标签加上各种属性，富文本的可以做转义吗？普通的表单，表格的xss大家都是怎么防范的?除了普通的<>转义大家还有更好的办法吗。图片、视频（img，iframe）加粗、字号（css）

原创 在monorepo架构中如何配置提交规范，来使得代码提交优雅

Monorepo 提交规范的核心是「根目录统一配置 + 子包关联 + 交互式提交」，通过commitlint校验规则、husky绑定钩子、cz-git简化输入、changesets管理版本，既能保证规范统一性，又能兼顾开发体验。关键是让规范「不增加开发成本」，而是通过工具自动化实现「优雅提交」。如果使用 Turborepo、NX 等 Monorepo 工具，配置逻辑一致，只需调整workspaces目录和依赖管理命令即可。