从js的事件模型到观察者模式到mvc

在开发中有时候需要实现一个对象A的变化然后更新另外一个对象B

这个实现的最简单的方式时在目标对象A的方法中添加B更新的逻辑代码

但是我们希望能够用一种比较优雅的方式实现，比如当需求变化时不需要改A的代码，并且可以随时添加或者删除处理函数。

在大多数gui编程中，都会提供这个事件机制。

在网页的页面交互中，我们可以注册自己的方法到输入框的clikc或者change事件中，

document.getElementByTag("input").addEventListener("click",fn);

document.getElementByTag("input").removeEventListener("click",fn);

//IE中方法使用attachEvent

这样就能把fn处理方法绑定或者解绑到input的click事件中

不过，通过这种方式绑定的事件event只能是对象自带的

比如，只能注册 “click”,"focus","blur","change","load","mouseout"等一些对象元素自带的事件

如果我们想给input添加一个自定义事件或者给自定义的panel添加事件处理程序的话，只能通过自己实现了。

下面来个实现

            //输入框变化，改变其他对象
            //事件插件，其他对象可扩展此对象进行事件监控
            var Events = (function () {
                var events = {};
                return {
                    addListeners: function (fn, callback) {
                        events[fn] = events[fn] || [];
                        events[fn].push(callback);
                    },
                    removeListeners: function (fn, callback) {
                        events[fn] = events[fn].filter(item => {
                            return item != callback;
                        })
                    },
                    fireEvent: function (fn, param) {
                        var args = Array.prototype.slice.call(arguments, 0),
                            me = this;
                        if (events[fn]) {
                            events[fn].forEach(item => {
                                item.call(this, param);
                            })
                        }
                    }
                }
            })();

            //输入组件，和他的两个实例方法
            function Input() { }
            Input.prototype.userInput = function (param) {
                this.fireEvent("change", param);
            }
            Input.prototype.userLeave = function (param) {
                this.fireEvent("keyup", param);
            }

            //监控输入组件，根据输入框变化更新此面板
            function Panel() { }
            Panel.prototype.showClick = function (param) {
                console.log("Panel show");
            }
            Panel.prototype.hideClick = function (param) {
                console.log("Panel hide");
            }
        
        //实例化input对象，并继承Events的属性和方法
            var input = new Input();
            Object.assign(input, Events);

            var panel = new Panel();

        //注册处理程序到change和keyup事件
            input.addListeners("change", panel.showClick);
            input.addListeners("keyup", panel.hideClick);

            //通过实例方法触发change和keyup事件
            input.userInput();  //输出结果：--Panel show
            input.userLeave();  //输出结果：--Panel hide

上面Events对象 是个简易的事件绑定方法，所有其他的对象都可以扩展此方法来实现事件的绑定。

C#用委托来实现事件绑定

using System;

namespace ConsoleApp2
{

    public class Program
    {
        static void Main(string[] args)
        {
            var subject = new Subject();
            var observer = new Observer(subject);
            subject.update();
            Console.ReadLine();

        }
    }

    public delegate void ChangeHandler();

    public class Subject
    {

        public ChangeHandler changeHandler;
        public void update()
        {
            //if (changeHandler != null)
            //{
            //    changeHandler();
            //}
            changeHandler?.Invoke();

        }
    }

    public class Observer
    {
        public Observer(Subject subject)
        {
            subject.changeHandler += new ChangeHandler(change);
        }
        public void change()
        {
            Console.WriteLine("subject had updated");
        }
    }
}

通过一个对象改变从而引起其他对象变化的情况，在gof书籍中称为观察者模式，或者叫发布-订阅模式  ,属于对象行为型模式

意图

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

适用性

适用于以下的任一种情况

• 当一个抽象模型有两个方面，其中一个方面依赖于另一个方面。将这二者封装在独立的对象中以使它们可以各自独立的改变和复用
• 当对一个对象的改变需要同时改变其他对象，而不知道具体有多少对象有待改变
• 当一个对象必须通知其他对象，而他又不能假定其他对象是谁。换言之，你不希望这些对象是紧密耦合的。

下面来实现这个模型

我们把这个状态变化的对象成为目标对象（Subject）,根据目标对象变化而变化的对象成为观察者（Observers）

目标对象

//目标对象基类    
public abstract class BasSubject
    {
        //观察者对象
        public List<BasObserver> observerList = new List<BasObserver>();
        //状态
        public string State
        {
            get; set;
        }
        /// <summary>
        /// 附加观察者
        /// </summary>
        /// <param name="observer"></param>
        public void attachObserver(BasObserver observer)
        {
            observerList.Add(observer);
        }
        /// <summary>
        /// 移除观察者 
        /// </summary>
        /// <param name="observer"></param>
        public void detachObserver(BasObserver observer)
        {
            observerList.Remove(observer);
        }
        /// <summary>
        /// 状态变更
        /// </summary>
        public virtual  void onChangeState()
        {
            observerList.ForEach(async item =>
            {
                await item.update();
            });

        }

    }
