JavaScript设计模式(四)——策略模式、代理模式、观察者模式

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

个人简介

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

设计模式

内容 参考链接
JavaScript设计模式(一) 构造器模式、原型模式、类模式
JavaScript设计模式(二) 简单工厂模式、抽象工厂模式、建造者模式
JavaScript设计模式(三) 单例模式、装饰器模式、适配器模式

✨✨前言

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

上一节,我们学习了单例模式、装饰器模式、适配器模式。这一节,我们学习策略模式、代理模式和观察者模式…

一、策略模式

策略模式定义了一系列 算法或策略,并将每个算法封装在独立的类中,使得它们可以互相替换。通过使用策略模式,可以在运行时根据需要选择不同的算法,而不需要修改客户端代码。

举个栗子:公司年终奖分为四个等级(S、A、B、C),S 级发薪水的 6 倍,A 级发薪水的 4 倍,B 级发薪水的 3倍,C 级发薪水的 2 倍。此时,即可使用策略模式对不同等级的员工进行年终奖的发放。

let strategy = {
    "S": (salary) => {
        return salary * 6;
    },
    "A": (salary) => {
        return salary * 4;
    },
    "B": (salary) => {
        return salary * 3;
    },
    "C": (salary) => {
        return salary * 2;
    }
}

function calBonus(level, salary) {
    return strategy[level](salary);
}

let levelS = calBonus("S", 20000);
let levelA = calBonus("A", 10000);
let levelB = calBonus("B", 9000);
let levelC = calBonus("C", 8000);

console.log('S:', levelS, ' A:', levelA, ' B:', levelB, ' C:', levelC);

JavaScript设计模式(四)——策略模式、代理模式、观察者模式,设计模式,javascript,设计模式,策略模式,代理模式,观察者模式


二、代理模式

代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。

代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西。

Vue3 中的双向数据绑定原理就是基于代理模式(Proxy)的。

举个栗子:很多明星不能自己接戏,只能通过经纪人来接,这种情景其实就可以看成代理模式。若经纪人规定出场费不能低于 10000,则低于 10000 的都会被经纪人拒绝 “价格不合适”,大于等于 10000 才会同意出演。

class Star {
    play() {
        console.log("价格合适,可以演戏");
    }
}
    
class StarProxy {
    constructor() {
        this.superStar = new Star();
    }

    talk(price) {
        if (price >= 10000) {
            this.superStar.play();
        } else {
            throw new Error("价格不合适")
        }
    }
}

let broker = new StarProxy();
broker.talk(10000);
broker.talk(2000);

JavaScript设计模式(四)——策略模式、代理模式、观察者模式,设计模式,javascript,设计模式,策略模式,代理模式,观察者模式

JavaScript设计模式(四)——策略模式、代理模式、观察者模式,设计模式,javascript,设计模式,策略模式,代理模式,观察者模式


下面我们简单的模仿 Vue3 的双向数据绑定(其原理就是代理模式)。

<div id="box">默认:前端杂货铺</div>
let vueObj = {};

let proxy = new Proxy(vueObj, {
    get(target, key) {
        return target[key];
    },
    set(target, key, value) {
        if (key === "data") {
            box.innerHTML = value;
        }
        target[key] = value;
    }
})

JavaScript设计模式(四)——策略模式、代理模式、观察者模式,设计模式,javascript,设计模式,策略模式,代理模式,观察者模式

JavaScript设计模式(四)——策略模式、代理模式、观察者模式,设计模式,javascript,设计模式,策略模式,代理模式,观察者模式


三、观察者模式

观察者模式是一种 行为型设计模式,它定义了一种 一对多的依赖关系,当一个对象的状态发生改变时,其所有依赖者都会收到通知并自动更新。

我们定义一个主体类 Subject 和一个观察者类 Observer,在 Subject 中设置几个方法 => add(给主体添加观察者)、remove(给主体移出观察者)、notify(通知观察者类更新观察者),在 Observer 中设置更新观察者的方法 => update

// 主体对象(被观察者)
class Subject {
    constructor() {
        // 收集所有的观察者
        this.observers = [];
    }

    // 给主体添加观察者
    add(observer) {
        this.observers.push(observer);
    }

    // 移出某个/某些观察者
    remove(observer) {
        this.observers = this.observers.filter(item => item !== observer);
    }

    // 通知观察者类更新观察者
    notify() {
        this.observers.forEach(item => {
            item.update();
        })
    }
}

// 观察者类
class Observer {
    constructor(name) {
        this.name = name;
    }
    // 更新观察者
    update() {
        console.log("update", this.name);
    }
}

// 主体对象
const subject = new Subject();
// 观察者1
const observer1 = new Observer("CSDN");
// 观察者2
const observer2 = new Observer("前端杂货铺");

