javascript中的观察者模式实现

关注

转载最新推荐文章于 2026-04-01 02:14:38 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

观察者模式：实现JavaScript中的观察者模式 在这种模式中，一个被称为主题（Subject）的对象维护了一组观察者（Observers），并在自身状态发生变化时通知观察者。这样一来，主题对象可以灵活地添加、删除观察者，而观察者对象也可以独立于主题对象进行修改和扩展。除了上述示例中的简单观察者模式，还有其他变体的观察者模式，如使用事件驱动的观察者模式、使用Promise的观察者模式等。通过合理地运用观察者模式，我们可以更好地组织和管理对象之间的关系，提高代码的可维护性和扩展性。运行以上代码，我们会看到观察者对象收到了主题对象的通知，并执行了相应的操作。阅读详情

比如有这样一个场景,一款游戏玩家在等级1~10之间可以领取3000点经验,等级11级以上可以领取2000点经验.

我们可以用观察者模式来实现这个需求.

这里玩家就是一个观察者,或者说是一个订阅者,游戏系统就是一个被观察者,或者说一个发送者

下面用代码来实现:

<script type="text/javascript">
// 经验系统
var Experience = function(param) {
    this.name = param.name;
    // 经验值
    this.expVal = param.expVal;
    this.players = [];
}
// 发放经验
Experience.prototype.giveExp = function(player) {
    console.log("系统送给[" + player.name + "]" + this.expVal + "点经验.");
}

// 玩家
var Player = function(param) {
    this.name = param.name;    
}

// 申请经验模式
Player.prototype.apply = function(experience) {
    var players = experience.players;
    var isExist = false;
    for(var i=0,len=players.length;i<len;i++) {
        if(players[i] == this) {
            isExist = true;
            break;
        }
    }

    if(!isExist) {
        players.push(this);
    }

    return this;
}
// 领取经验
Player.prototype.getExp = function(experience) {
    var players = experience.players;
    for(var i=0,len=players.length;i<len;i++) {
        if(players[i] == this) {
            experience.giveExp(this);
            break;
        }
    }

    return this;
}



// 测试

// 申明玩家
var player1 = new Player({"name":"张三"}); // 玩家1,等级4
var player2 = new Player({"name":"李四"}); // 玩家2,等级12

// 申明经验系统
var exp2000 = new Experience({name:"2000点经验",expVal:2000});
var exp3000 = new Experience({name:"3000点经验",expVal:3000});

// 等级1~10能申请3000点经验
player1.apply(exp3000);
// 等级11以上能申请2000点经验
player2.apply(exp2000);

// 去NPC处领取经验:
player1.getExp(exp3000);
player2.getExp(exp2000);

/*
输出:
系统送给[张三]3000点经验.
系统送给[李四]2000点经验.
*/
</script>
url=http://topic.youkuaiyun.com/u/20120601/17/ee8ee2c3-8ccd-499a-9cda-35b0e8446e47.html?seed=1266795420&r=78744239#r_78744239

收录于