设计模式在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.mzph.cn/web/8986.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

掌握学习平台中的高效学习技巧

学习在我们生活中起着至关重要的作用。随着科技的发展,越来越多的学习平台为我们提供了更广阔的学习机会。然而,要实现高效学习,我们需要掌握一些技巧。 规划学习目标 首先,一个明确的学习目标是高效学习的基础。在使用学习平台…

如何将jsp项目转成springboot项目

昨天说过,springboot推荐使用Thymeleaf作为前后端渲染的模板引擎,为什么推荐用Thymeleaf呢,有以下几个原因: 动静结合:Thymeleaf支持HTML原型,允许在HTML标签中增加额外的属性来实现模板与数据的结合。这样…

ts中type和interface的区别

面试中被问到,在TypeScript中,Type和Interface的区别这个问题。 区别 首先,在TypeScript中,Type和Interface都用于定义对象或函数的类型,区别如下: 语法不同 interface使用关键字interface来定义&#…

Redis缓存雪崩,击穿,穿透问题

缓存雪崩、击穿、穿透、发生的背景 ​ 作者最近在写一个社区论坛项目,初始设想将论坛里用户发布的帖子内容存到数据库中,当用户访问论坛里的帖子时,帖子信息都从数据库中查。众所周知数据库的帖子数据是存在磁盘中的,而磁盘读写数…

20240509解决Protel99se导入philips.ddb出现File is not recognized的问题

20240509解决Protel99se导入philips.ddb出现File is not recognized的问题 2024/5/9 16:25 缘起:最近需要用到/画PCB,想到十年前用过Protel99SE。 使用的系统:WIN10/WIN11都会出错。WIN7没有测试! 从115网盘的角落里找到七集视频…

【笔记】Anaconda命令提示符(Anaconda Prompt)操作

通过anaconda配置python环境有时需要conda安装一些包或者文件,这里作为一个笔记记录如何打开Anaconda命令提示符(Anaconda Prompt),并用conda操作 1.打开Anaconda命令提示符(Anaconda Prompt) 可直接在搜…

DELL EMC unity存储系统如何初始化

在客户的存储使用过程中,经常会碰到一些场景需要对存储系统做重新初始化,就是回到出厂时候的配置。比如,客户设备要利旧,二次使用,一般都要回到出厂状态做重新配置的动作。存储严重故障,没有能力修复或者数…

十四五”智慧城市:视频大数据汇聚系统2.0建设方案与特点分析

一、背景需求分析 随着科技的不断发展,智慧城市的建设已经成为城市发展的重要方向。视频汇聚系统作为智慧城市建设的重要组成部分,已经得到了广泛的应用和推广。视频汇聚系统是智慧城市中非常重要的组成部分,它利用摄像头和传感器技术来收集…

IDEA切换分支

1、选择要切换分支的module 2、右键,选择git 3、再点击branches 4、可以看到当前module的本地分支(local Branches)及远程分支(Remote Branches)列表。点击你要切换到的分支,Checkout即可。

MySQL变量的定义与使用

# MySQL变量的定义与使用 # 标识符命名规范 # 1、不允许使用数字作为开头 # 2、只能使用_和$符号,不允许使用其他符号 # 3、不允许使用关键字和保留字 set userName小可爱; select userName; # 定义数值类型:整数,小数 set x100,y2; select x…

卡牌——蓝桥杯十三届2022国赛大学B组真题

样例输入 4 5 1 2 3 4 5 5 5 5样例输出 3样例说明 这 5 张空白牌中,拿2张写1,拿1张写2,这样每种牌的牌数就变为了3,3,3,4, 可以凑出 3套牌,剩下2张空白牌不能再帮助小明凑出一套。 评测用例规模与约定 对于30%的数据,保证n ⩽ \leqslant ⩽ 2000; 对于100%的数据…

Baidu Comate:智能编码,编程效率的革新者

文章目录 一、何为智能编码助手?二、Baidu Comate智能编码助手简介三、Baidu Comate注册四、Baidu Comate体验Comate插件功能1.注释生成代码2.函数注释生成3.行间注释生成4.生成代码解释5. 调优建议 五、插件功能的使用体验感受和建议 🚩结语 一、何为智…

JS中的扩展运算符...

JS中的…是扩展运算符,是es6的新语法; 其作用在对象上,返回一个对象,取出对象所有可遍历属性; 场景1: let person { name:张三,age:18}let someone {...person}console.log(someone) //返回 {…

走进标杆企业 | 山东国屹建材实现双站一体化管理

走进标杆企业 走进标杆企业,感受名企力量,探寻学习优秀企业领先之道。本期要跟砼行们推介的标杆企业是山东国屹新型建材有限公司。 山东国屹新型建材有限公司成立于2018年,共建有两个站点、四条混凝土生产线,预拌混凝土实际日产…

手写SpringBoot核心功能流程

本文通过手写模拟实现一个简易版的Spring Boot 程序,让大家能以非常简单的方式知道Spring Boot大概的工作流程。 工程依赖 创建maven工程,并创建两个module springboot模块:手写模拟springboot框架的源码实现 test模块:业务系统…

【GDAL应用】基于rasterstats的矢量数据分区统计栅格值信息

文章目录 1 实现效果2 实现功能3 实现代码 1 实现效果 矢量数据: 栅格数据:只有一个value值(像素值或DN值),为1,计算统计时nodata作为0值处理。 输出结果: 2 实现功能 基于单波段的栅格数…

代码随想录刷题打卡day22

1 最大二叉树 使用递归的思路构造二叉树,一般选择前序遍历对树进行构造,需要先构造中间节点,然后递归构造左子树和右子树。 三部曲 确定递归函数的参数和返回值 参数传入的是存放元素的数组,返回该数组构造的二叉树的头结点&…

英语单词学习

house of worship:宗教场所 dote: 喜爱 coffin:棺材 coffeine:咖啡因 expedient:权宜的 buster:破坏者 procrastinate: 拖延 gourmet:美食家 expound:阐述 narcissist:自我陶醉 assassinate:暗杀 salvage: 挽救 savage: 凶猛的 ulcer: 溃疡 obituary:讣告 arbitrary:武断的 abu…

关于勒索攻击,绝大多数企业存在的三个认知误区

网络空间,有一个挥之不去的“幽灵”,它的名字就叫勒索攻击。 近年来,企业遭受勒索攻击的事件被频频曝光。就在不久前,国家安全部曝光了一起境外黑客组织对我国某高新科技企业实施勒索攻击的案例,该企业的相关信息化系统…

Java云商城系统 云端商城 一站式系统Java源码 云商城自助下单平台 云商城虚拟交易网

内容目录 一、详细介绍二、效果展示2.效果图展示 三、学习资料下载 一、详细介绍 云商城系统,无后门,一站式系统Java源码,心权益商品数量不限数量 系统对接 手动发货 自动发货 兑 换 码 订单监控 商品监控 对象存储 邮箱提醒 加价模板 密价…