设计模式之观察者模式

Vue

Vue 是构建用户接口的 JS 框架，核心是

• 声明式渲染，数据的双向绑定 [基于MVVM模式]
• 组件化开发 [基于虚拟的DOM 文档对象模型]

MVVM

M-V-VM 框架

• 基于 观察者设计模式 / 订阅-发布模式

• MVC 的进阶版

• Model 被观察者(主题/发布方)

• View 观察者(主题的订阅者)

• ViewModel 将 model 和 view 解耦

    	应用场景
    	- GUI
    		- Windows UI
    		- iOS
    		- android
    	- Web 前端框架
    		- angular  JS
    		- Vue		JS
    		- React	JS
  

下面就 MVVM 简单 实现 观察者模式：

M 指 model，数据模型 - 被观察者(主题/发布方)
V 指 view ，视图层 - 观察者(主题的订阅者)

1.被观察者(model)

被观察者类 Model
需要 继承 Observable 类，状态改变后，需要setChanged()，否则通知观察者无效。

import java.util.Observable;

// 数据模型
// 被观察者
// 可被观察的模型/发布者
public class Model  extends Observable{

	// 数据、状态
	int n;

	/**
	 * 改变 n
	 * @param n
	 */
	public void setN(int n) {
		this.n = n;
		
		// 默认是false，调用该方法设置为true，即发生改变，在通知之前要调用
		// 设置，状态改变
		setChanged();
		
		// 通知观察者 
//		notifyObservers();
		
		// 通知观察者 携带参数
		notifyObservers(n);
	}
	
	public int getN() {
		return n;
	}
	
}

被观察者类 ModelB

import java.util.Observable;

public class ModelB extends Observable{
	
	public static final int MSG_PRICE = 1;

	public static final int MSG_TITLE = 2;

	double price;
	
	String title;
	
	public void setPrice(double price) {
		this.price = price;
		setChanged();
		// 携参，告知观察者消息的类型
		notifyObservers(MSG_PRICE);
	}
	
	public void setTitle(String title) {
		this.title = title;
		setChanged();
		// 携参，告知观察者消息的类型
		notifyObservers(MSG_TITLE);
	}
	
	public double getPrice() {
		return price;
	}
	
	public String getTitle() {
		return title;
	}
}

2.观察者(view)

观察者类需要实现 Observer 接口，实现 update() 方法，如果观察者关注了多个主题，可以通过 instanceof 判断传入的被观察对象是属于哪个主题，进而做出不同的响应。如果关注的主题存在多个状态发生改变，可以判断状态的类型，进而做出不同的响应。

观察者 UiBar

import java.util.Observable;
import java.util.Observer;

public class UiBar implements Observer{

	// 内置的回调方法
	/**
	 * 参数
	 * 1）被观察的对象
	 * 2) 观察者发通知时传递的参数
	 */
	@Override
	public void update(Observable o, Object arg) {
		
		// 更新由 Model 触发的
		if(o instanceof Model) {
			// 转型
			Model m = (Model) o;
			System.out.println("UiBar收到：模型 Model 状态更新了"+ m.getN());
		}
		
		// 更新由 ModelB 触发的
		if(o instanceof ModelB) {
			
			ModelB m2 = (ModelB)o;
			
			int msg = (int)arg;
			switch (msg) {
			case ModelB.MSG_PRICE:
				System.out.println("UiBar收到：模型 ModelB 更新了 ::价格::"+m2.getPrice());
				break;
			case ModelB.MSG_TITLE:
				System.out.println("UiBar收到：模型 ModelB 更新了 ::标题::"+m2.getTitle());
				break;
			}
		}
	}

}

观察者 UiFoo

import java.util.Observable;
import java.util.Observer;

// 观察者
public class UiFoo implements Observer{

		// 回调方法
		@Override
		public void update(Observable o, Object arg) {
			
			// 更新由 Model 触发的
			if(o instanceof Model) {
				// 
				Model m = (Model) o;
				System.out.println("UiFoo收到：模型 Model 状态更新了"+ m.getN());
			}
			
			// 更新由 ModelB 触发的
			if(o instanceof ModelB) {
				
				ModelB m2 = (ModelB)o;
				
				int msg = (int)arg;
				switch (msg) {
				case ModelB.MSG_PRICE:
					System.out.println("UiFoo收到：模型 ModelB 更新了 ::价格::"+m2.getPrice());
					break;
				case ModelB.MSG_TITLE:
					System.out.println("UiFoo收到：模型 ModelB 更新了 ::标题::"+m2.getTitle());
					break;
				}
			}
		}


}

3.主方法调用(main)

public class App {

	// 订阅/发布模式
	// 观察者模式	
	public static void main(String[] args) {
		
		// M-V-VM 框架：
		
		// Model 被观察者(主题/发布方)
		// View  观察者(主题的订阅者)
		// ViewModel 将 model 和 view 解耦
		
		
		// 被观察者（例如：公众号） 
		// 创建两个被观察者 
		Model m = new Model();
		ModelB m2 = new ModelB();
		
		// View 是数据(Model)的 观察者
		// 创建两个观察者
		UiFoo foo = new UiFoo();
		UiBar bar = new UiBar();
		
		// 关注公众号 m, 放入 m 的 观察者列表 中
		m.addObserver(foo);
		m.addObserver(bar);
		// 关注公众号 m2, 放入 m2 的 观察者列表 中		
		m2.addObserver(foo);
		m2.addObserver(bar);
		
		// 数据改变，状态改变时，视图会自动更新
		m.setN(9);
		
		m2.setPrice(9.9);
		m2.setTitle("观察者模式");
		
		System.out.println("****************");
		
		// 删除观察者，即取消关注公众号
		// 从 m 的 观察者列表 中移除
		m.deleteObserver(foo);
		
		m.setN(333);
		
		
		
	}
}

查看控制台输出