JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式

这篇具有很好参考价值的文章主要介绍了JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js 🍖JS版算法
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧


✨✨前言

大家好,这里是前端杂货铺。

上一节,我们学习了简单工厂模式、抽象工厂模式和建造者模式,它们都隶属于设计模式中的 创建型模式。这一节,我们学习单例模式、装饰器模式和适配器模式…

一、单例模式

单例模式是一种创建型设计模式。它保证一个类仅有一个实例,并提供一个访问它的全局访问点。主要解决一个全局使用的类频繁地创建和销毁,占用内存。

如下例子,在不刷新网页的情况下,我们再次修改已经创建的实例,实例不会发生更改,因为单例模式只在第一次创建的时候有效。

应用场景:创建一个对象要消耗的资源多(如写日志)、只允许一个线程访问(如计数器,确保线程安全)。

class Singleton {
    constructor(name, age) {
        if (!Singleton.instance) {
            this.name = name;
            this.age = age;
            Singleton.instance = this;
        }
        return Singleton.instance;
    }
}

let zahuopu;
zahuopu = new Singleton('前端杂货铺', 22);
zahuopu = new Singleton('CSDN', 2023);
console.log('zahuopu', zahuopu);

JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式,设计模式,javascript,设计模式,单例模式,装饰器模式,适配器模式


二、装饰器模式

装饰器模式能够很好的 对已有功能进行拓展,它不会更改原有的代码,极大地减小了对其他业务的影响,这样就可以方便我们在较少改动下对软件功能进行拓展。

举个栗子:原本的程序有 test() 主业务,现在我们想在不更改原有代码的情况下在 主业务之前主业务之后 添加一些新的业务,那么这个时候就可以使用我们的装饰器模式。

应用场景:API 参数验证、日志记录等。

Function.prototype.before = function (beforeFn) {
    let _this = this;
    return () => {
        // 前置函数调用
        beforeFn.apply(this, arguments);
        // 执行原来的函数
        return _this.apply(this, arguments);
    }
}

Function.prototype.after = function (afterFn) {
    let _this = this;
    return () => { 
        let result = _this.apply(this, arguments);
        // 后置函数调用
        afterFn.apply(this, arguments);
        // 执行原来的函数
        return result;
    }
}

function test() {
    console.log('主业务');
}

let test1 = test.before(() => {
    console.log('前置业务');
}).after(() => { 
    console.log('后置业务');
});

test1();

JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式,设计模式,javascript,设计模式,单例模式,装饰器模式,适配器模式


三、适配器模式

适配器模式 将一个类的接口转换成客户希望的另一个接口。它让那些接口不兼容的类可以一起工作。

举个栗子:我们家庭用电基本都是 220V 的,但直接给电器这么大伏特的电显然是不行的(直接烧了),这个时候就需要一个转接头对伏特进行处理,使得电器能够正常使用。

再举个栗子:对于 百度地图 和 腾讯地图 是由两个团队各自研发的,它们里面的 接口显然是不一样的。我们 在美团上找店铺位置的时候会让我们选择打开百度地图还是腾讯地图。这个时候美团就可以 默认调用百度地图的接口再使用适配器模式让不兼容的腾讯地图变的兼容起来。

// 腾讯地图
class TencentMap {
    show() {
        console.log("开始渲染腾讯地图");
    }
}

// 百度地图
class BaiduMap {
    display() {
        console.log("开始渲染百度地图");
    }
}

// 由于 renderMap 默认调用的是 display(), 而 TencentMap 调用的是 show()
// 所以我们需要做一个适配器 TencentAdapter 继承自 TencentMap, 通过 display() 去调用 show()
class TencentAdpater extends TencentMap {
    constructor() {
        super();
    }

    display() {
        this.show();
    }
}

// 渲染地图(由于百度地图和腾讯地图是两个团队,内置方法不统一,我们先默认渲染百度地图)
function renderMap(map) {
    map.display()
}

renderMap(new TencentAdpater());
renderMap(new BaiduMap())

JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式,设计模式,javascript,设计模式,单例模式,装饰器模式,适配器模式


🎉🎉本篇小结

本文我们了解了单例模式、装饰器模式和适配器模式。

单例模式 是一种 创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点来访问该实例。

装饰器模式 是一种 结构型设计模式,它允许向一个现有的对象添加新的功能,同时又不改变其结构。

