- 博客(27)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript设计模式 -- 迭代器模式
迭代器模式属于行为型设计模式，其主要思想是将遍历集合的责任封装在迭代器对象中，客户端通过统一的迭代器接口逐个访问集合中的元素，而无需了解集合的内部结构。这样做可以使集合与遍历算法分离，进而提高系统的灵活性和可维护性。在 JavaScript 中，ES6 引入了内置的迭代器协议（Iterator Protocol）和生成器（Generator），使得实现迭代器变得非常方便。即便如此，自定义迭代器的设计思想依然适用于各种编程语言和场景。有时我们需要反向遍历一个集合。下面示例展示如何实现一个反向迭代器。
2025-02-17 14:23:26
1189
原创 JavaScript设计模式 -- 状态模式
状态模式是一种行为型设计模式，其主要思想是将对象在不同状态下的行为封装到不同的状态类中，并通过上下文（Context）对象维护当前状态。当上下文状态发生变化时，它会将请求委托给当前状态对象，从而使得对象的行为随着状态的改变而改变。例如，一个交通信号灯对象，根据当前状态（红灯、绿灯、黄灯）的不同，会执行不同的操作；而一个自动售货机在“无硬币”、“有硬币”和“售出商品”等状态下，其响应行为也各不相同。状态模式通过分离状态逻辑，使得代码更易维护和扩展。
2025-02-17 14:18:48
1213
原创 JavaScript设计模式 -- 观察者模式
观察者模式是一种行为型设计模式，其主要目的是实现对象间的解耦。当一个对象（被观察者、Subject）的状态发生变化时，所有依赖于它的对象（观察者、Observer）都会收到通知，并自动更新。这种模式广泛应用于事件驱动、UI 数据绑定、实时数据推送等场景。例如，在前端开发中，当数据模型变化时，视图（观察者）需要自动更新；在实时系统中，当数据源更新时，所有订阅了该数据的组件都能即时获得更新。观察者模式通过建立一对多的依赖关系，使得对象间的状态更新和通知变得简单而灵活。
2025-02-14 10:14:11
1395
原创 JavaScript设计模式 -- 外观模式
外观模式属于结构型设计模式，其核心思想是为多个复杂子系统提供一个统一的接口（外观），从而让客户端无需了解内部实现细节即可调用系统功能。外观模式不仅能简化调用流程，还能使系统的内部变化对客户端透明，便于后续扩展和维护。外观模式通过为复杂系统提供一个统一而简洁的接口，有效降低了客户端与各子系统之间的耦合，使得系统调用更加直观和易于维护。本文通过家庭影院、电子商务、网络请求聚合、游戏初始化和跨平台资源加载五个示例，展示了外观模式在不同场景下的应用。
2025-02-14 10:10:14
1114
原创 JavaScript设计模式 -- 代理模式
代理模式是一种结构型设计模式，其核心思想是在访问目标对象（真实对象）时，通过一个中间层（代理对象）来控制对真实对象的访问。代理对象与真实对象具有相同的接口，因此客户端无需改变代码即可使用代理对象。延迟加载：在真正需要使用对象时才创建或加载对象（虚拟代理）。权限校验：在调用真实对象方法前进行安全性检查（保护代理）。缓存：对真实对象的调用结果进行缓存，提高系统性能（缓存代理）。日志记录和监控：记录对真实对象的调用情况，便于调试和监控。
2025-02-13 08:51:37
1295
原创 JavaScript设计模式 -- 装饰者模式
装饰者模式属于结构型设计模式，它的核心思想是在运行时将对象嵌入到封装对象中，以扩展对象的行为而无需修改原有对象。通过这种方式，可以在保持对象接口不变的情况下，为对象增加额外的功能。在不改变对象接口的前提下，动态地给对象添加功能。需要在多个独立的装饰中灵活组合扩展对象行为时。通过装饰者避免生成大量子类，从而降低系统的复杂性。装饰者模式提供了一种在运行时为对象动态扩展功能的优雅方案。通过将功能分解成多个独立的装饰者，我们可以避免创建大量子类，并灵活地组合和扩展对象行为。
2025-02-13 08:41:12
982
原创 JavaScript设计模式 -- 适配器模式
适配器模式是一种结构型设计模式，它的核心思想是通过一个中间层（适配器）将一个类的接口转换成客户期望的另一个接口，从而让原本接口不匹配的类能够一起工作。集成遗留系统：对接老系统时，接口可能与新系统不兼容；第三方库封装：使用外部库，但接口与项目需求不匹配；数据转换：不同数据格式之间的转换处理。适配器模式既可以通过对象适配器（基于组合）实现，也可以通过类适配器（基于继承，多用于支持多重继承的语言）实现。由于 JavaScript 不支持多重继承，所以一般采用对象适配器的方式。
2025-02-12 16:34:33
1274
原创 JavaScript设计模式 -- 单例模式
单例模式的核心思想是保证一个类只有一个实例存在，并提供一个全局访问点来获取该实例。这样可以防止重复创建对象，节省资源，同时也便于全局共享数据或状态。单例模式的特点：唯一性：在系统中只有一个实例存在。全局访问：提供一个全局访问点，让其他对象能够轻松地获取这个实例。延迟实例化：通常采用懒加载方式，只有在第一次使用时才创建实例。单例模式是一种简单但十分有用的设计模式，通过确保全局唯一实例，可以为配置管理、日志记录、事件总线、数据库连接等场景提供一致的解决方案。
2025-02-11 15:02:51
945
原创 JavaScript设计模式 -- 工厂模式
工厂模式属于创建型设计模式，其核心思想是将对象的创建过程封装起来，让调用者只需关注产品接口，而无需了解具体实现。这样可以降低系统各模块之间的耦合度，使得扩展和维护更加方便。简单工厂模式：由一个工厂类根据参数创建不同的产品实例；工厂方法模式：通过定义抽象工厂接口，让子类决定实例化哪一个具体产品；抽象工厂模式：用于创建一系列相关或相互依赖的产品。接下来，我们分别介绍这些模式在 JavaScript 中的实现，并结合多种场景给出示例。工厂模式通过封装对象创建逻辑，使得代码具有更好的解耦性和扩展性。
2025-02-11 14:55:39
1162
原创 Vuex 的使用和原理详解
Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。单一状态树：整个应用的状态存储在一个对象中。可预测的状态变更：只有通过明确的规则（Mutation）才能改变状态。插件机制：支持插件的扩展。state: {user: null // 用户信息},},},actions: {// 模拟登录请求resolve();}, 1000);});
2024-12-24 09:44:29
1076
原创 一文读懂：高阶函数
高阶函数（Higher-Order Functions）的概念最早来源于数学中的函数式编程范式，指的是以其他函数为输入或输出的函数。在计算机科学中，这一思想被引入编程语言，用于增强代码的抽象能力。除了 JavaScript，许多现代编程语言（如 Python、Ruby、Haskell 等）都支持高阶函数。在函数式编程语言中，高阶函数是核心组件，而在多范式语言中，它们通常用于简化代码逻辑或处理复杂的函数组合。
2024-12-19 15:06:56
988
原创 深入解析 requestAnimationFrame 和 requestIdleCallback
是用于创建高性能动画的 API，它的主要特点是与显示器的刷新频率（一般为 60Hz）同步，从而保证动画的流畅性和稳定性。这些操作需要在 16.66ms 内完成（60FPS）以避免卡顿。是一个允许在浏览器空闲时间内执行低优先级任务的 API。这种分工可以帮助开发者构建性能优化的 Web 应用。
2024-12-10 14:54:07
567
原创 call apply bind原理和使用
它们主要用于函数上下文的转换或借用其他对象的方法。是 JavaScript 中用来显式改变函数 this。当一个对象没有某方法时，可以借用其他对象的方法来使用。当参数是动态生成的数组时，在事件处理函数中，使用。
2024-12-04 08:57:31
273
原创 高德地图坐标系 转换 EPSG:4326
若要将高德地图的经纬度（基于 GCJ-02 坐标系）转换为 EPSG:4326（WGS84）坐标系，你需要使用一个能够执行这种坐标转换的库或工具。由于高德地图使用的是 GCJ-02 坐标系，而 EPSG:4326 是 WGS84 坐标系，因此直接转换需要特定的算法。OpenLayers 本身并不直接提供从 GCJ-02 到 WGS84 的转换功能，但你可以使用其他库，如。以下是一个 Vue.js 组件的示例，它使用。，或者自己实现转换算法。
2024-11-07 11:18:39
1329
原创 一文读懂：GIS中坐标系、投影、EPSG:4326、EPSG:3857
EPSG:3857是Web Mercator投影坐标系的代码，也被称为Spherical Mercator、WGS 1984 Web Mercator（Auxiliary Sphere），采用伪墨卡托投影处理WGS84得到的投影坐标系。
2024-11-05 15:02:34
2780
原创 使用Openlayers开发地质图
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript类库包，用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发，Rico用到地方不多，只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。OpenLayers2.4版本以后提供了矢量画图功能，方便动态地展现“点、线和面”这样的地理数据。
2024-11-05 14:59:48
807
原创 一文读懂 浏览器的缓存机制
HTTP缓存控制字段通过精确控制资源的缓存行为，有助于提升网页的加载速度、减少网络带宽的消耗和降低服务器的负载。在实际应用中，这些字段可以单独使用，也可以组合使用，以实现复杂的缓存策略。
2024-09-10 15:41:52
1018
原创 JavaScript数据精度丢失的底层原理及解决方案
IEEE 754标准是20世纪80年代以来最广泛使用的浮点数运算标准，为许多CPU与浮点运算器所采用。它定义了表示浮点数的格式（包括负零、-0、无穷大（Inf）和非数值（NaN））、特殊数值，以及这些数值的运算规则。IEEE 754规定了四种表示浮点数值的方式：单精确度（32位）、双精确度（64位）、延伸单精确度（43比特以上，较少使用）和延伸双精确度（79比特以上，通常以80位实现）。其中，双精确度是JavaScript中数字的主要表示方式。
2024-09-09 22:11:17
1005
原创 WebSocket 概述和原理
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端和服务器之间实时发送和接收数据。实时性：WebSocket 能够实时的进行通信，不需要发送请求才可以接收数据。双向性：WebSocket 可以同时进行数据的发送和接收，实现双向通信。单一连接：WebSocket 只需要建立一条连接就可以进行通信，减少了连接的数量和复杂度。WebSocket 是一种实时通信的协议，它使得浏览器和服务器可以通过 TCP 连接进行实时的双向通信。
2024-09-09 21:35:38
1204
原创 一文读懂Git命令
什么是Git？Git是一个开源的分布式版本控制系统，用于跟踪计算机文件的变化，尤其是源码的变化。它能够帮助多个开发者协作开发，记录每一次对代码的修改，并能够回溯到之前的状态，从而有效管理代码版本。历史背景Git由Linus Torvalds在2005年创建，旨在取代当时使用的BitKeeper版本控制系统。它提供了高效、高度可扩展且灵活的服务，尤其适合处理大型项目。Git广泛应用于各种软件开发项目，并成为现代开发过程中的标准工具。
2024-09-05 20:35:55
1111
原创 一文读懂前端组件化,模块化概念及原理
前端组件化是一种将复杂的用户界面拆分成多个独立、可复用的组件的过程。每个组件都封装了自己的逻辑、样式和模板，通过组合这些组件来构建整个应用程序。组件化提高了代码的可维护性、可复用性和开发效率，是现代前端开发的重要趋势。模块化是指将一个复杂的系统或程序按照功能、逻辑等划分为多个独立、可复用的模块的过程。在前端开发中，模块化和组件化通常是结合使用的。模块化用于划分系统的功能结构，而组件化则用于构建具体的用户界面。通过模块化和组件化的结合，可以构建出既易于维护又高效复用的前端应用程序。实际上，你可能需要在。
2024-09-04 22:49:57
2292
原创 TypeScript中的逆变与协变：深入理解与应用
在TypeScript（TS）的世界里，逆变（Contravariance）和协变（Covariance）是两个重要的概念，它们对类型系统的灵活性和安全性有着深远的影响。本文将深入探讨这两个概念，并通过实例展示它们在TypeScript中的应用。
2024-09-02 18:48:48
930
原创 TypeScript中的类型映射（Mapping Types）：探索类型迭代的无限可能
映射类型是一种高级类型操作，它允许我们根据一个已存在的类型（称为“源类型”），通过某种规则（称为“映射规则”）来生成一个新的类型。这种操作类似于数组中的map函数，但作用于类型层面，而非值层面。
2024-08-28 21:18:58
776
原创 TypeScript进阶之泛型分发
分发在TypeScript中主要指的是当泛型参数为联合类型时，泛型函数或类型操作会针对联合类型中的每一个成员类型分别进行操作，并最终将各个成员类型的结果合并起来。这种机制允许开发者编写出更加灵活和强大的类型工具。在TypeScript中，“分发”是一个与泛型、联合类型以及类型操作密切相关的概念。它指的是当泛型参数为联合类型时，泛型函数或类型操作会针对联合类型中的每一个成员类型分别进行操作，并最终将各个成员类型的结果合并起来。这种机制极大地增强了TypeScript类型系统的灵活性和表达能力。
2024-08-27 21:37:28
433
原创 解决前端流文件导出和获取请求头中的文件名称
在开发过程中，我们经常会遇到需要导出流文件和获取请求头中的文件名称的情况。这些问题可能看起来很简单，但在实际实现中，却会遇到各种坑和陷阱。本文将为您提供流文件导出和获取请求头中的文件名称的解决方案。
2024-08-27 10:43:16
1008
原创 本地VS Code如何运行.ts文件
第一步设置tsconfig.josn配置文件，并创建dist文件，dist为编译打包后文件；第二步，在终端命令里面输入tsc -watch，编译后dist文件夹下会出现index.js文件，步骤如下图1-2所示。1）第一种方法可以直接通过命令编译，例如我们创建一个index.ts文件，可以在控制台 输入tsc +文件名 进行编译。3.生成配置文件，cd进入新建文件夹，在控制台输入，如下图1-1所示。命令行 执行node -v以及npm -v都能正常显示版本号就没问题。2）vscode自动化编译ts文件。
2024-08-26 20:55:15
1859
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人