- 博客(220)
- 收藏
- 关注
RSS订阅
原创 源码分析之Leaflet V1.9.4 源码介绍
Leaflet.js 是一个开源的 JavaScript 库，用于创建交互式地图，其模块化架构设计使得代码结构清晰、易于扩展和维护。核心模块包括：control（管理用户交互控件）、core（处理地图基本功能）、dom（DOM 操作）、geometry（几何图形计算）、geo（地理编码与解码）、layer（图层管理）和 map（地图实例管理）。每个模块负责特定功能，开发者可以根据需求按需加载或扩展模块，提升代码的灵活性和维护性。Leaflet.js 的模块化设计不仅简化了开发流程，还支持自定义控件、图层和坐
2025-02-27 19:28:04
1379
原创 Vue3源码reactivity响应式篇之Reactive
本文分析了Vue3中reactive模块的核心实现。reactive通过Proxy和Reflect将普通对象转换为响应式对象，支持多种响应式类型（普通/只读/浅层）。createReactiveObject函数根据目标对象类型创建对应的代理对象，并缓存到WeakMap中。文章详细介绍了reactive、readonly等API的实现原理，包括类型判断、缓存机制和代理处理函数的差异。这些API共同构成了Vue3响应式系统的核心基础。
2025-08-22 13:49:56
587
原创 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
818
原创 Vue3源码reactivity响应式篇之Map、Set等代理处理详解
本文分析了 Vue3 中针对集合对象（Map/WeakMap/Set/WeakSet）的响应式代理实现。核心是通过 createInstrumentationGetter 方法创建代理 getter，该方法会根据只读和浅层响应式配置生成不同的处理器。文中详细解析了 createInstrumentationGetter 和 createInstrumentations 两个关键函数，展示了 Vue3 如何通过重写集合对象的原生方法（如 get、has、forEach 等）来实现响应式追踪。对于可变集合，还实
2025-08-21 08:51:22
843
原创 Vue3源码reactivity响应式篇之普通对象的代理解析
本文分析了Vue3响应式系统中四种基础对象代理方法的实现原理，包括可读写代理(mutableHandlers)、只读代理(readonlyHandlers)、浅响应式代理(shallowReactiveHandlers)和浅只读代理(shallowReadonlyHandlers)。这些代理方法都继承自BaseReactiveHandler基类，通过get拦截器实现依赖收集和属性访问控制。其中MutableReactiveHandler扩展了set方法用于属性修改时的触发更新，而ReadonlyR
2025-08-21 08:44:28
959
原创 Vue3源码reactivity响应式篇之数组代理的方法
Vue3 中通过重写数组方法实现响应式处理，核心代码位于 arrayInstrumentations.ts。当读取响应式数组时，会检查是否为数组方法调用，若是则返回重写后的方法。arrayInstrumentations 实现了包括 push、pop、includes 等常用数组方法的重写，通过辅助函数如 reactiveReadArray、iterator 等处理深层响应式数据和迭代操作。这些重写方法在保证原有功能的同时，加入了依赖收集和响应式处理逻辑，使数组操作能够触发视图更新。
2025-08-20 13:12:40
874
原创 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
769
原创 JS中可迭代的数据类型
JavaScript中的可迭代对象是指实现了Symbol.iterator方法的对象，包括数组、字符串、Map、Set、TypedArray等内置类型。这些对象可以使用for...of循环遍历，而普通对象默认不可迭代。文章详细介绍了可迭代协议的工作原理、内置可迭代数据类型、如何使普通对象可迭代、for...of与for...in的区别，以及实际应用场景和常见问题解答，帮助开发者掌握现代JavaScript的迭代机制。
2025-08-08 13:53:49
646
原创 如何判别JS中的数据类型？一文教你弄懂typeof和instanceof
JavaScript类型检测指南：区分typeof与instanceof的适用场景 本文系统介绍了JavaScript中两种主要类型检测方法：typeof适用于基本类型检查（返回"string"、"number"等），但无法区分具体对象类型；instanceof则用于检查对象是否属于特定类的实例，能识别数组等对象子类型但无法处理基本类型。文章还对比了它们的优缺点，推荐了Array.isArray()等替代方案，并提供了现代JS开发中的类型安全实践建议，帮助开发者根据场
2025-08-06 16:09:00
779
原创 遍历深层对象指定层级的属性
本文介绍了深度优先遍历对象属性的JavaScript实现。通过递归函数dfs(obj, depth)，可以遍历指定深度层级的对象属性。函数会检查当前深度，输出属性键名，并对非null的对象值进行递归遍历。测试用例展示了不同深度下的输出结果：深度0无输出，深度1输出第一层属性，深度2输出前两层属性等。该实现具有深度控制、递归遍历、对象检测和null处理等特性，适用于配置解析、数据检查、调试工具等场景。核心算法通过递归调用栈实现深度优先遍历，可精确控制遍历深度。
2025-08-06 11:37:41
533
原创 JS中的扩展运算符...
JavaScript 中扩展运算符 ... 的行为在数组和对象上下文中有重要区别：[...a] 要求 a 是可迭代对象（如数组），而 {...a} 适用于任何具有可枚举属性的对象。普通对象默认不可迭代，因此 [...a] 会报错，但 {...a} 可以正常复制对象属性。要使对象可迭代，需实现 Symbol.iterator 方法。实际开发中应区分使用数组扩展（用于可迭代对象）和对象扩展（用于属性复制），或使用 Object.keys()/Object.values() 等方法处理对象属性。
2025-08-05 14:48:11
434
原创 JS中的Set和WeakSet联系与区别
本文对比了JavaScript中Set和WeakSet的核心区别与联系。Set允许存储任意类型值，支持遍历和获取大小，适合长期数据存储；WeakSet仅存储对象，不可遍历且无大小属性，具有自动垃圾回收特性。二者都保证值唯一性，提供add、has、delete方法。示例展示了Set用于数组去重和WeakSet用于对象状态管理的场景。建议根据需求选择：Set适合通用集合操作，WeakSet适合需要自动内存管理的对象关联场景。
2025-08-04 15:37:52
305
原创 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
447
原创 ECMAScript2025(ES16)新特性
ES2025新特性摘要 ECMAScript 2025(ES16)主要新增了以下特性：支持JSON模块导入；新增迭代器辅助方法实现链式处理；增强Set实例方法(交集、并集等)；正则表达式改进(转义方法、内联标志、命名捕获组)；新增Promise.try()异步处理；支持16位浮点数(Float16Array及相关方法)；后置检查控制流(checked/assert)和ArrayBuffer共享数组支持。这些改进增强了数据处理、异步编程和数值计算能力。
2025-07-31 16:20:45
890
原创 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
885
原创 ECMAScript2023(ES14)新特性
ES2023（ES14）新增了多项特性：1）新增数组方法findLast和findLastIndex用于从后向前查找；2）引入不改变原数组的拷贝修改方法toReversed、toSorted、toSpliced和with；3）支持文件开头的shebang注释（#!）以支持可执行脚本；4）允许将Symbol作为WeakMap/WeakSet的键值。这些改进增强了数组操作能力、脚本执行灵活性以及弱引用的使用场景。
2025-07-31 14:27:33
618
原创 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
750
原创 ECMAScript2021(ES12)新特性
ES12 新特性概览 ECMAScript 2021（ES12）引入了多项实用特性：字符串新增replaceAll方法；Promise.any实现对多个Promise的"短路"操作；新增WeakRef和FinalizationRegistry实现弱引用和垃圾回收回调；数字字面量支持下划线分隔符提升可读性；新增逻辑赋值运算符&&=、||=和??=；优化Array.prototype.sort方法保证排序一致性。这些改进增强了JavaScript在字符串处理、异步编程、内存管
2025-07-30 17:59:22
719
原创 ECMAScript2020(ES11)新特性
ES2020（ES11）引入了多项新特性，包括动态导入（按需加载模块）、BigInt类型（支持大整数运算）、Promise.allSettled（处理多个Promise结果）、String.matchAll（全局正则匹配）、globalThis（统一全局对象访问）、import.meta（模块元数据）和模块命名空间导出语法等。这些改进增强了JavaScript在异步编程、数值处理、模块化开发等方面的能力，同时标准化了for-in循环的枚举顺序，提升了语言的一致性和开发体验。新特性目前已得到现代浏览器的广泛支
2025-07-30 17:16:33
1260
原创 ECMAScript2019(ES10)新特性
ES2019(ES10)新特性聚焦实用性改进，主要包括：数组新增flat()和flatMap()方法实现嵌套数组扁平化；Object.fromEntries()支持键值对转对象；字符串扩展trimStart()/trimEnd()方法；语法上允许省略catch参数；同时规范了Array.prototype.sort的稳定性、JSON.stringify的UTF-8输出等细节。这些特性优化了开发体验，提升了代码可读性和操作效率。
2025-07-30 16:19:41
549
原创 ECMAScript2018(ES9)新特性
ES9（ECMAScript2018）引入了异步迭代、对象展开/剩余属性、正则表达式增强等新特性。支持异步迭代协议（for await...of）、对象浅拷贝（...操作符）和命名捕获组等语法。新增Promise.finally方法，改进模板字符串转义处理，并允许函数参数尾逗号。这些特性提升了异步编程、数据处理和正则匹配能力，同时优化了代码可维护性。兼容性方面需注意部分特性在旧环境中可能需polyfill支持。
2025-07-30 14:49:58
709
原创 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
331
原创 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
161
原创 源码分析之Leaflet中Bounds
Leaflet中的Bounds类用于表示矩形边界区域，由左下角(min)和右上角(max)两个点定义。源码分析显示，它支持多种初始化方式，并提供扩展边界、获取中心点、检查包含关系等核心方法。注意事项包括坐标顺序为[x,y]、需处理空边界情况以及性能优化建议。该类是Leaflet中处理地理边界操作的基础工具，能有效管理矩形区域的空间关系和坐标计算。
2025-05-28 17:01:46
215
原创 源码分析之Leaflet中TileLayer.WMS
TileLayer.WMS是TileLayer的子类，用于加载WMS（Web Map Service）服务提供的地图瓦片。它通过指定WMS服务的URL和参数来加载地图瓦片，支持动态更新图层、样式等参数。源码实现中，TileLayer.WMS通过合并默认参数与用户选项，处理不同坐标系和WMS版本差异，生成符合WMS规范的URL，并支持透传自定义参数，兼容各类WMS服务。该设计使得Leaflet能够灵活对接标准或定制的WMS服务，适用于气象、地质等专业领域的地图可视化。
2025-05-21 08:50:20
662
原创 源码分析之Leaflet中GridLayer
GridLayer是一个用于在地图上显示网格瓦片的图层，继承自Layer类，主要功能是加载和管理瓦片，显示栅格数据。其核心特点包括： 瓦片加载：根据地图视口和缩放级别异步加载瓦片。 缓存管理：缓存已加载瓦片，避免重复请求。 层级控制：设置最小和最大缩放级别，控制瓦片加载范围。 自定义样式：支持透明度、颜色等样式自定义。 事件处理：监听瓦片加载完成或错误等事件。 性能优化：通过预加载和懒加载减少不必要的请求。 兼容性：支持多种浏览器和设备。 源码实现中，GridLayer通过初始化容器、管理瓦片加载、处理地图
2025-05-20 08:10:07
765
原创 源码分析之Leaflet中的Circle
Circle是用于在地图上绘制圆形覆盖物的类，继承自类是固定像素半径，而Circle则是以地理单位（米）为半径，在投影转换上是不同的。Leaflet 的Circle1.动态投影转换：实时计算像素半径，适配不同坐标系。2.数学修正：处理地球坐标系的纬度变形问题。3.兼容性层：支持新旧 API 参数格式。4.性能优化：缓存计算结果，减少重复投影。该模块是 Leaflet 处理地理空间圆形覆盖物的核心实现，兼顾数学精确性与渲染性能。
2025-05-19 09:14:43
453
原创 源码分析之Leaflet中CircleMarker
Leaflet中的CircleMarker类继承自Path，用于创建固定像素大小的圆形标记。其核心功能包括位置和半径的操作、样式覆盖、坐标转换、边界计算以及路径更新。CircleMarker通过_project()方法将地理坐标转换为图层像素坐标，并通过_updateBounds()方法更新边界，优化渲染性能。此外，CircleMarker支持交互检测，如点击事件，并通过_updateCircle方法委托具体渲染逻辑，实现SVG和Canvas的无缝切换。与Circle类相比，CircleMarker的半径单
2025-05-19 09:13:32
525
原创 源码分析之Leafelt中Rectangle矩形实现
Leaflet中的Rectangle类通过继承Polygon类实现矩形绘制功能。其核心机制是将地理范围（LatLngBounds）转换为四个顶点，复用了多边形的渲染逻辑。Rectangle类的主要方法包括initialize（初始化矩形）、setBounds（动态更新矩形范围）和_boundsToLatLngs（将边界转换为多边形顶点）。设计上，矩形被视为特殊的多边形，顶点顺序按西南、西北、东北、东南排列，确保投影后形成闭合路径。通过继承与扩展，Rectangle类减少了代码冗余，并提供了简洁的API，如s
2025-05-16 08:29:45
334
原创 源码分析之Leaflet中Render.getRender实现
Renderer.getRenderer是Leaflet中用于动态选择和管理矢量图形渲染器的关键方法。它通过多级优先级（图层选项、窗格关联、地图选项、地图实例）确定合适的渲染器（SVG或Canvas），并自动创建和添加渲染器以确保其生效。该方法支持为不同窗格分配独立渲染器，优先使用Canvas以提升性能，同时通过工厂函数处理VML降级，确保兼容性。其设计思想强调灵活性、自动化管理、性能优化和兼容性，使开发者能够根据需求灵活控制渲染方式，同时减少手动操作负担。
2025-05-16 08:28:34
404
原创 源码分析之Leaflet中Polygon
Leaflet中的Polygon类继承自Polyline，扩展了闭合区域、填充和点包含检测等特性。源码实现中，Polygon通过自动闭合路径、强制二维数组数据结构来优化数据模型，并采用面积加权法计算中心点、射线法进行点包含检测。此外，Polygon支持多环与嵌套结构，如带洞多边形，并通过专用多边形算法提升裁剪与中心计算的准确性。整体设计兼顾了功能与性能，适用于复杂地理场景。
2025-05-15 08:56:03
416
原创 源码分析之Leaflet中Polyline
Leaflet中的Polyline类用于在地图上绘制折线和多段线，继承自Path类，具备通用路径处理能力，并扩展了折线特有的功能。其源码实现包括初始化、坐标转换、边界计算、裁剪简化、与渲染器交互等核心功能。Polyline类通过_setLatLngs方法初始化折线坐标，_project方法将地理坐标转换为像素坐标，_clipPoints方法进行视口裁剪，_simplifyPoints方法使用道格拉斯-普克算法简化折线，最后通过_updatePath方法调用渲染器更新绘制。此外，Polyline还支持动态添加
2025-05-15 08:54:56
609
原创 源码分析之Leaflet中SVG渲染器
Leaflet中的SVG渲染器继承自Renderer基类，负责将矢量图层（如折线、多边形和圆等）渲染为SVG元素。其核心功能包括容器初始化与销毁、视图更新、路径生命周期管理以及样式应用。通过_initContainer方法创建SVG根元素和子图层容器，_update方法利用viewBox优化地图平移性能。路径的生命周期管理通过_initPath、_addPath和_removePath方法实现，而_updateStyle方法则负责应用描边和填充样式。此外，Leaflet还通过vmlMixin提供了对旧版IE
2025-05-14 08:48:53
311
原创 源码分析之Leaflet中Canvas渲染器
Canvas渲染器是Leaflet库中用于在HTML5的Canvas元素上绘制矢量图形的内置渲染器，继承自Renderer类。它提供了路径绘制、样式设置和事件处理等基本功能。源码实现中，Canvas渲染器通过创建Canvas元素并绑定鼠标事件来初始化容器，同时支持Retina屏幕优化和路径简化。渲染器通过双向链表结构管理图层，并在图层更新时触发重绘。_updatePath和_updateStyle方法分别用于更新路径和样式，而_requestRedraw方法则合并重绘请求以提高性能。整体设计旨在高效处理复杂
2025-05-14 08:45:08
874
原创 源码分析之Leaflet中的Renderer渲染器基类
Renderer 是一个抽象类，继承自 Layer，作为所有矢量渲染器（如 SVG 和 Canvas）的基类。它定义了渲染器的基本行为，包括 DOM 容器管理、坐标变换和地图事件响应。Renderer 提供了通用的方法和属性，如 _updateTransform 用于处理缩放和移动时的坐标变换，_update 用于更新渲染器的边界和状态。子类需要实现 _initContainer 和 _updatePath 方法，分别用于创建 DOM 容器和绘制路径。Renderer 通过事件绑定（如 viewreset、
2025-05-14 08:43:57
676
原创 源码分析之Leaflet中GeoJSON模块
GeoJSON.js中的GeoJSON类继承自FeatureGroup，用于解析和显示GeoJSON数据。该类通过initialize方法初始化图层，并支持通过addData方法解析和添加GeoJSON数据。addData方法会遍历GeoJSON中的要素，应用过滤条件，并将几何对象转换为Leaflet图层。此外，resetStyle和setStyle方法用于重置和更新图层样式。静态工具函数geometryToLayer负责将GeoJSON几何体转换为相应的Leaflet图层，如Marker、Polyline
2025-05-13 14:15:17
1131
原创 源码分析之Leaflet中的Path基类
Path类是Leaflet中矢量图形（如多边形、折线和圆形）的抽象基类，继承自Layer，提供共同的功能和属性。它通过渲染器（如SVGRenderer或CanvasRenderer）实现图形的绘制与管理，支持样式动态更新、图层叠放顺序调整等操作。Path类采用生命周期钩子（onAdd、onRemove）与渲染器交互，确保高效重绘和事件处理。其设计核心在于样式与数据分离、渲染与逻辑解耦，以及性能优化，为Leaflet的矢量图形提供了灵活扩展和高性能渲染的基础。
2025-05-13 08:06:59
543
原创 源码分析之Leaflet中的VideoOverlay
Leaflet中的VideoOverlay是ImageOverlay的扩展类，用于在地图上叠加HTML5视频（如MP4、WebM）。它通过继承ImageOverlay的地理范围控制功能，使用video标签替代img或svg，支持多视频源、播放控制和宽高比适配等视频特性。VideoOverlay的核心方法包括重写_initImage，支持多视频源和直接复用预创建的<video>元素。它还具备自动调整视频尺寸、播放控制和事件监听功能，适用于监控摄像头和
2025-05-13 08:05:42
345
原创 源码分析之Leaflet中SVGOverlay
Leaflet中的SVGOverlay是ImageOverlay的扩展类，专门用于在地图上叠加SVG矢量图像。与处理光栅图像的ImageOverlay不同，SVGOverlay直接操作SVG DOM元素，支持动态修改矢量内容。其核心实现继承自ImageOverlay，但关键差异在于接受SVG元素而非图片URL，并依赖SVG的viewBox属性实现自动缩放适配。SVGOverlay允许实时修改SVG子元素的属性、样式或结构，支持SVG内部元素事件冒泡，适用于需要高分辨率缩放和复杂数据可视化的场景。然而，开发者
2025-05-12 08:11:55
279
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人