适配器模式 是一种 结构型设计模式。它是两个不兼容接口之间的桥梁,把两个独立接口的功能进行了良好的结合。

好啦,本篇文章到这里就要和大家说再见啦,祝你这篇文章阅读愉快,你下篇文章的阅读愉快留着我下篇文章再祝!


参考资料:

  1. 百度百科 · 软件设计模式(设计模式)
  2. 菜鸟教程 · 设计模式
  3. JavaScript设计模式 【作者:千锋教育】

JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式,设计模式,javascript,设计模式,单例模式,装饰器模式,适配器模式文章来源地址https://www.toymoban.com/news/detail-695718.html


到了这里,关于JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js 中单例模式、工厂模式、装饰模式、发布订阅模式、适配器模式、

    简单概述:将每个功能拆分到最小化,最后将小功能拼接到一起

    2024年02月11日
    浏览(43)
  • 【设计模式】适配器模式

    适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。 这种模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能。举个真实的例子,读卡器是作为内存卡和笔记本之间的适配器。

    2024年02月12日
    浏览(59)
  • 设计模式-适配器模式

    在我们生活中,插座输出的电源都是220V的,而我们手机充电需要的电压基本都是5V的。我们不能直接用220V的电压来给手机充电,也不能说专门有线路来提供5V的电压。所以就有了充电器,充电器可以将220V的电压转为5V的电压,这样我们就方便太多了。 上面所说的充电器其实就

    2024年02月08日
    浏览(45)
  • 设计模式——适配器模式

    说起适配器其实在我们的生活中是非常常见的,比如:学校的宿舍的电压都比较低,而有的学生想使用大功率电器,宿舍的就会跳闸,然而如果你使用一个适配器(变压器)就可以使用了(温馨提示宿舍使用大功率电器不太安全,容易引起火灾,希望大家谨慎使用)。 又比如

    2024年02月12日
    浏览(58)
  • 设计模式--适配器模式

    目录 基本介绍 工作原理 类适配模式 介绍 应用实例介绍 类适配器模式注意事项和细节 对象适配模式 介绍 对象适配器模式注意事项和细节 接口适配器模式 介绍 适配器模式的注意事项和细节  (1) 适配器模式(Adapter Pattern) 将某个类的接口转换成客户端期望的另一个接口表示

    2023年04月26日
    浏览(41)
  • 【设计模式】使用适配器模式做补偿设计

    适配器模式是一种 结构型设计模式 ,它提供了一个中间层,通过这个中间层,客户端可以使用统一的接口与具有不同接口的类进行交互,也就是说,将一个接口转换成客户期望的另一个接口,使得原本不兼容的接口能够协同工作。 举个现实中的例子,我们现在的很多轻薄笔

    2024年02月22日
    浏览(42)
  • 《设计模式》之适配器模式

    把一个类的接口转换成客户端所期待的另一种接口,从而使原接口不匹配而无法再一起工作的两个类能在一起工作。 在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象”放在新的环境中应用,但是新环境要求的接口是这些现存对象所不能满足的。 如何应对

    2024年02月09日
    浏览(52)
  • 设计模式 06 适配器模式

    适配器模式(Adapter Pattern)属于 结构型 模式 结构型 模式关注如何将现有的类或对象组织在一起形成更加强大的结构。 在生活中,我们经常遇到这样的一个问题:轻薄笔记本通常只有 type-c 或者 usb-a 接口,没有网口。但日常使用中是往往需要连接网口上网的,这时想到的第

    2024年02月11日
    浏览(40)
  • 设计模式四:适配器模式

    1、适配器模式的理解 适配器模式可以理解为有两个现成的类Adaptee和Target,它们两个是不能动的,要求必须使用B这个类来实现一个功能,但是A的内容是能复用的,这个时候我们需要编写一个转换器 适配器模式 Adaptee:被适配者,现有的接口或者类; Adapter:适配器类,适配器

    2024年02月22日
    浏览(47)
  • 设计模式-- 3.适配器模式

    将一个类的接口转换成客户希望的另外一个接口。使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 请求者(client):客户端角色,需要使用适配器的对象,不需要关心适配器内部的实现,只对接目标角色。 目标角色(Target):目标角色,和client直接对接,定义

    2024年01月18日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包