v-model之到底属于观察者模式还是订阅者模式

最新推荐文章于 2022-03-23 22:28:14 发布

南玖i

最新推荐文章于 2022-03-23 22:28:14 发布

阅读量262

点赞数

分类专栏： js vue 文章标签：设计模式 vue

本文链接：https://blog.csdn.net/m0_49789433/article/details/118635002

版权

vue 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

说到双向数据绑定，就先用js来实现一个绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="myapp">
        <input v-model="message"/><br>
        <span v-bind="message"></span>
    </div>

    <!--JavaScript-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
    <script type="text/javascript">

        var model = {
          message : ""
        };

        var models = myapp.querySelectorAll("[v-model=message]");
        for (var i = 0; i < models.length; i++) {
            models[i].onkeyup = function () {	
                model[this.getAttribute("v-model")] = this.value;
            }
        }

        // 观察者模式 / 钩子函数
        // defineProperty 来定义一个对象的某个属性
        Object.defineProperty(model,"message",{
            set:function (newValue) {
                var binds = myapp.querySelectorAll("[v-bind=message]");
				binds[0].innerHTML = newValue;
                this.value = newValue;
            },
        })

    </script>
</body>
</html>

v-model原理简述

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。
其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。
简单点说就是，有监视器监控页面的变化，当发生变化之后，就会通知页面重新渲染，然后页面进行渲染完成

说完v-model原理，心里产生疑问，这个不是和观察者模式很像吗？就去问了度娘

然后我就碰巧看到了一个文章

接下来我们解析一下观察者模式和订阅者模式

观察者模式

比较概念的解释是，目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。

看图比较好理解

观察者模式介绍

观察者观察着被观察者只要被观察者数据发生变化，观察者就要做一些事情
举个生动的例子，学生就是被观察者，老师就是观察者，只要学生上课状态不好，老师就会请家长。

观察者模式介绍实现思想

学生刚开始需要一个认真学习的状态
当学生认真学习的状态改变，在上课吃辣条时
老师观察到这个变化，就会请家长
学生需要一个状态改变的方法，一个添加观察者老师的方法，还要有一个通知观察者自己状态改变的方法，并且再状态改变后立即让观察者老师叫家长。
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。

之前文章有js设计模式想看代码的可以去看一下，biubiu带你跳转页面

发布订阅模式

其实24种基本的设计模式中并没有发布订阅模式，他只是观察者模式的一个别称。
但是经过时间的沉淀，似乎他已经强大了起来，已经独立于观察者模式，成为另外一种不同的设计模式。

发布订阅者模式介绍实现思想

你在微博上关注了A，同时其他很多人也关注了A，那么当A发布动态的时候，微博就会为你们推送这条动态。A就是发布者，你是订阅者，微博就是调度中心，你和A是没有直接的消息往来的，全是通过微博来协调的（你的关注，A的发布动态）。

观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。

那么看完这些你觉得v-model是属于观察者还是发布订阅模式呢

我自己的理解的话观察者模式和v-model是最为接近的（个人理解，如果有其他想法可以评论一起讨论）

观察者模式是不是发布订阅模式

网上关于这个问题的回答，出现了两极分化，有认为发布订阅模式就是观察者模式的，也有认为观察者模式和发布订阅模式是真不一样的。
其实我不知道发布订阅模式是不是观察者模式，就像我不知道辨别模式的关键是设计意图还是设计结构（理念），虽然《JavaScript设计模式与开发实践》一书中说了分辨模式的关键是意图而不是结构。
如果以结构来分辨模式，发布订阅模式相比观察者模式多了一个中间件订阅器，所以发布订阅模式是不同于观察者模式的；如果以意图来分辨模式，他们都是实现了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新，那么他们就是同一种模式，发布订阅模式是在观察者模式的基础上做的优化升级。
不过，不管他们是不是同一个设计模式，他们的实现方式确实有差别，我们在使用的时候应该根据场景来判断选择哪个。

参考链接：https://www.cnblogs.com/lovesong/p/5272752.html

参考链接：https://blog.csdn.net/hf872914334/article/details/88899326

南玖i

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
v-model之到底属于观察者模式还是订阅者模式

说到双向数据绑定，就先用js来实现一个绑定<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body> <div id="myapp"> <input v-model="message"/><br> <span v-bind="message"></spa.
复制链接

扫一扫