抽丝剥茧——观察者模式

2021-01-05 22:42:39 浏览数 (1)

观察者模式

这个模式和我们的生活比较接近,我们往往需要对一件事情进行「针对性的及时处理」。 比如我们在操作一些智能设备,例如手机,我们「点击屏幕以后,屏幕会对我们的点击触发一个响应」。 这个就是一个观察者模式的实现,手机操作系统在监听屏幕的点击事件,「当点击事件触发以后,找到对应的事件处理器,进行处理。」

我们可以解读以下上面的手机事件触发的场景,可以发现观察者模式的实现需要三个组件的配合

  • 事件源(手机屏幕)
  • 事件(点击事件)
  • 事件监听(操作系统)

是不是感觉观察者模式瞬间变的很简单了,接下来我们要做的事情是:从代码中验证我们刚刚所说的观察者模式的三个组件

我们先来看最熟悉的Java的可视化桌面框架swing,没有学过这个远古的玩意的,不要担心,我们主要做的是验证观察者模式的思想。

「场景」:我们创建一个窗体,添加一个按钮,给这个按钮添加一个点击事件,然后通过我们的代码处理这个事件。

「代码:」

代码语言:javascript复制
JButton button = new JButton();
button.addActionListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent e) {
                
    }
});

上面的代码中

  • JButton代表的就是事件源;
  • ActionEvent代表的是事件对象;
  • ActionListener代表的就是事件监听

我们再来看一个前端JS的机制

代码语言:javascript复制
<button onClick="jsclick()">按钮一</button>
function jsClick(event){
 alert(event);
}
  • button就是事件源对象
  • event就是事件对象
  • onClick就是事件监听,监听按钮的点击行为,触发jsClick函数

接下来我们来自己实现一个观察者模式

先给一个场景:「自己实现一个按钮操作,通过观察者模式」

  • 事件监听机制
代码语言:javascript复制
//事件监听机制
interface ActionListener{

    public void actionPerformed(ButtonEvent e) ;

}
  • 事件对象
代码语言:javascript复制
//事件对象
interface Event<T>{
    T getSource();
}
//针对按钮的事件
class ButtonEvent implements Event<Button>{
    private Button button ;

    public ButtonEvent(Button button){
        this.button = button ;
    }

    @Override
    public Button getSource() {
        return button;
    }
}
  • 事件源对象
代码语言:javascript复制
class Button{
    private List<ActionListener> list = new ArrayList<>();

    public void addListener(ActionListener actionListener){
        list.add(actionListener);
    }

    public void pressButton(){
        ButtonEvent buttonEvent = new ButtonEvent(this);
        for (ActionListener actionListener : list) {
            actionListener.actionPerformed(buttonEvent);
        }
    }

}
  • 自己操作。模拟按钮点击操作
代码语言:javascript复制
public class ObserverDesgin {
    public static void main(String[] args) {
        Button button = new Button();
        button.addListener(e -> System.out.println("Button press"));
        button.addListener(e-> System.out.println("Button press 02"));
        button.pressButton();
    }
}

「画个图感受一下:」

最后总结一下:观察者模式三个内容,「事件,事件处理机制,事件源」,事件源触发事件,出现事件处理机制(全部执行,此时类似于一个责任链模式。

0 人点赞