观察者模式-坦克大战-js

最新推荐文章于 2025-10-01 09:53:49 发布

原创最新推荐文章于 2025-10-01 09:53:49 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

104 篇文章

订阅专栏

设计模式-js

19 篇文章

订阅专栏

本文深入探讨了观察者模式，一种用于定义对象间一对多依赖关系的设计模式。当一个对象状态改变时，所有依赖对象自动更新。通过具体示例，展示了模式的实现与应用，包括主体与观察者的角色定义及交互过程。

概要

定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新。

类图

观察者模式

运行

代码


console.log('观察者模式演示：');
var states = { sort: "sort", run: "run" }
var indexId = 0;
// 抽象层
class SubjectCommandCenter {
    constructor() {
        this.tanks = Array();
        this.state = states.sort;
    }
    attach(tank) {
        this.tanks.push(tank);
    }
    notify() {
        for (let i in this.tanks) {
            this.tanks[i].update(this.state);
        }
    }    
}
class ObserverTank {
    update(state) {
        
    }
}
// 实际层
class ConcreteCommandCenter extends SubjectCommandCenter {
    constructor() {
        super();
    }
    setDate(date) {
        if (date != this.state) {
            this.state = date;
            this.notify();
        }
    }
}
class ConcreteTank extends ObserverTank {
    constructor() {
        super();
        this.id = indexId++;
    }
    update(state) {
        if (state == states.sort) {
            this.sort();
        } else {
            this.run();
        }
    }
    sort() {
        console.log(this.id + "号坦克：sort");
    }
    run() {
        console.log(this.id + "号坦克：run");
    }
}
class TankTeam {
    constructor() {
        this.tanks = Array();
        this.commandCenter = new ConcreteCommandCenter();
        this.greates();
        this.register();
    }
    greates() {
        for (var i = 0; i < 10; i++) {
            this.tanks.push(new ConcreteTank());
        }
    }
    register() {
        for (var i in this.tanks) {
            this.commandCenter.attach(this.tanks[i]);
        }
    }
    command(date) {
        console.log("团部命令：" + date);
        this.commandCenter.setDate(date);
    }
}
// 客户端
class Client {
    main() {
        var tankTuan = new TankTeam();
        tankTuan.command(states.sort);
        tankTuan.command(states.run);
        tankTuan.command(states.sort);
    }
}
var client = new Client();
client.main();

英语

subject
n. 主题; 科目; [语] 主语; 国民; adj. 服从的; 易患…的; 受制于…的;
observer
n. 观察者; [天] 观测者; 遵守者
concrete
adj. 混凝土的; 实在的，具体的; 有形的; vi. 凝结; vt. 使凝固; 用混凝土修筑; ...
attach
vt. 使依附; 贴上; 系上; 使依恋; vi. 附加; 附属; 伴随
detach
vt. 分离; 派遣; 使超然
notify
vt. 通告，通知; 公布