- 博客(27)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 import 和 export的用法,如何快速记忆和理解
记住这个核心原则：**export是"给"，import是"拿"**。// 命名导入（具体功能）1. **Q**: 看到`import { something } from 'module'`，这是什么导入？**A**: 使用`import * as alias from 'module'`2. **Q**: `export default`和`export`的主要区别？**A**: 命名导入，从module中导入名为something的导出。1. **导出时**：思考这个模块的主要功能是什么？
2025-12-08 16:10:41
839
原创 点击标题实现升序降序恢复，适合数据频繁变动。
rawTableData: [], // 存储WebSocket原始数据。// roses 可能是 "+2.88%" 或 "-1.23%"// 都是数字或都不是，按字符串排序。// 数字开头的排前面。
2025-07-11 11:18:13
380
原创 前端面试：如何封装请求？实现思路 + 快速记忆技巧
掌握这套逻辑，面试时不仅能流畅回答，还能主动延伸讨论 **Token 刷新**、**请求竞态**等深度话题！2. **实际项目经验**：是否真的在项目中实践过，而非仅会用 `axios.get()`。- **取消请求**：用 `AbortController` 避免重复请求。### **🚀 封装请求的核心实现（以 Axios 为例）**- **缓存策略**：对 GET 请求添加 LRU 缓存。#### **1. 基础封装：创建实例 + 统一配置**- **重试机制**：对特定错误（如网络超时）自动重试。
2025-06-13 00:11:19
342
原创 Object.assign()、...扩展运算符、Array.concat()、Array.slice()属于深拷贝还是浅拷贝
"在 JavaScript 中，`Object.assign()`、扩展运算符、`Array.concat()` 和 `Array.slice()` 都属于浅拷贝，它们只复制对象的第一层属性。要实现真正的深拷贝，可以使用 `JSON.parse(JSON.stringify())`（注意其局限性）、递归克隆或第三方库如 Lodash 的 `_.cloneDeep()`。| `Object.assign()` | 浅拷贝 | 否 | 合并对象/创建浅拷贝 |
2025-06-11 12:32:47
357
原创 vue2 的 mix 混入和 vue3 的 hooks 有啥区别
Vue3 的 Composition API (Hooks) 解决了 Mixins 的许多痛点，提供了更好的代码组织、更强的类型支持和更清晰的逻辑来源。- **Mixins**：基于选项式 API，将代码分散到各个选项（data、methods、computed等）中。- **Mixins**：容易发生命名冲突，后引入的 mixin 会覆盖之前定义的属性/方法。- **Mixins**：难以追踪属性/方法的来源，特别是使用多个 mixin 时。- **Mixins**：固定的选项合并策略，灵活性有限。
2025-06-11 12:28:25
750
原创 for...of 和 for...in 的区别及记忆技巧
**遍历内容** | 遍历可迭代对象的**值** (如数组元素) | 遍历对象的**可枚举属性** (包括原型链) |- **对象属性遍历**：使用 `for...in` (通常配合 `hasOwnProperty` 检查)// 输出: 'a', 'b', 'c'- 想查看**属性名**时用 `for...in` (in = 在对象里面)- **数组遍历**：优先使用 `for...of` 或 `forEach`- 想遍历**值**时用 `for...of` (of = 值的)
2025-06-11 12:26:32
242
原创 localStorage、sessionStorage 和 Cookie 的区别及记忆技巧核心区别对比
特性 | localStorage | sessionStorage | Cookie |- 想象一个柜子(localStorage 5MB)、一个抽屉(sessionStorage 5MB)和一个小盒子(Cookie 4KB)| **生命周期** | 永久存储，除非手动清除 | 会话级别，标签页关闭即清除 | 可设置过期时间，默认浏览器关闭失效 |
2025-06-11 12:25:20
248
原创 Pinia 的 patch 和 subscribe 使用及与 Vuex 的区别
**Mutation** | 没有 mutation，直接修改或使用 $patch | 必须通过 mutation 修改 state |console.log('变化类型:', mutation.type) // 'direct' | 'patch object' | 'patch function'| **模块系统** | 自动模块化，多个 store 文件 | 需要手动划分 modules |
2025-06-11 12:24:32
452
原创 localStorage、sessionStorage 和 Cookie 的区别及记忆技巧核心区别对比
特性 | localStorage | sessionStorage | Cookie |- 想象一个柜子(localStorage 5MB)、一个抽屉(sessionStorage 5MB)和一个小盒子(Cookie 4KB)| **生命周期** | 永久存储，除非手动清除 | 会话级别，标签页关闭即清除 | 可设置过期时间，默认浏览器关闭失效 |
2025-06-11 11:25:56
358
原创 如何快速理解与记忆 call、apply、bind 的区别？
**`bind`** | 返回一个新函数，`this` 被永久绑定 | `fn.bind(thisArg, arg1, arg2, ...)` | **逐个传递（可部分传参）** | **“绑定借钱，以后随时要”** || **`call`** | 立即执行函数，并指定 `this` | `fn.call(thisArg, arg1, arg2, ...)` | **逐个传递** | **“打电话借钱，一个一个说”** |I'm 25. My job is developer.
2025-06-08 17:19:29
378
原创 Webpack 插件的作用及构建流程中的关键点
**资源输出** | `HtmlWebpackPlugin` | 生成 HTML 文件 || **结束阶段** | `BundleAnalyzerPlugin` | 分析包大小 || **优化阶段** | `SplitChunksPlugin` | 代码分割优化 || **初始化** | `EnvironmentPlugin` | 注入环境变量 || **编译开始** | `ProgressPlugin` | 显示编译进度 || **模块处理** | `IgnorePlugin` | 忽略特定模块 |
2025-06-05 23:46:39
416
原创 Vuex 数据刷新丢失问题：快速理解与记忆指南
*Vuex 数据刷新丢失的根本原因**：Vuex 的状态存储是 **内存存储**（RAM），当页面刷新时，浏览器会重新加载 JavaScript 应用，导致内存中的状态被重置。"Vuex 的状态存储在内存中，页面刷新会导致 JavaScript 应用重新加载，内存中的状态自然就被清空了"- "推荐使用 vuex-persistedstate 插件自动处理持久化"key: 'my-vuex-storage' // 默认是'vuex'**问题**："为什么 Vuex 的数据刷新后会丢失？
2025-05-29 11:23:39
364
原创 vuex 和 pinia 的区别，如何快速理解和记忆。
**API设计** | 基于选项式API (Options API) | 基于组合式API (Composition API) || **Vue版本** | Vue 2 官方状态管理 | Vue 3 推荐状态管理 || **学习曲线** | 概念较多(mutations/actions) | 概念简化(只有actions) |- **Pinia**：可以直接修改或通过action。"Vuex老牌选项式，Pinia新潮组合式，
2025-05-29 11:12:29
480
原创 前端面试：什么是强缓存和协商缓存，如何快速理解和记忆
**控制字段** | Cache-Control/Expires | ETag/Last-Modified |- 请求头会携带`Cache-Control: no-cache`和`Pragma: no-cache`- `Last-Modified`（响应） + `If-Modified-Since`（请求）**记忆口诀**："强缓存本地拿，不请求真潇洒，Cache-Control是老大"- `ETag`（响应，优先级高） + `If-None-Match`（请求）
2025-05-28 13:59:00
325
原创 什么是虚拟 dom 和 diff 算法，如何快速记忆和理解
1. **直接操作DOM代价高**：每次DOM操作都会触发重排（Reflow）和重绘（Repaint）3. **跨平台能力**：虚拟DOM抽象了渲染过程，可以渲染到不同平台（Web、Native等）**记忆口诀**："Diff算法找不同，同级比较是关键，key值帮助认身份，最小更新效率高"**记忆口诀**："虚拟DOM是JS对象，代表真实DOM结构，操作它更快更高效"2. **批量更新优化**：虚拟DOM可以将多次更新合并为一次真实DOM操作。1. **同级比较**：只比较同一层级的节点，不跨层级比较。
2025-05-27 20:29:49
346
原创 什么是 this 指针，如何快速记忆
**隐式绑定**：好比“谁打电话，this 就是谁”（`user.sayHi()` → `user` 是 `this`）。> - **默认全局**：直接调用 `fn()` → `this` 是 `window`（严格模式 `undefined`）。> - **call/apply 强绑定**：`fn.call(obj)` → `this` 是 `obj`。- **规则**：用 `new` 调用构造函数时，`this` 指向**新创建的对象**。
2025-05-27 16:43:09
751
原创 前端面试，讲一下 promise，async，await，如何快速理解和记忆
**错误处理** | 需手动链式调用 `.catch` | 直接用 `try/catch` 捕获 |> 2. **错误处理**：Promise 需手动 `.catch`，async/await 直接用 `try/catch`。> - **下单中（pending）** → **送达（fulfilled）** 或 **取消（rejected）**> - **.then(吃外卖)** → **.catch(投诉)** → **.finally(收拾包装)**”
2025-05-27 16:41:21
300
原创 vue 的导航守卫有哪一些，如何快速理解和记忆
**全局解析守卫** `router.beforeResolve` (所有组件都准备好后)- **全局前置守卫** `router.beforeEach` (进入前的全面检查)- **组件内更新守卫** `beforeRouteUpdate` (路由参数变化时)- **组件内前置守卫** `beforeRouteEnter` (进入组件前)- **组件内离开守卫** `beforeRouteLeave` (离开组件前)- **路由独享守卫** `beforeEnter` (特定路由的专门检查)
2025-05-27 16:18:18
442
原创 前端面试：说下类和继承，如何快速记忆和理解。
*继承(Inheritance)**：可以想象成"基因遗传"，子类自动获得父类的特性，还可以有自己的新特性。**类(Class)**：可以想象成"蓝图"或"模具"，用来创建具有相同属性和方法的对象。- 静态方法：通过类直接调用，不能访问实例属性/方法，用`static`定义。1. **类是什么**：模板/蓝图，用于创建具有相同结构和行为的对象。- `static` 定义静态方法(类直接调用，实例不能调用)2. 在方法中，`super.method()`调用父类方法。
2025-05-27 15:48:41
393
原创 移动端如何适配不同的尺寸
**记忆点**：告诉浏览器"按设备宽度来显示，不要缩放"- **常用断点**：768px(平板)、480px(手机)- **特点**：子元素自动填充空间，适合组件级布局。- **记忆口诀**："rem根相关，vw视窗比"- **作用**：防止移动端浏览器默认的缩放行为。- **特点**：二维布局，适合整体页面结构。- **记忆点**："弹性盒子，自动排列"- **记忆点**："网格划分，自动填充"- **记忆点**："断点判断，样式切换"- **记忆点**："图片最大不超容器"
2025-05-27 15:28:03
449
原创 什么是作用域，快速理解和记忆
**块级作用域** | `{}` 内有效的变量（ES6+） | "保险箱里的东西" | `if(true) { let block = '临时' }` || **函数作用域** | 只在函数内部可访问的变量 | "房间里的秘密" | `function() { var local = '私密' }` || **全局作用域** | 整个程序都可访问的变量 | "地球级变量" | `var global = '世界'` |
2025-05-15 14:03:06
336
原创 什么是分片渲染和虚拟列表，如何联想记忆
**典型实现** | `requestIdleCallback` 分批处理 | `react-window` / `vue-virtual-scroller` || **实现方式** | 分批渲染（如 `setTimeout` 分帧） | 仅渲染可视区域 DOM（动态替换内容）|- **虚拟列表**：像**望远镜看风景**（只看视野内的部分，不关心远处）。- **分片渲染**：像**吃西瓜切块**（一次吃一块，避免噎住）。→ 答：**可以**！
2025-05-14 18:26:06
400
原创 什么是防抖和节流，快速联想记忆
**关键词** | **“最后再执行”** | **“匀速执行”** || **定义** | 事件触发后，延迟执行，若在延迟期间重复触发则重新计时 | 事件触发后，固定间隔执行一次，无视期间的其他触发 |> - 防抖关注**最后一次触发后的结果**，节流关注**固定间隔的执行节奏**。> - **节流**：像**心跳**（稳定间隔跳动，不因激动加速）。> - **防抖**：像**拍合照**（等人全部站定再按快门）。
2025-05-14 18:19:17
312
原创 什么是 TCP/IP协议，联想记忆。
**链路层** | 物理传输（网线、Wi-Fi） | **快递员送货** | Ethernet、Wi-Fi || **应用层** | 处理具体应用（如网页、邮件） | **写信内容** | HTTP、FTP、DNS、SMTP || **传输层** | 确保数据可靠传输 | **邮局打包/确认签收** | TCP（可靠）、UDP（快速） |> **口诀**：**“FIN、ACK、FIN、ACK——再见，收到，再见，收到！
2025-05-13 19:23:36
382
原创 什么是 http
**明文传输** | 默认不加密（HTTPS 是加密版）。| **基于请求-响应** | 客户端发请求（Request），服务器回响应（Response）。| **无状态** | 每次请求独立，服务器不记录用户状态（需 Cookie/Session 辅助）。**HTTP（HyperText Transfer Protocol）** 是用于从服务器传输超文本（如网页）到客户端的**应用层协议**，它是 Web 通信的基础。#### **1. 请求（Request）**
2025-05-13 18:42:20
4057
原创 事件循环机制
**微任务队列（MicroTask Queue）**：`Promise.then`、`MutationObserver`、`queueMicrotask`。- **宏任务队列（MacroTask Queue）**：`setTimeout`、`setInterval`、DOM 事件、AJAX。> 1. **同步代码**直接执行，异步任务分为宏任务（如 `setTimeout`）和微任务（如 `Promise.then`）。- **微任务**：VIP 订单（优先处理，如 `Promise.then`）。
2025-05-12 21:10:34
256
原创 什么是原型链？
每个对象都有一个隐藏的 `__proto__` 属性（指向它的原型对象），而原型对象也有自己的 `__proto__`，这样一层层向上追溯，直到 `null`，形成一条链式结构，称为原型链。每个对象都有 `__proto__` 属性指向它的原型对象，而原型对象也有自己的 `__proto__`，最终指向 `null`，形成一条链。- 不会的技能 → 问爸爸（`__proto__`） → 爸爸不会 → 问爷爷（`__proto__.__proto__`）→ ... → 祖宗不会（`null`）。
2025-05-12 19:24:57
466
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人