JS中简单实现观察者模式

v“u

已于 2022-11-29 17:05:24 修改

阅读量631

点赞数

于 2022-11-28 11:22:04 首次发布

本文链接：https://blog.csdn.net/weixin_48358407/article/details/128074939

版权

观察者模式 JavaScript 解耦事件驱动代码实现

关键词由CSDN通过智能技术生成

文章目录

JS中简单实现观察者模式

JS中简单实现观察者模式

1.1什么是观察者模式

1.1.1观察者模式图解

想要更加深入的了解观察者模式可以去看Vue中的观察者模式
在这里插入图片描述
当然，JS中可没有真正意义上的接口这个东西，所以下面属于接口解耦的那一部分图解可以在这里忽略不计。

1.1.2观察者模式文字阐述

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如一个对象被修改时，会通知依赖他的对象。观察者模式属于行为型设计模式。

意图：定义对象间的一种一对多的依赖关系，当对象发生改变时，所有依赖他的对象都会自动得到通知并更新，不主动触发，而是被动监听，让二者产生解耦。
主要解决：一个对象改变通知其他对象，考虑到低耦合，高度协作。
何时使用：如一个对象被修改时，会通知依赖他的对象。
如何解决：使用面向对象技术，可以将类之间的依赖关系弱化

不多说了直接上代码

1.2 JS中的代码实现

1.2.1目标类

用于存放观察者类对象，当目标类发生改变时会通知所有观察者

class SubjectBase {
    constructor() {
        // 用于存放观察者
        this.observerList = [];
    }
    /**
     * 调用观察者
     */
    notify() {
        this.observerList.forEach(o => {
            o.update();
        });
    }
    /**
     * 添加观察者
     * @param {*} observer 
     */
    attach(observer) {
        this.observerList.push(observer);
    }
    /**
     * 移除观察者
     * @param {*} observer 
     */
    detach(observer) {
        var index = this.observerList.findIndex(observer);
        this.observerList.splice(index, 1);
    }
}

为目标类设置私有成员变量，当该变量发生改变时（调用set方法）同时调用观察者类的update方法

class Subject extends SubjectBase {
    constructor() {
        super();
        // 设置私有成员变量state，设置state时触发观察者
        this.state = 0;
    }
    getState() {
        return this.state;
    }
    setState(state) {
        if (state != this.state) {
            this.state = state;
            this.notify();
        }
    }
}

1.2.2观察者类

将目标类作为参数传入观察者类的构造函数，同时调用目标类中将该观察者对象Push进观察者集合中的方法，然后再调用目标类的Set方法时循环调用观察者集合中的每一个观察者对象的update()用来通知每一个观察者类，目标类发生了改变。

/**
 * 观察者类
 */
class Observer {
    constructor(name, subject) {
        this.name = name;
        this.subject = subject;
        subject.attach(this);
    }

    update() {
        console.log(`${this.name} is updateing, 目标类被改变 state is ${this.subject.getState()}`);
    }
}

1.2.3 HTML展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./ObserverPattern.js"></script>
    <script>
       //实例化目标类
        var subject = new Subject();
        //实例化多个被观察者
        var ob1 = new Observer("被观察者1",subject);
        var ob2 = new Observer("被观察者2",subject);
        var ob3 = new Observer("被观察者3",subject);
        var ob4 = new Observer("被观察者4",subject);
        //调用目标类Set方法改变目标类中的私有变量
        subject.setState(1);
    </script>
</head>
<body>
    
</body>
</html>