Huajin Wu | Front-End Development LeadContact Information Email: wuhuajin09@163.com GitHub: https://github.com/whjin Personal Blog: https://wuhuajin.com Education: Shenzhen University, Bachelor of Electronic Information Engineering Professional SummaryResults-driven senior front-end development professional with 13+ years of end-to-end project delivery experience and 8+ years of leadership in front-end architect ...

表达式全集 字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“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 ...

React FiberReact Fiber是React 16引入的新协调引擎。它将渲染过程拆分成多个小的工作单元（Fiber），让React可以暂停、恢复、并根据优先级执行更新，从而实现流程的、非阻塞的UI。它也为并发渲染（Concurrent Rendering）和Suspense等特性打下基础。 每个Fiber节点都代表React树中的一个元素，并保存对父节点、子节点和兄弟节点的引用。React利用这种链式结构高效地进行Diff和UI更新。 useCallbackuse callback + React.memo 是React中解决“内联回调导致子组件重渲染”的 标准性能优化组合，既保证了功能不变，又能高效稳定地减少冗余渲染。 useCallback是React专门用于 缓存函数引用的Hook，它会在依赖列表不变时，返回同一个函数引用。将内联回调用 use callback 包裹，并精准限制依赖列表（只包含回调真正需要的变量），就能保证回调引用稳定，让 React.memo 的浅比较生效，从而避免子组件无意义重渲染，同时完全不改变原有功能。

性能优化 JS代码压缩 terser-webpack-plugin CSS代码压缩 css-minimizer-webpack-plugin HTML代码压缩 html-webpack-plugin html-minifier-terser 文件大小压缩 compression-webpack-plugin 图片压缩 loader image-webpack-loader Tree Shaking usedExports sideEffects purgecss-plugin-webpack 代码分离 splitChunksPlugin 内联chunk InlineChunkHtmlPlugin

批量清理副作用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: ...