什么是观察者模式,怎么实现

模式(套路)就是处理一类的问题的套路,而观察者模式是23种模式之一,而且是最常见的设计模式,它定义了一种一对多的依赖关系的函数,多个观察者检测某个目标,当这个目标发生变化时,通知所有观察者及时作出改变,多个观察者执行事件。

例如,vue中,某一个数据对象发生变化,视图中多处dom结构也跟着更新(自动更新)

它有俩个技能点:

1。多个函数(观察者)如何依次执行

// 多个函数(观察者)如何依次执行
        function fn1() {
            console.log(fn1);
        }
        function fn2() {
            console.log(fn2);
        }
        function fn3() {
            console.log(fn3);
        }
        // 执行方案:把这些观察者函数放到一个数组里面,
        // 通过数组遍历的方法,来按索引依次调用
        var arr=[fn1,fn2,fn3]
        arr.push(function() {
            console.log(fn4);
        })
        // 观察者与事件(动作)之间的关系 
        // 添加观察者 来添加要执行的事件
        // 发布事件 来让相应观察者执行事件
        arr.forEach(fn=>{
            // console.log(fn);
            fn()
        })

 引入观察者目的:当数据变化时,自动更新视图

引入观察者步骤:1.引入观察者函数(构造函数)

2.实例化一个观察者

3.模板编译时,添加观察者,这里可以拿到数据变化的值,用新的值显示到dom元素中

经验分享 程序员 微信小程序 职场和发展