观察者模式案例

最新推荐文章于 2022-01-10 11:48:37 发布
最新推荐文章于 2022-01-10 11:48:37 发布
阅读量195 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38068491/article/details/83686408
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<label>信息更新：<input type="text" id="publish" placeholder="请输入用户名称" /></label><br /><br />
        <label>观察者一：<input type="text" id="obs1" readonly /><button id="btn1">注销</button><button id="q1">启用</button></label><br />
        <label>观察者二：<input type="text" id="obs2" readonly /><button id="btn2">注销</button><button id="q2">启用</button></label>
	</body>
</html>
<script type="text/javascript">
	
	var publish = document.getElementById("publish");
	var obs1 = document.getElementById("obs1");
	var obs2 = document.getElementById("obs2");
	var btn1 = document.getElementById("btn1");
	var btn2 = document.getElementById("btn2");
	var q1 = document.getElementById("q1");
	var q2 = document.getElementById("q2");
	
	//信息更新类
	function Publish(obj){
		//信息文本框
		this.obj=obj;
		//保存所有的观察者
		this.abservers=[];
		var state="";//不能让外部随意使用更新后的信息
		
	    //用于观察者接受更新后的信息
	    this.getState=function(){
	    	return state;
	    }
	    //设置信息（更新后的信息需要设置）
	    this.setState=function(value){//value更新后的值
	    	state=value;
	    	this.notice();
	    }
	    
	   }
	   
	   Publish.prototype.addObs=function(observer){
	   	var flag=false;//表示观察者不存在
	   	for(var i=0;i<this.abservers.length;i++){
	   		if(this.abservers[i]===observer){
	   			flag=true;//表示观察者存在
	   		}
	   }
	   if(!flag){//观察者不存在
	   	this.abservers.push(observer);
	   }
	   }
	   //禁用就删除此观察者
	   Publish.prototype.removeObs=function(observer){
	   	for(var i=0;i<this.abservers.length;i++){
	   		if(this.abservers[i]===observer){
	   			this.abservers.splice(i,1);
	   		}
	   	}
	   }
	    
	   Publish.prototype.notice=function(){
	   	//观察者收到更新的信息
	   	for(var i=0;i<this.abservers.length;i++){
	   		this.abservers[i].updateState(this.getState());
	   	}
	   }
	   
	   //观察者类
	   function Observer(obj){
	   	//把更新的内容拿到手
	   	this.obj=obj;
	   	
	   	//添加一个updateState，用来接收更新后的内容
	   	this.updateState=function(state){
	   		//state接收更新后的内容
	   		this.obj.value=state;
	   }
	}
	   
	   var obs1=new Observer(obs1);
	   var obs2=new Observer(obs2);
	   
	   var pub=new Publish(publish);
	   pub.addObs(obs1);
	   pub.addObs(obs2);
	   
	   pub.obj.onkeyup=function(){
	   	
	   //当信息更新后，可以开始设置更新后的内容，一遍观察者接受更新后的信息
	   //开始设置更新后的内容
	   pub.setState(this.value);
	   
	}
	
	btn1.onclick=function(){
	pub.removeObs(obs1);	
	}
	btn2.onclick=function(){
	pub.removeObs(obs2);	
	}
	q1.onclick=function(){
		pub.addObs(obs1);
	}
	q2.onclick=function(){
		pub.addObs(obs2);
	}
	
</script>

 

