设计模式在JavaScript中的应用:介绍一些常见的设计模式如观察者模式,工厂模式,策略模式等,并展示如何在JavaScript中实现

1、观察者模式:观察者模式是一种在项目中创建可观察者的方法,以便在对象之间实现好的通信机制。

在JavaScript中我们可以使用EventEmitter类来实现观察者模式。

class EventEmitter {
    constructor() {
        this.events = {};
    }
  
    on(type, listener) {
        this.events[type] = this.events[type] || [];
        this.events[type].push(listener);
    }
  
    emit(type, arg) {
        if (this.events[type]) {
            this.events[type].forEach(listener => listener(arg));
        }
    }
}

const emitter = new EventEmitter();

emitter.on('test', message => console.log(`Test event: ${message}`));

emitter.emit('test', 'Hello World!');

2、工厂模式:工厂模式是为了在不指定确切类的情况下产生一个对象的实例。

function CarFactory() {
  this.createCar = function(type) {
    switch(type) {
      case 'sportcars':
        return new SportCar();
      case 'suv':
        return new Suv();
      default:
        return new Car();
    }
  }
}

const factory = new CarFactory();
const car1 = factory.createCar('sportcars');
const car2 = factory.createCar('suv');

3、策略模式:策略模式定义了一系列算法,并将每一个算法封装起来,使得它们可以互相替换。

let validator = {
    types: {},

    validate: function(value, type) {
        return this.types[type].validate(value);
    },

    registerType: function(type, handler) {
        this.types[type] = handler;
    }
};

validator.registerType('isNonEmpty', {
    validate: function(value) {
        return value !== "";
    }
});

console.log(validator.validate("Hello", 'isNonEmpty')); // true
console.log(validator.validate("", 'isNonEmpty')); // false

 

4、单例模式:单例模式确保一个类只有一个实例,并提供全局访问点。在JavaScript中,我们通常为对象字面量创建一个单例,因为对象字面量本质上只是一个包含多个配对属性名称-值的对象。

