使用js封装最常用的几种设计模式

时间: 2023-02-07 09:07:13 浏览: 165

JS的几种设计模式

JS的几种简单设计模式文章目录JS的几种简单设计模式一、单例模式单例模式介绍核心代码如下注意将代码进行优化单例模式的简单应用场景二、组合模式组合模式介绍实现思想组合模式代码组合模式的简单应用场景三、观察者模式观察者模式介绍观察者模式介绍实现思想观察者模式代码四、发布/订阅模式发布/订阅模式介绍及实现思想发布/订阅模式代码一、单例模式我们都知道一个构造函数可以使用 new 关键字来创造出若干的实例。并且每个实例都是不相同的。都是不同的地址,比较两个生成的实例时比较的是存储地址，因此每个实例都有不同的存储空间，两者比较值为false。 function Person(){ JavaScript设计模式是编程实践中用于解决常见问题的模板或蓝图，它们是经过验证的解决方案，能够提升代码的可读性、可维护性和复用性。在JS中，有多种设计模式，包括单例模式、组合模式、观察者模式和发布/订阅模式。 **一、单例模式** 单例模式的核心思想是确保一个类只有一个实例，并提供一个全局访问点。这种模式避免了资源的浪费，特别适合管理共享资源或昂贵的对象。以下是一个简单的单例模式实现： ```javascript function Singleton() { this.instance = 'Singleton'; } Singleton.getInstance = function() { if (!Singleton.instance) { Singleton.instance = new Singleton(); } return Singleton.instance; } var single1 = Singleton.getInstance(); var single2 = Singleton.getInstance(); console.log(single1 === single2); // true ``` 在上述代码中，`getInstance`方法负责创建和返回单例对象，通过闭包保持对`instance`变量的访问，并确保其只被初始化一次。 **二、组合模式** 组合模式允许我们处理单个对象和对象集合的方式保持一致，它是一种结构型设计模式。在JavaScript中，组合模式常用于处理树形结构，使得我们可以透明地操作单个元素或整个集合。 ```javascript function Component() {} Component.prototype.add = function(child) { this.children = this.children || []; this.children.push(child); }; Component.prototype.remove = function(child) { if (this.children) { const index = this.children.indexOf(child); if (index !== -1) { this.children.splice(index, 1); } } }; Component.prototype.performOperation = function() { console.log('Performing operation on component'); }; function Leaf() {} Leaf.prototype = new Component(); Leaf.prototype.constructor = Leaf; Leaf.prototype.performOperation = function() { console.log('Leaf performing operation'); }; var component = new Component(); var leaf1 = new Leaf(); var leaf2 = new Leaf(); component.add(leaf1); component.add(leaf2); component.performOperation(); // Performing operation on component leaf1.performOperation(); // Leaf performing operation ``` **三、观察者模式** 观察者模式是一种行为设计模式，它定义了对象间的一种一对多依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并被自动更新。在JavaScript中，事件监听和触发机制就是观察者模式的一种实现。 ```javascript class Subject { constructor() { this.observers = []; } attach(observer) { this.observers.push(observer); } detach(observer) { const index = this.observers.indexOf(observer); if (index > -1) { this.observers.splice(index, 1); } } notify(data) { this.observers.forEach(observer => observer.update(data)); } } class Observer { update(data) { console.log(`Observer received data: ${data}`); } } const subject = new Subject(); const observer1 = new Observer(); const observer2 = new Observer(); subject.attach(observer1); subject.attach(observer2); subject.notify('Data from subject'); // Observer received data: Data from subject ``` **四、发布/订阅模式** 发布/订阅模式，也称为事件驱动模式，允许对象之间通过事件进行通信，而不是直接耦合。发布者发布事件，订阅者接收事件。这种方式降低了组件之间的依赖性。 ```javascript class PubSub { constructor() { this.events = {}; } subscribe(event, callback) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(callback); } publish(event, data) { if (this.events[event]) { this.events[event].forEach(callback => callback(data)); } } unsubscribe(event, callback) { if (this.events[event]) { const index = this.events[event].indexOf(callback); if (index > -1) { this.events[event].splice(index, 1); } } } } const pubsub = new PubSub(); let counter = 0; function counterSubscriber(data) { console.log(`Counter updated: ${data}`); } pubsub.subscribe('counterUpdate', counterSubscriber); pubsub.publish('counterUpdate', ++counter); // Counter updated: 1 pubsub.unsubscribe('counterUpdate', counterSubscriber); pubsub.publish('counterUpdate', ++counter); // No output, subscriber is unsubscribed ``` 这些设计模式在JavaScript开发中非常实用，能够帮助我们编写更加灵活、易于维护的代码。了解和熟练运用这些模式，对于提升编程能力至关重要。

在 JavaScript 中，常用的设计模式包括： 1. 工厂模式：通过工厂函数创建对象，而无需直接使用构造函数。 2. 单例模式：保证一个类只有一个实例，并提供一个全局访问点。 3. 构造函数模式：通过构造函数创建新对象，并绑定方法和属性。 4. 原型模式：通过共享原型来创建新对象，减少内存消耗。 5. 策略模式：封装一组算法，并使用委托来决定使用哪一个。 6. 代理模式：通过代理对象来控制对其他对象的访问。

阅读全文

使用js封装最常用的几种设计模式

相关推荐

js常见的几种封装方法，方便调用

使用js封装最常用的几种设计模式 给出代码示例

js有哪几种设计模式

几种js设计模式.rar

JavaScript封装与信息隐藏：基本模式与高级模式探索

基于avalon225js封装了几个常用组件

javascript面向对象编程的几种模式详解

理解javascript封装

JavaScript设计模式初探

js设计模式简述

JS设计模式之单例模式

javascript学习笔记(九) js对象 设计模式

JavaScript设计模式经典之命令模式

JavaScript设计模式之外观模式介绍

JavaScript设计模式之策略模式详解

JavaScript设计模式之策略模式实例

JavaScript常用设计模式解析与应用

JavaScript常用设计模式详解：单体到策略

最新推荐

高校在线选课系统 jsp+oracle

java程序员面试(这几天面试题)

WEB电子杂志项目文档

strtus整体架构及核心标签库的介绍

【java毕业设计】校内跑腿业务系统源码（springboot+vue+mysql+说明文档）.zip

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

使用js封装最常用的几种设计模式给出代码示例

javascript学习笔记(九) js对象设计模式