// 子类
   public class Subject:BasSubject
    {
        public void onChangeState(string state)
        {
            State = state;
            base.onChangeState();
        }
    }

观察者对象 

//观察者抽象类或者接口
  public abstract class BasObserver
    {
        public BasSubject subject;
        public BasObserver() {

        }
        public BasObserver(BasSubject subject) {
            this.subject = subject;
            this.subject.attachObserver(this);
        }
        public virtual async Task update() {
        }
    }
//对象A
    public class ObserverA : BasObserver
    {
        BasSubject subject;
        public ObserverA()
        {

        }
        public ObserverA(BasSubject subject) : base(subject)
        {
            this.subject = subject;
        }
        public override async Task update()
        {
            if (this.subject.State == "interest")
            {
                await Task.Run(() =>
                {
                    Thread.Sleep(1000);
                });
                Console.WriteLine("interest change---from{0}", this.GetType());
            }

        }
    }
//对象B
    public class ObserverA : BasObserver
    {
        BasSubject subject;
        public ObserverA()
        {

        }
        public ObserverA(BasSubject subject) : base(subject)
        {
            this.subject = subject;
        }
        public override async Task update()
        {
            if (this.subject.State == "interest")
            {
                await Task.Run(() =>
                {
                    Thread.Sleep(1000);
                });
                Console.WriteLine("interest change---from{0}", this.GetType());
            }

        }
    }

执行

    class Program
    {
        static void Main(string[] args)
        {
            Subject subject = new Subject();
            ObserverA observerA1 = new ObserverA(subject);
            ObserverA observerA2 = new ObserverA();
            ObserverB observerB = new ObserverB(subject);

            subject.onChangeState("interest");
            Console.WriteLine();
            subject.onChangeState("un interest");
            Console.ReadLine();
        }
    }

结果

该模式可实现独立的添加观察者，而无需修改目标对象和其他观察者对象。目标和观察者之间是通过抽象耦合的，观察者只需要实现指定的接口，便可得到目标对象的更新。

可改进的说明

1. 目标发送通知时，并不知道有多少个对象需要更新，也不知道每个观察者的更新的具体实现，所以有些接口会耗时很长或者出现异常情况，这就需要我们在代码中实现异步和异常捕获操作。
2. 目标发送通知时，可以通过把发生改变的详细信息通过参数方式传递给观察者，这称为推模型，但是不一定所有的观察者都需要这些的信息 。另外一种是目标对象仅发送最小信息发出，再由观察者去请求需要的信息，这叫拉模型。
3. 观察多个对象跟观察感兴趣的改变，需要我们更改update接口接受目标实例和目标状态，用来判断是哪个目标发来的更新，和判断是不是感兴趣的更新。

应用场景

观察者模式最早应用于malltalk的mvc架构中。

其中model为目标对象，view为观察者，一个model可能会绑定到多个视图中，当model变化时需要同时改变各个view。

在项目开发中，我们提倡职责分离，所以我们可以添加一个controller层来处理响应用户输入，更新模型等功能

针对上面的例子加入控制器的代码如下

    class Program
    {
        static void Main(string[] args)
        {
            var observer = new Observer();
            observer.submit();
            Console.ReadLine();
        }
    }

    public class Controller {
        Subject subject;
        Observer observer;
        /// <summary>
        /// 注册观察者到目标
        /// </summary>
        /// <param name="observer"></param>
        public Controller(Observer observer) {
            this.observer = observer;
            this.subject = new Subject();
            subject.attachObserver(observer); 
        }
        /// <summary>
        /// 处理请求 
        /// </summary>
        public void doSomeThing () {
            subject.State = "interest";
            subject.onChangeState();
        }

    }
    public class Subject {
        List<Observer> list;
        public Subject() {
            list = new List<Observer>();
        }
        public string State { get; set; }
        public void attachObserver(Observer v)
        {
            list.Add(v);
        }
        public void onChangeState() {
            list.ForEach(item =>
            {
                item.update(this.State);
            });
        }
    }
    public class Observer {
        Controller c;
        public Observer() {
            c = new Controller(this);
        }
        /// <summary>
        /// 用户操作
        /// </summary>
        public void submit() {
            c.doSomeThing();
        }
        /// <summary>
        /// 刷新
        /// </summary>
        /// <param name="label"></param>
        public void update(string label) {
            Console.WriteLine(label);
        }     

    }

在控制器中实现目标对象到观察者之间的映射。控制器收到视图发来的请求，去更新模型。模型变化会自动更新视图层