- 博客(236)
- 收藏
- 关注
RSS订阅
原创 源码分析之Leaflet V1.9.4 源码介绍
Leaflet.js 是一个开源的 JavaScript 库，用于创建交互式地图，其模块化架构设计使得代码结构清晰、易于扩展和维护。核心模块包括：control（管理用户交互控件）、core（处理地图基本功能）、dom（DOM 操作）、geometry（几何图形计算）、geo（地理编码与解码）、layer（图层管理）和 map（地图实例管理）。每个模块负责特定功能，开发者可以根据需求按需加载或扩展模块，提升代码的灵活性和维护性。Leaflet.js 的模块化设计不仅简化了开发流程，还支持自定义控件、图层和坐
2025-02-27 19:28:04
1521
原创 Pinia中实现监听action的原理
摘要 本文介绍了在Vue3+Pinia项目中监听Store中Action执行的方法。通过定义UserStore示例，展示了如何使用$onAction监听setName方法的执行过程，包括获取方法名、参数、返回值和错误处理。源码分析揭示了Pinia如何通过actionSubscriptions数组收集回调，以及如何包装Action方法实现监听功能。当Action执行时，会触发订阅的回调函数，从而实现对Action执行全过程的监控。这种机制为开发者提供了灵活的Store状态管理监控能力。
2025-11-28 16:08:33
237
原创 使用pinia-plugin-persistedstate如何清除localStorage中的数据
本文分析了Vue3项目中Pinia持久化数据清除失败的原因。当使用pinia-plugin-persistedstate插件时，直接操作localStorage.clear()无法清除缓存，原因是store状态变化触发的watch回调是异步执行的，导致持久化数据被重新存储。解决方案是封装StoreManager工具类，统一使用store.$reset()方法重置状态，避免直接操作缓存。文章指出问题根源在于Vue的watch异步特性，并提供了规范的store管理方案。
2025-11-25 16:07:50
454
原创 Vue3源码runtime-core运行时核心模块之provide依赖和inject注入详解
摘要 Vue3中的provide和inject提供了一种跨层级组件通信机制。provide将数据存储在组件实例的provides属性中，通过原型链实现继承。子组件通过inject从父组件链中查找对应值，支持默认值和工厂函数。这种方法避免了传统props逐层传递的繁琐，实现了更灵活的组件通信。源码分析展示了其实现细节，包括数据存储、查找和默认值处理机制。
2025-10-09 15:06:26
359
原创 Vue3源码runtime-core运行时核心模块之directive自定义指令
Vue3自定义指令开发指南 本文介绍了Vue3中自定义指令的开发方法和实际应用。主要内容包括： 自定义指令的基本概念和生命周期钩子函数 防抖指令的具体实现方案，支持灵活配置时间间隔 指令的全局注册方法 使用注意事项和性能考量 从源码层面解析指令的注册和绑定过程 文章通过防抖指令的完整示例，展示了如何从定义、注册到使用自定义指令的全流程，并深入分析了Vue3指令系统的底层实现原理，帮助开发者更好地理解和应用自定义指令功能。
2025-09-12 16:32:54
597
原创 Vue3源码runtime-core运行时核心模块之scheduler调度器
Vue3调度器scheduler负责管理异步任务队列和执行顺序，核心实现位于runtime-core/scheduler.ts。它通过queueJob管理组件更新任务，queuePostFlushCb处理DOM更新后的回调，使用微任务确保异步执行。flushJobs和flushPostFlushCbs分别处理主任务队列和后置回调队列，通过currentFlushPromise避免重复刷新。watchEffect默认使用主队列，而watchPostEffect则通过queuePostFlushCb延迟到DOM
2025-09-12 16:29:51
447
原创 Vue3源码runtime-core运行时核心模块之watch和watcherEffect源码解析
本文分析了Vue3中doWatch的实现原理及其衍生的四种监听方法。doWatch基于reactivity模块的watch进行封装，支持SSR和多种调度选项，通过配置scheduler、augmentJob等实现不同触发时机。watch需要显式指定监听源和回调，而watchEffect自动追踪回调中的响应式依赖。watchPostEffect和watchSyncEffect分别通过设置post和sync控制回调执行时机，前者在DOM更新后执行，后者同步执行。这些方法都基于doWatch的统一封装，提供了灵活
2025-09-10 10:07:33
459
原创 Vue3源码reactivity响应式篇之watch实现
摘要： Vue3的响应式系统通过watch和watchEffect监听数据变化，二者基于reactivity中的watch$1实现。watch支持监听ref、reactive、数组或函数，通过getter收集依赖，deep选项控制深度监听，scheduler调度执行时机。核心逻辑通过effect.run()获取新值，对比新旧值触发回调。watchEffect自动收集依赖，支持清理函数。实现涉及依赖追踪、变化检测和副作用管理等机制，为Vue3响应式提供了灵活的数据监听能力。
2025-09-10 08:48:05
1072
原创 Vue3源码reactivity响应式篇之computed计算属性
Vue3中的computed通过ComputedRefImpl类实现计算属性功能。computed方法接收函数或对象参数，返回ComputedRefImpl实例。核心机制包括惰性求值、响应式依赖追踪和缓存优化。refreshComputed方法根据状态标志、版本号等条件决定是否重新计算值，并触发依赖更新。计算属性通过getter访问时进行依赖收集，当依赖变更时通过notify方法调度更新。整个实现体现了Vue3响应式系统的精细控制，在保证功能的同时优化了性能。
2025-09-09 09:38:55
611
原创 Vue3源码reactivity响应式篇之批量更新
Vue3响应式系统通过批量更新机制优化性能，核心是三个变量（batchDepth、batchedSub、batchedComputed）和三个方法（batch、startBatch、endBatch）。当数据频繁修改时，startBatch开启批量模式，batch将订阅者加入队列暂存，endBatch在所有更新完成后统一执行。计算属性订阅者优先处理，普通订阅者后续执行，最后清理状态。这种链表式的批量处理避免了重复计算和DOM操作，显著提升了性能。
2025-09-09 09:37:59
384
原创 Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
本文分析了Vue3中响应式系统的核心机制。通过track和trigger方法实现依赖收集与触发，利用全局WeakMap对象targetMap建立响应式对象与依赖的映射关系。track方法在读取属性时建立依赖，将当前活跃的订阅者加入依赖集合；trigger方法在数据变更时触发对应依赖更新。系统针对数组等特殊类型做了优化处理，通过批处理机制提高性能，实现了高效精准的响应式更新。整个流程展现了Vue3响应式系统的设计思路与实现细节。
2025-09-08 11:29:36
508
原创 axios中如何取消http请求
本文介绍了如何利用AbortController解决前端开发中三种需要取消HTTP请求的场景：频繁点击按钮、参数变更时旧请求先返回、页面卸载时pending请求。通过封装ApiController类，在axios拦截器中管理请求控制器，实现重复请求自动取消功能。该方案使用Map存储请求标识和控制器，在请求和响应拦截器中进行添加/移除操作，有效解决了pending请求的取消问题。
2025-09-08 10:54:12
255
原创 Vue3源码reactivity响应式篇之EffectScope
Vue3中的EffectScope是一个用于管理副作用的响应式辅助类，它通过作用域机制组织和管理多个effect。每个组件实例会挂载一个EffectScope实例，在挂载时激活作用域(on)，卸载时停止作用域(stop)。核心功能包括： 作用域控制：pause/resume暂停/恢复作用域，stop停止作用域并清理所有effect和子作用域； 作用域运行：run方法在指定作用域内执行函数； 作用域激活：on/off方法临时切换当前激活作用域。EffectScope还提供effectScope、getCurr
2025-09-05 13:51:30
375
1
原创 Vue3源码reactivity响应式篇之ReactiveEffect类
本文解析了Vue3响应式系统中ReactiveEffect类的核心机制。该类负责封装和管理副作用函数，实现三大核心功能：1）自动跟踪依赖关系；2）响应数据变化触发更新；3）完整的生命周期管理（暂停/恢复/终止）。源码分析显示，通过flags状态位控制副作用执行状态，deps链表维护依赖关系，并提供run、trigger等方法实现响应式更新，同时支持调度器自定义执行时机。辅助方法如cleanupEffect和prepareDeps确保依赖关系的正确清理和初始化，为Vue3的高效响应式更新提供了基础支撑。
2025-09-05 10:56:51
611
原创 Vue3源码reactivity响应式篇之Dep类
本文深入分析了Vue3中Dep（依赖）类的实现机制。Dep作为响应式系统的核心，通过track和trigger方法完成依赖收集和更新通知。其核心是一个双向链表结构，通过Link类建立响应式数据与副作用订阅者的关联，并采用版本号机制优化更新效率。源码解析详细展示了Dep如何与ref、计算属性等协同工作，以及如何通过addSub等辅助方法管理依赖关系。整体设计体现了Vue3响应式系统的高效性与灵活性。
2025-09-05 10:54:50
474
原创 `void 0` 与 `undefined` 深度解析
文章摘要：JavaScript 中的 void 0 和 undefined 都表示"未定义"，但存在重要区别。undefined 是原始值，ES5 前可被重写；void 0 是始终返回 undefined 的安全运算符。关键差异包括可重写性、作用域安全性和代码压缩优势。现代开发中，ES5+环境下优先使用 undefined，但在库开发或需要绝对兼容性时建议使用 void 0。特殊应用场景包括阻止链接跳转和IIFE中的安全检查。性能差异可忽略，选择应基于代码安全性和可读性需求。
2025-09-04 14:22:01
806
原创 比较两个字符串的大小
本文探讨了比较两个由连字符分隔的数字字符串的问题。传统方法在数字很大时可能超出精度限制，因此提出使用生成器(yield)的方案：先去除分隔符，将字符串转换为数字序列，再逐位比较。通过生成器函数分解比较过程，避免了精度问题。代码实现显示，该方法能正确比较不同长度的字符串，如"1-2-3-4-7-67"和"1-29-3-4-67"会返回-1。这种方案特别适合处理可能超出计算机精度的超大数字比较。
2025-08-28 15:02:38
188
原创 Vue3源码reactivity响应式篇之Reactive
本文分析了Vue3中reactive模块的核心实现。reactive通过Proxy和Reflect将普通对象转换为响应式对象，支持多种响应式类型（普通/只读/浅层）。createReactiveObject函数根据目标对象类型创建对应的代理对象，并缓存到WeakMap中。文章详细介绍了reactive、readonly等API的实现原理，包括类型判断、缓存机制和代理处理函数的差异。这些API共同构成了Vue3响应式系统的核心基础。
2025-08-22 13:49:56
849
原创 Vue3源码reactivity响应式篇之Ref
Vue3 ref 核心功能解析 本文深入分析了Vue3中ref相关API的实现原理，主要包括： ref核心机制：通过RefImpl类创建响应式数据，利用getter/setter实现依赖收集和触发更新 层级响应控制：shallowRef创建浅层响应，仅对直接赋值敏感 类型转换工具：toRef将对象属性转换为ref，toReactive处理对象响应式化 特殊变体实现：包括只读的GetterRefImpl和属性代理的PropertyRefImpl 辅助函数：isRef判断、toRaw获取原始值等工具方法 关键设
2025-08-22 13:45:27
982
原创 Vue3源码reactivity响应式篇之Map、Set等代理处理详解
本文分析了 Vue3 中针对集合对象（Map/WeakMap/Set/WeakSet）的响应式代理实现。核心是通过 createInstrumentationGetter 方法创建代理 getter，该方法会根据只读和浅层响应式配置生成不同的处理器。文中详细解析了 createInstrumentationGetter 和 createInstrumentations 两个关键函数，展示了 Vue3 如何通过重写集合对象的原生方法（如 get、has、forEach 等）来实现响应式追踪。对于可变集合，还实
2025-08-21 08:51:22
937
原创 Vue3源码reactivity响应式篇之普通对象的代理解析
本文分析了Vue3响应式系统中四种基础对象代理方法的实现原理，包括可读写代理(mutableHandlers)、只读代理(readonlyHandlers)、浅响应式代理(shallowReactiveHandlers)和浅只读代理(shallowReadonlyHandlers)。这些代理方法都继承自BaseReactiveHandler基类，通过get拦截器实现依赖收集和属性访问控制。其中MutableReactiveHandler扩展了set方法用于属性修改时的触发更新，而ReadonlyR
2025-08-21 08:44:28
1064
原创 Vue3源码reactivity响应式篇之数组代理的方法
Vue3 中通过重写数组方法实现响应式处理，核心代码位于 arrayInstrumentations.ts。当读取响应式数组时，会检查是否为数组方法调用，若是则返回重写后的方法。arrayInstrumentations 实现了包括 push、pop、includes 等常用数组方法的重写，通过辅助函数如 reactiveReadArray、iterator 等处理深层响应式数据和迭代操作。这些重写方法在保证原有功能的同时，加入了依赖收集和响应式处理逻辑，使数组操作能够触发视图更新。
2025-08-20 13:12:40
1013
原创 Vue3源码reactivity响应式篇Reflect和Proxy详解
ES6引入的Proxy和Reflect是Vue3响应式系统的核心基础。Proxy用于创建对象代理，支持13种拦截操作，如属性访问、赋值、删除等。Reflect提供13个静态方法，与Proxy方法一一对应，用于操作对象，如Reflect.get、Reflect.set等。二者配合使用，Proxy处理拦截逻辑，Reflect执行默认操作，共同实现强大的对象操作能力。这些特性使它们成为现代JavaScript开发中不可或缺的工具。
2025-08-20 09:08:35
943
原创 JS中可迭代的数据类型
JavaScript中的可迭代对象是指实现了Symbol.iterator方法的对象，包括数组、字符串、Map、Set、TypedArray等内置类型。这些对象可以使用for...of循环遍历，而普通对象默认不可迭代。文章详细介绍了可迭代协议的工作原理、内置可迭代数据类型、如何使普通对象可迭代、for...of与for...in的区别，以及实际应用场景和常见问题解答，帮助开发者掌握现代JavaScript的迭代机制。
2025-08-08 13:53:49
694
原创 如何判别JS中的数据类型？一文教你弄懂typeof和instanceof
JavaScript类型检测指南：区分typeof与instanceof的适用场景 本文系统介绍了JavaScript中两种主要类型检测方法：typeof适用于基本类型检查（返回"string"、"number"等），但无法区分具体对象类型；instanceof则用于检查对象是否属于特定类的实例，能识别数组等对象子类型但无法处理基本类型。文章还对比了它们的优缺点，推荐了Array.isArray()等替代方案，并提供了现代JS开发中的类型安全实践建议，帮助开发者根据场
2025-08-06 16:09:00
852
原创 遍历深层对象指定层级的属性
本文介绍了深度优先遍历对象属性的JavaScript实现。通过递归函数dfs(obj, depth)，可以遍历指定深度层级的对象属性。函数会检查当前深度，输出属性键名，并对非null的对象值进行递归遍历。测试用例展示了不同深度下的输出结果：深度0无输出，深度1输出第一层属性，深度2输出前两层属性等。该实现具有深度控制、递归遍历、对象检测和null处理等特性，适用于配置解析、数据检查、调试工具等场景。核心算法通过递归调用栈实现深度优先遍历，可精确控制遍历深度。
2025-08-06 11:37:41
577
原创 JS中的扩展运算符...
JavaScript 中扩展运算符 ... 的行为在数组和对象上下文中有重要区别：[...a] 要求 a 是可迭代对象（如数组），而 {...a} 适用于任何具有可枚举属性的对象。普通对象默认不可迭代，因此 [...a] 会报错，但 {...a} 可以正常复制对象属性。要使对象可迭代，需实现 Symbol.iterator 方法。实际开发中应区分使用数组扩展（用于可迭代对象）和对象扩展（用于属性复制），或使用 Object.keys()/Object.values() 等方法处理对象属性。
2025-08-05 14:48:11
570
原创 JS中的Set和WeakSet联系与区别
本文对比了JavaScript中Set和WeakSet的核心区别与联系。Set允许存储任意类型值，支持遍历和获取大小，适合长期数据存储；WeakSet仅存储对象，不可遍历且无大小属性，具有自动垃圾回收特性。二者都保证值唯一性，提供add、has、delete方法。示例展示了Set用于数组去重和WeakSet用于对象状态管理的场景。建议根据需求选择：Set适合通用集合操作，WeakSet适合需要自动内存管理的对象关联场景。
2025-08-04 15:37:52
409
原创 JS中的Map和WeakMap区别和联系
JavaScript 中 Map 与 WeakMap 对比 核心区别： Map 允许任意键类型，WeakMap 仅接受对象键 Map 强引用键，WeakMap 弱引用键（不影响垃圾回收） Map 可遍历，WeakMap 不可遍历 Map 有 size 属性，WeakMap 没有 联系： 都是键值对存储结构 键具有唯一性 使用场景： 需要遍历/原始值键 → Map 对象私有数据/临时元数据 → WeakMap（自动内存管理） 示例： Map 存储任意类型键值对 WeakMap 自动清理无引用对象键 WeakM
2025-08-04 15:27:12
560
原创 ECMAScript2025(ES16)新特性
ES2025新特性摘要 ECMAScript 2025(ES16)主要新增了以下特性：支持JSON模块导入；新增迭代器辅助方法实现链式处理；增强Set实例方法(交集、并集等)；正则表达式改进(转义方法、内联标志、命名捕获组)；新增Promise.try()异步处理；支持16位浮点数(Float16Array及相关方法)；后置检查控制流(checked/assert)和ArrayBuffer共享数组支持。这些改进增强了数据处理、异步编程和数值计算能力。
2025-07-31 16:20:45
979
原创 ECMAScript2024(ES15)新特性
ECMAScript 2024 (ES15)引入了多项新特性，包括： Object.groupBy和Map.groupBy方法用于数据分组； Promise.withResolvers提供更灵活的Promise控制； 正则表达式新增/v标志，支持更强大的Unicode处理； ArrayBuffer新增resize和transfer方法，SharedArrayBuffer支持扩容； 字符串新增isWellFormed和toWellFormed方法用于Unicode合法性检查与修正； Atomics.waitA
2025-07-31 15:45:48
964
原创 ECMAScript2023(ES14)新特性
ES2023（ES14）新增了多项特性：1）新增数组方法findLast和findLastIndex用于从后向前查找；2）引入不改变原数组的拷贝修改方法toReversed、toSorted、toSpliced和with；3）支持文件开头的shebang注释（#!）以支持可执行脚本；4）允许将Symbol作为WeakMap/WeakSet的键值。这些改进增强了数组操作能力、脚本执行灵活性以及弱引用的使用场景。
2025-07-31 14:27:33
765
原创 ECMAScript2022(ES13)新特性
ES2022（ES13）引入了多项新特性，主要包括：1）顶级await支持在模块顶层直接使用；2）类增强功能，包括公共/私有实例字段、静态字段及方法；3）类静态块用于初始化逻辑；4）私有字段检测语法#x in obj；5）正则表达式/d标志提供匹配索引；6）Error对象的cause属性记录错误链；7）数组/字符串/类型化数组的at()方法支持负索引；8）Object.hasOwn替代hasOwnProperty方法。这些特性增强了JavaScript的模块化、类封装、错误处理和数据结构操作能力。
2025-07-31 11:00:33
911
原创 ECMAScript2021(ES12)新特性
ES12 新特性概览 ECMAScript 2021（ES12）引入了多项实用特性：字符串新增replaceAll方法；Promise.any实现对多个Promise的"短路"操作；新增WeakRef和FinalizationRegistry实现弱引用和垃圾回收回调；数字字面量支持下划线分隔符提升可读性；新增逻辑赋值运算符&&=、||=和??=；优化Array.prototype.sort方法保证排序一致性。这些改进增强了JavaScript在字符串处理、异步编程、内存管
2025-07-30 17:59:22
765
原创 ECMAScript2020(ES11)新特性
ES2020（ES11）引入了多项新特性，包括动态导入（按需加载模块）、BigInt类型（支持大整数运算）、Promise.allSettled（处理多个Promise结果）、String.matchAll（全局正则匹配）、globalThis（统一全局对象访问）、import.meta（模块元数据）和模块命名空间导出语法等。这些改进增强了JavaScript在异步编程、数值处理、模块化开发等方面的能力，同时标准化了for-in循环的枚举顺序，提升了语言的一致性和开发体验。新特性目前已得到现代浏览器的广泛支
2025-07-30 17:16:33
1382
原创 ECMAScript2019(ES10)新特性
ES2019(ES10)新特性聚焦实用性改进，主要包括：数组新增flat()和flatMap()方法实现嵌套数组扁平化；Object.fromEntries()支持键值对转对象；字符串扩展trimStart()/trimEnd()方法；语法上允许省略catch参数；同时规范了Array.prototype.sort的稳定性、JSON.stringify的UTF-8输出等细节。这些特性优化了开发体验，提升了代码可读性和操作效率。
2025-07-30 16:19:41
634
原创 ECMAScript2018(ES9)新特性
ES9（ECMAScript2018）引入了异步迭代、对象展开/剩余属性、正则表达式增强等新特性。支持异步迭代协议（for await...of）、对象浅拷贝（...操作符）和命名捕获组等语法。新增Promise.finally方法，改进模板字符串转义处理，并允许函数参数尾逗号。这些特性提升了异步编程、数据处理和正则匹配能力，同时优化了代码可维护性。兼容性方面需注意部分特性在旧环境中可能需polyfill支持。
2025-07-30 14:49:58
749
原创 ECMAScript2017(ES8)新特性
摘要：ES8（ECMAScript2017）引入了多项新特性，包括Object.values、Object.entries和Object.getOwnPropertyDescriptors用于对象属性操作，String.prototype.padStart/padEnd用于字符串补全，以及异步编程语法async/await。此外，新增了SharedArrayBuffer实现共享内存和Atomics对象支持原子操作。这些特性增强了JavaScript的异步处理、对象操作和并发能力，兼容性良好，适用于现代浏览器
2025-07-30 11:28:58
380
原创 ECMAScript2016(ES7)新特性
摘要： ECMAScript 2016（ES7）是首个采用年度发布机制的版本，仅引入两项新特性： Array.prototype.includes：优化数组元素存在性检查，支持查找NaN且不区分±0，但时间复杂度为O(n)，高频搜索建议改用Set.has。 指数运算符**：简化幂运算（如x**y等价于Math.pow(x,y)）。对比ES5方法，includes弥补了indexOf无法检测NaN的缺陷，而**提供了更简洁的数学表达。两项特性均需注意浏览器兼容性。
2025-07-30 11:27:41
196
原创 源码分析之Leaflet中Bounds
Leaflet中的Bounds类用于表示矩形边界区域，由左下角(min)和右上角(max)两个点定义。源码分析显示，它支持多种初始化方式，并提供扩展边界、获取中心点、检查包含关系等核心方法。注意事项包括坐标顺序为[x,y]、需处理空边界情况以及性能优化建议。该类是Leaflet中处理地理边界操作的基础工具，能有效管理矩形区域的空间关系和坐标计算。
2025-05-28 17:01:46
256
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人