qq_38068491
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
观察者模式（Observer Pattern）案例解析
12-24 1040
观察者模式（Observer Pattern）案例解析 案例描述： 有一个雷达负责扫描目标，一旦发现目标，就会通知攻击序列对目标进行摧毁，攻击序列中的所有武器会向目标发动攻击。 现有的武器可以加入攻击序列，也可以退出攻击序列。 雷达扮演Subject，大炮和导弹扮演Observer，大炮和导弹通过attach加入到雷达的攻击序列，一旦雷达发现目标，启动攻击序列摧毁目标。
观察者模式_OBSERVER_案例详解
Leaning_wk的专栏
11-26 442
观察者模式_OBSERVER_案例详解 1、Observer案例 在23种设计模式中,观察者模式算是模式设计中的皇后,尤其是在我们做软件设计过的过程中所体现的更是立足无穷,再说它好,还不如来个实例不是更简单明了,我就把对其概念上的讲解以注释的方式写在代码注释中,如下所示： //首先我们需要先定义一个接口为:抽象观察者 public interface Watcher{  //再定义一个用
行为模式之观察者模式的案例示范
HUBA_yosa的博客
01-10 4652
1. 观察者模式介绍 简单来说，当一个行为发生时传递信息给另外一个用户接受做出相应的处理，两者之间没有直接的耦合关联。 在编程开发中也会经常用到一些观察者的模式或组件，如MQ服务，虽然MQ服务是有一个通知中心并不是每一个类服务进行通知，但整体上可以算是观察者模式的思路设计。再比如可能做过的一些类似事件监听总线，让主线服务与其他辅线业务服务分离，为了使系统降低耦合和增强扩展性，也会使用观察者模式思想。 2. 案例场景模拟 在本案例中模拟每次小客车指标摇号事件通知场景。 假如这个类似的摇号功能由你来开发，并
Java观察者模式案例
01-17
以下是一个简单的Java观察者模式案例： ```java import java.util.ArrayList; import java.util.List; // 主题类（被观察者） class ObservableSubject extends Observable { private String state; public ...
观察者模式案例学习代码
02-26
在这个“观察者模式案例学习代码”中，我们可能会看到以下的实现步骤： 1. 定义Subject接口或抽象类，包含addObserver、removeObserver和notifyObservers等方法。 2. 创建ConcreteSubject类，实现Subject接口，维护...
设计模式之观察者模式
06-16
在`observermode`这个压缩包中，可能包含了关于观察者模式的代码示例、教程文档或者案例分析。这些资源可以帮助你更深入地理解如何在实际项目中应用观察者模式。你可以通过阅读这些材料，学习如何创建观察者和被观察...
androidObserver观察者模式案例祥解.pdf
11-25
在上述案例中，观察者模式的实现分为以下几个关键部分： 1. **抽象观察者** (Watcher接口)： - 定义了一个`updateNotify(Content content)`方法，当被观察者的状态发生变化时，这个方法会被调用，传递更新后的信息...
java设计模式之观察者模式
12-01
观察者模式（Observer Pattern）是这些模式中的一种，它在多对一的关系中使用，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。这个模式在事件驱动编程中非常常见，例如GUI组件间的交互、...
观察者模式实现了股价涨跌提示
11-18
现在有许多炒股软件都为股民们提供了股价涨跌提示的功能，当股价涨跌幅度达到5%时，软件就会向股民某某人发出消息，提示股价波动幅度超过5%，并给出当前价格。用观察者模式设计整个过程。
观察者模式的编写
10-31
是c++设计模式中的 观察者模式，可以以它为基本实现其他的行为
java-观察者模式案例
侯春强的博客
07-02 1564
题目： 请用观察者模式实现如下实例： 观察者有游戏观察者（GameObserver）和视频观察者（VideoObserver）。 观察者中的更新函数（updata）只需输出具体Subject对象的状态和状态改变语句即可。 目标对象(Subject）有哨兵（Sentry）和老师（teacher），一个目标对象可以对应多个和多种观察者对象， 当客服端目标对象状态设置为（"高老师来了"），
再探设计模式之观察者模式(股票通知系统)
陈珏煊的专栏
09-05 1817
package com.linewell.modeldesign.observer import scala.collection.mutable.ArrayBuffer import scala.util.Random /** * 某软件公司欲开发一款实时在线证劵软件，该软件需要提供以下功能： * 当股票购买者购买的某只证劵价格幅度达到5%时，系统将自动的发送通知 * ...
设计模式题目-观察者模式(Observer)
qq_32471747的博客
11-27 6500
1.题目 某在线股票软件需要提供如下功能：当股票购买者购买的某只股票价格变化幅度达到5%时，系统将自动发送通知（包括新价格）给购买该股票的股民。现使用观察者模式设计该系统，绘制类图并编成实现。 2.题解 2.1UML类图 ​ 首先是UML类图，如下图所示: 2.2实现代码(C#) ​ 代码如下: abstract class Observer { public abs...
观察者模式简介及使用示例
。鲸落
06-10 5951
文章目录观察者模式简介使用示例总结优缺点使用场景扩展联想学习 观察者模式简介 观察者模式又叫发布订阅（Publish/Subscribe）模式 观察者模式（Observer Pattern）定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新自己。 类图： 核心类说明： Subject： 抽象主题，即为被观...
观察者模式
DarkfallYou的博客
05-10 154
描述：每当一个对象改变状态，所有依赖于它的对象都会得到通知并自动更新。 （发布和订阅，将观察者和被观察者解耦） 观察者： public class TestObserver implements Observer{ private String mStr; public TestObserver(String str) { mStr= str; } ...
ASP外观专利图像检索平台(源代码+论文).rar
最新发布
07-21
ASP外观专利图像检索平台(源代码+论文)
用Java写观察者模式案例代码
06-02
好的，下面是一个简单的观察者模式案例代码： 主题接口 Subject.java： ```java public interface Subject { void registerObserver(Observer observer); void removeObserver(Observer observer); void ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值