var Singleton = (function () {
    var instance;
 
    function createInstance() {
        var object = new Object("I am the instance");
        return object;
    }
 
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
 
var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();
 
console.log(instance1 === instance2); // true,确认只有一个实例

5、代理模式:在某些情况下,一个客户不想或者不能直接引用一个对象,此时代理对象可以在客户端和目标对象之间起到中介的作用。

function networkAccess() {
   this.request = function(url) {
       return `request: ${url}`
   }
}

function NetworkProxy() {
   this.networkAccess = new networkAccess();
   this.request = function(url) {
       return this.networkAccess.request(url);
   }
}

let network = new NetworkProxy();
console.log(network.request('https://www.google.com')); // 输出 "request: https://www.google.com"

6、装饰器模式:装饰者模式能够提供比继承更有弹性的替代方案。装饰者能够对对象添加行为,它们是构建一个类,然后用那个类包装你的对象。

function Coffee() {
  this.cost = function() {
    return 1;
  };
}

Coffee = function(coffee) {
  this.cost = function() {
    return 1 + coffee.cost();
  };
}

let coffee = new Coffee();
coffee = new Coffee(coffee);

console.log(coffee.cost()); // 输出 2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/597942.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【革命启示录】Spring框架:Java开发的“核聚变”能量源!

Hello,我是阿佑,今天给大家整的活是 《Java开发的“核聚变”能量源》 文章目录 Spring框架原理详解一、引言简介目的特点例子 二、背景介绍问题解决方案例子 三、核心概念3.1 控制反转(Inversion of Control, IoC)定义实现例子与代…

04-28 周日 FastAPI Post请求同时传递文件和普通参数

04-28 周日 FastAPI Post请求同时传递文件和普通参数 时间版本修改人描述04-28 周日V0.1宋全恒新建文档2024年5月6日14:20:05V1.0宋全恒完成文档的传递 简介 由于在重构FastBuild的时候,为了支持TLS是否启用,在接口中需要同时传递文件参数和其他参数&am…

应急响应靶机训练-近源渗透OS-1

前言 应急响应靶机训练,为保证每位安服仔都有上手的机会,不做理论学家,增加动手经验,可前来挑战应急响应靶机-近源渗透OS1,此系列后期会长期更新,关注本公众号,被动学习。 挑战内容 前景需要:…

Spring Gateway的核心功能:路由、过滤、限流一网打尽

Spring Gateway的简介 在微服务架构的世界里,如同繁星点点的服务需要一个指挥家,将它们有序地组织起来,让它们能够和谐地协同工作。这个指挥家,就是Spring Gateway。它是一个基于Spring Framework 5、Project Reactor和Spring Bo…

Java多线程:常见的线程的创建方法及Thread类详解

目录 一.并发编程相关概念 线程与进程 多线程 Java中线程的状态 二.线程的创建方法 方法一:继承Thread类 方法二:实现Runnable接口 其他方法 三.Thread类详解 Thread常见构造方法 Thread常见属性 Thread常见方法 start() 与 run() sleep(…

使用代理IP时,如何预防未知的风险?

在使用代理IP时,预防未知的风险是至关重要的。代理IP虽然提供了诸多便利,如匿名浏览、访问控制和内容过滤等,但如果不加以妥善管理和使用,可能会面临数据泄露、隐私暴露、恶意活动关联等风险。以下是一些建议,以帮助您…

Java中的maven的安装和配置

maven的作用 依赖管理 方便快捷的管理项目依赖的资源,避免版本冲突问题 统一项目管理 提供标准,统一的项目结构 项目构建 标准跨平台(Linux、windows、MacOS)的自动化项目构建方式 maven的安装和配置 在maven官网下载maven Ma…

如何用Kimi,5秒1步生成流程图

引言 在当前快节奏的工作环境中,拥有快速、专业且高效的工具不可或缺。 Kimi不仅能在5秒内生成专业的流程图(kimi),还允许实时编辑和预览,大幅简化了传统流程图的制作过程。 这种迅速的生成能力和高度的可定制性使得…

如何使用低代码快速创建一个复杂交叉报表?

前言 在当今数字化时代,数据是企业决策和发展的重要支柱。为了更好地理解和利用数据,生成清晰、全面的报表至关重要。而复杂交叉报表作为一种高级数据分析工具,能够帮助企业深入挖掘数据背后的价值,提供全面的数据概览和分析结果…

数据分析——业务指标量化

业务指标量化 前言一、统计指标二、统计指标特点完整的统计指标统计指标的理解和使用方法 三、统计指标类型总量指标时期指标时点指标总量指标的作用 相对指标计划完成相对数指标结构相对数指标比例相对数指标比较相对数指标动态相对数指标 平均指标 四、数量指标和质量指标五、…

Java设计模式 _结构型模式_代理模式(静态,动态)

一、基础概念 1、代理模式 代理模式(Proxy Pattern)是一种结构型设计模式。它允许我们通过添加一个代理对象来控制对另一个对象的访问,从而实现一些额外的功能,如访问控制、日志记录、性能监控等。代理模式主要分为静态代理和动态…

Versatile Diffusion—— 融合文本和图像的扩散模型

介绍 Diffusion模型在各种生成任务中取得了显著的进展,成为了一个重要的里程碑。特别是像DALLE 2、Imagen和Stable Diffusion(SD)这样的模型,不仅在学术界引起了广泛关注,也在工业界产生了深远影响。尽管这些模型在特…

10.Java对象内置结构

文章目录 Java对象内置结构1.Java对象的三个部分1.1.对象头1.2.对象体1.3.对齐字节 2.对象结构中核心字段的作用2.1.MarkWord(标记字)2.2.Class Pointer(类对象指针)2.3.Array Length(数组长度)2.4.对象体2.5.对齐字节 3.Mark Word的结构信息3.1.不同锁状态下的Mark Word字段结…

K邻算法:在风险传导中的创新应用与实践价值

程序员的实用神器 ⛳️ 写在前面参与规则!!! ✅参与方式:关注博主、点赞、收藏、评论,任意评论(每人最多评论三次) ⛳️本次送书1~4本【取决于阅读量,阅读量越多,送的越…

Ubuntu24.04安装中文输入法

Ubuntu24.04安装中文输入法 为了更好的体验,请访问个人博客 www.huerpu.cc:7000 一、添加中文语言支持 在安装中文输入法之前,首选要添加中文语言支持。选择System,点击Region & Language。 点击Manage Install Languages。 点击Insta…

LED显示屏的维护与使用指南

LED显示屏作为一种先进的显示技术,广泛应用于广告、信息显示、舞台背景等领域。然而,为了确保显示屏的长期稳定运行和良好的显示效果,对其进行正确的维护和使用是非常必要的。以下是一些专业的维护与使用建议: 维护建议&#xff1…

Android iw 工具

代码位置:Android/external/iw 查看支持的命令: console:/ # iw help Usage: iw [options] command Options:--debug enable netlink debugging--version show version (4.1) Commands:help [command]Print usage for all or a specific command, e.g."…

六西格玛管理培训公司挑选攻略:如何找到最适合你的合作伙伴?

面对众多提供六西格玛管理培训的公司,企业如何挑选到真正适合自己的呢?本文有建议如下: 一、明确培训目标 在选择六西格玛管理培训公司之前,企业首先要明确自身的培训需求和目标。这包括确定培训的范围、期望达到的效果以及预算…

docker-compose完成mysql8.0+环境搭建

1、准备my.cnf文件到指定目录(和基础的增加了一个default_authentication_pluginmysql_native_password 的身份验证插件配置信息) 原因:官方提到: 该方式可以解决:Authentication plugin ‘caching_ sha2_password‘ c…

【代码分享】使用HTML5的Canvas绘制编码说明图片

最急在工作中遇到一个需求,根据给定的编码生成编码说明,像下面这样的效果。 不同含义的编码用横杠分割,然后每个编码下面用箭头指明具体的含义。下面是我使用canvas实现的代码。具体的编码宽度大家可以根据实际情况进行调整,目前…