// 给主体对象添加观察者
subject.add(observer1);
subject.add(observer2);

// 通知观察者类 => 更新观察者
subject.notify();

console.log('分-------割-------线')

// 给主体对象移出观察者1
subject.remove(observer1);
// 通知观察者类 => 更新观察者
subject.notify();

JavaScript设计模式(四)——策略模式、代理模式、观察者模式,设计模式,javascript,设计模式,策略模式,代理模式,观察者模式


🎉🎉本篇小结

本文我们了解了策略模式、代理模式和观察者模式。

策略模式 是一种 行为型设计模式,它定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。

代理模式 是一种 结构型设计模式,它通过一个类代表另一个类的功能。

观察者模式 是一种 行为型设计模式。它定义了一种一对多的依赖关系,当一个对象的状态发生改变时,其所有依赖者都会收到通知并自动更新。

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


参考资料:

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

JavaScript设计模式(四)——策略模式、代理模式、观察者模式,设计模式,javascript,设计模式,策略模式,代理模式,观察者模式文章来源地址https://www.toymoban.com/news/detail-699058.html


到了这里,关于JavaScript设计模式(四)——策略模式、代理模式、观察者模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 设计模式——观察者模式

    观察者模式可以分为观察者和被观察者,观察者通过注册到一个被观察者中,也可视为订阅,当被观察者的数据发生改变时,会通知到观察者,观察者可以据此做出反应。 可以类比订阅报纸,报社就是被观察者,订阅者就是观察者,订阅者通过订阅报纸与报社建立联系,而报

    2024年02月15日
    浏览(53)
  • 设计模式-观察者模式

    观察者模式是一种行为型设计模式,它定义了一种一对多的依赖关系,当一个对象的状态发生改变时,其所有依赖者都会收到通知并自动更新。当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知依赖它的对象。观察者

    2024年02月15日
    浏览(58)
  • 设计模式---观察者模式

    1,概念         属于行为模式的一种,定义了一种一对多的依赖关系,让多个观察者对象同时监听某一对象主题对象,这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。 在观察者模式中有如下角色: Subject:抽象主题(抽象被观察者),

    2024年02月15日
    浏览(65)
  • 设计模式:观察者模式

    定义 观察者模式(Observer Pattern)是一种行为设计模式,允许一个对象(称为“主题”或“可观察对象”)维护一组依赖于它的对象(称为“观察者”),当主题的状态发生变化时,会自动通知所有观察者对象。 应用场景 观察者模式适用于以下场景: 联动反应 :当一个对象

    2024年04月08日
    浏览(59)
  • 重温设计模式 --- 观察者模式

    观察者模式 是一种行为型设计模式,它允许对象之间建立一种一对多的关系,使得当一个对象状态改变时,所有依赖它的对象都能够自动得到通知并更新自己的状态。该模式可以帮助我们实现松耦合的系统,以便更好地应对变化和扩展。 在观察者模式中,有两个角色: 观察

    2024年02月13日
    浏览(59)
  • 设计模式(11)观察者模式

    一、概述: 1、定义:观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己。 2、结构图: 实现  调用

    2024年02月11日
    浏览(53)
  • 设计模式——14. 观察者模式

    观察者模式(Observer Pattern)是一种行为型设计模式,用于定义对象之间的一对多依赖关系,使得当一个对象的状态发生改变时,所有依赖于它的对象都能够自动收到通知并更新自己的状态,以保持与被观察对象的同步。观察者模式也被称为发布-订阅模式。 观察者模式包含以

    2024年02月07日
    浏览(45)
  • 设计模式之观察者模式

    可以帮你的对象知悉现况,不会错过该对象感兴趣的事。对象甚至在运行时可决定是否要继续被通知。 从报纸和杂志的订阅说起: 报社的业务就是出版报纸 向某家报社订阅报纸,只要他们有新报纸出版,就会给你送来。只要你是他们的订户,你就会一直收到新报纸。 当你不

    2024年01月24日
    浏览(54)
  • 设计模式:行为型模式 - 观察者模式

    定义: 又被称为发布-订阅(Publish/Subscribe)模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。 在观察者模式中有如下角色: Subject:抽象主题(抽象被观察

    2023年04月22日
    浏览(97)
  • 设计模式之二:观察者模式

    假定我们需要为Weather-O-Rama公司建立一个气象站系统,除已有的WeatherData有数据源类,还需要更新三个布告板的显示:目前状况(温度、湿度、气压)、气象统计和天气预报。  1 以下是一个可能的实现 上述实现有以下问题存在: 针对具体实现编程,而非针对接口(currentCon

    2024年02月13日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包