吴华锦 | 前端开发工程师🎓 学历： 深圳大学 | 电子信息工程 | 全日制本科📧 邮箱： wuhuajin09@163.com📞 电话： 13927419410📝 博客： https://wuhuajin.com🐙 Github： https://github.com/whjin
8年专业前端开发工程师，13年IT行业全流程项目落地经验。
具备复杂业务系统与软硬件一体化产品的前端全链路开发经验。
具备从0到1的前端架构设计、技术选型、功能开发、性能优化与全周期项目交付能力。
熟悉 Vue2/Vue3 全家桶、UniApp 跨端开发框架核心技术栈，熟练运用 TypeScript、React 进行业务功能开发。
掌握 前端工程化、WebRTC实时音视频、多厂商硬件SDK集成、国产化适配、老旧系统重构与性能优化 等核心技能。
业务上曾担任公司 核心产品线前端技术负责人，主导智能终端系列应用前端架构设计、远程会见三合一平台、智能视频行为分析平台等多款核心产品迭代开发，覆盖公安司法监所、航空、文旅电商等多个领域。
核心参与 / 主导完成多个省内外大型项目的前端交 ...
表达式全集
字符
描述
\
将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。
^
匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
$
匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。
*
匹配前面的子表达式零次或多次。例如，zo*能匹配“z”以及“zoo”。*等价于{0,}。
+
匹配前面的子表达式一次或多次。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
?
匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“does”或“does”中的“do”。?等价于{0,1}。
{n}
n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“ ...
输入框防抖指令 v-debounce123456789101112const debounce = { inserted: function (el, binding) { let timer; el.addEventListener('keyup', () => { if (timer) clearTimeout(timer); timer = setTimeout(() => { binding.value(); }, 1000); }); },};export default debounce;
复制粘贴指令 v-copy1234567891011121314151617181920212223242526const copy = { bind(el, { value }) { el.$value = value; el.handler = () = ...
两数之和123456789function twoSum(nums, target) { for (let i = 0; i < nums.length; i++) { let num = nums[i]; let targetIndex = nums.indexOf(target - num); if (targetIndex !== -1 && targetIndex !== i) { return [i, targetIndex]; } }}
日期格式化12345678910111213141516171819202122// 格式化日期类型,fmt格式可选择function dateFormat(fmt, date) { let ret; let opt = { "Y+": date.getFullYear().toString(), // 年 "M+": (date.getMont ...
对象方法
方法
说明
Object.hasOwb()
安全地检查属性避免原型链带来的问题
Object.hasOwb()
安全地检查属性避免原型链带来的问题
Object.groupBy()
将数组数据分组为对象比 reduce() 更简洁的替代方案
Object.create()
基于原型的继承在不使用构造函数的情况下创建对象
Object.keys()
遍历对象属性校验对象是否为空
Object.values()
从API数据中提取值对值进行求和和等操作
Object.entries()
将对象转换为Map使用 for...of 进行遍历
Object.fromEntries()
将键值对重新转换为对象清理或转换API对象
Object.assign()
合并对象创建浅拷贝
Object.seal()
当对象结构必须保持不变时使用防止意外删除属性
Object.freeze()
防止意外修改常用于状态管理
异步编程有哪些实现方式
回调函数：存在问题，回调地狱、代码耦合度高、不利于代码维护
Promise:链式调用
generat ...
批量清理副作用effectScopt是Vue3官方推出的API，核心能力就是 批量捕获并管理作用域内创建的所有响应式副作用（包括 watch、watchEffect、computed等），可以通过一次 stop 调用统一停止所有副作用，专门解决大型应用中多副作用的繁琐管理、遗漏清理导致的内存泄漏问题。
异步组件Vue3提供的 Suspense 内置组件，原生支持处理异步组件的加载状态，可通过 default 插槽渲染异步组件，fallback插槽渲染加载中的兜底内容，是Vue官方推荐的异步加载状态处理方案。
异步组件的核心设计目标就是 代码分割（Code Splitting），使用动态 import()引入的异步组件，在项目构建时会被打包工具（webpack/vite）拆分为独立的 chunk 文件，不会被打包到主 chunk 中，以此实现按需加载、减小首屏包体积的优化效果。
路由路由参数解耦
Vue Router官方推荐通过路由配置的 props选项将路由参数传递给组件，核心优势是 实现路由与组件的解耦：
布尔模式：给路由配置：props: true，会自动将动态路由的 param ...
搭建开发环境**安装react-native-cli**：npm i -g react-native-cli
Android SDK安装Android SDK并启动进行配置：
配置环境变量
123export ANDROID_HOME=~/Library/Android/sdkexport PATH=${PATH}:${ANDROID_HOME}/toolsexport PATH=${PATH}:${ANDROID_HOME}/platform-tools
Android 虚拟机设定Genymotion的Android SDK 位置（Android SDK 的路径可以在 SDK Manager 上找到）。
模拟器有多款模拟器可供选择，Android Studio自带，Genymotion和夜神模拟器，推荐选择夜神模拟器。
配置方法：
在Nox/bin目录运行nox_adb.exe connect 127.0.0.1: ...
用户权限控制
Token身份管理：登录验证通过后，服务端返回唯一身份 token 存于 localStorage；token 为 Session 级（浏览器关闭即失效），后端每周固定刷新 token 强制用户重登，保障账号安全。
路由拦截校验：页面加载先检查本地 token，无 token 则跳转登录；有 token 则回传后端拉取最新用户信息，单点登录场景支持设备互踢，确保数据最新。
前后端权限协同：
前端：在路由表中通过 meta 字段定义每个路由所需的权限（如角色）；登录后获取用户 role，与路由 meta 中的权限对比，动态生成可访问路由表，实现页面级（含少量按钮）访问限制。
后端：对所有带 token 的接口请求做权限校验，是安全核心，无权限则返回对应状态码由前端处理。
Vuex路由管控：Vue初始化仅挂载登录页等无权限公共路由；登录后通过 Vuex 管理权限路由表，动态挂载路由并渲染侧边栏。
作用域插槽Vue3中 h() 函数的标准签名为：h(组件/标签, 属性对象, 子节点/插槽对象)。
作用域插槽的核心是 通过函数接收子组件传递的上下文数据，在Vue3中，给组件 ...
骗：骗局的“真理化”与认知觉醒不要总是觉得身边人在骗你，他们没有那么大的本事，也没有那么多的想法。真正骗你的人，你已经帮他们数了很多年的钱了。
骗局的本质是“未被揭露的利益剥夺”，其“顺利运行时被视为真相”的特性，使其成为一种“隐形的真理表现形式”。2026 年，随着信息传播效率的提升，骗局的“伪装性”将更强——无论商业领域的虚假宣传、金融市场的庞氏骗局，还是社会层面的认知误导，都可能在“合理”的外壳下运行。但与此同时，一小部分人的“认知觉醒”（如意识到“真相背后的利益掠夺”）将推动庞氏骗局的“定义重构”，促使社会重新审视“信任”与“利益”的边界。
斗：从“战”到“缠斗”的长期博弈“战”是激烈的冲突，“斗”是阴柔的博弈。战可以更快解决矛盾，打造新的秩序。斗是对利益的争夺，但却无意重塑既有格局。
2025 年，全球进入“战”的年代（贸易战、科技战、舆论战）；2026 年，“战”的局限性将暴露——理想中的“正义战胜邪恶”的童话不存在，取而代之的是“多方力量的反复缠斗”。这种“斗”是复杂的、长期的，甚至是“没有赢家”的：企业间的竞争不再是“一次性胜负”，而是“持续的资源争夺”；国家间的 ...
音视频音视频元素的事件可分为三大核心类别：
加载类：loadstart、progress、abort、error、loadeddata、loadedmetadata
播放控制类：play、pause、playing、ended、ratechange、volumechange
进度类：timeupdate、seeking、seeked、waiting、stalled
浏览器渲染流程浏览器渲染是固定的串行流程，每一步都依赖前一步的输出结果。
第一步：解析 HTML 并构建 DOM 树浏览器接收HTML文档后，首先会逐行解析HTML标签，将其转换为浏览器可识别的节点对象，最终生成完整的DOM树（文档对象模型），这是整个渲染流程的基础；同时浏览器会并行解析CSS，生成CSSON树（CSS对象模型）。
第二步：构建 render 树（渲染树）浏览器将DOM树和CSSON树结合，过滤掉不可见节点（如设置 display: none; 的元素、<head> 标签等），只保留需要渲染到页面的可见节点，生成渲染树，为后续的布局、绘制提供核心依据。
第三步：布局 render 树（ref ...
