实现简单发布订阅模式

最新推荐文章于 2023-05-26 14:37:19 发布
最新推荐文章于 2023-05-26 14:37:19 发布
阅读量354 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26144233/article/details/114538340
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
       <div>22</div> 
        {{message}}
    </div>
    <script>
        class Vue {
            constructor(options) {
                // 1.保存数据
                this.options = options;
                this.$el = options.el;
                this.$data = options.data;
                // 2.将data保存到响应式系统中
                new Obsrever(this.$data);
                // 3.代理this.$data的数据
                Object.keys(this.$data).forEach(key => {
                    this._proxy(key)
                })
                // 4.处理$el
                new Compiler(this.$el, this);
            }
            _proxy(key) {
                Object.defineProperty(this, key, {
                    get() { //代理
                        return this.$data[key];
                    },
                    set(newValue) {
                        this.$data[key] = newValue;
                    }
                })
            }
        }
        // 观察者
        class Obsrever {
            constructor(data) {
                this.data = data;
                Object.keys(data).forEach(key => {
                    // 一个属性key对应一个发布者Dep
                    this.defineReactive(this.data, key, this.data[key]);
                })
            }
            defineReactive(data, key, value) {
                const dep = new Dep();
                // may have problems 
                Object.defineProperty(data, key, {
                    // 订阅谁在界面使用了那些属性
                    get() {
                        if (Dep.target) {
                            dep.addSub(Dep.target);
                        }
                        return value;
                        // return data[key];  //这里代码会不断递归报错
                    },
                    set(newValue) {
                        if (value === newValue) return false;
                        data[key] = newValue;
                        // 通知notify所有订阅者更新自己的视图
                        dep.notify();
                    }
                })
            }
        }
        // 发布者
        class Dep {
            constructor() {
                this.subs = [];
            }
            addSub(watcher) {
                this.subs.push(watcher);
            }
            notify() {
                this.subs.forEach(item => {
                    item.update();
                })
            }
        }
        // 订阅者
        class Watcher {
            constructor(node, key, vm) {
                this.node = node;
                this.name = key;
                this.vm = vm;
                Dep.target = this;
                this.update();
                Dep.target = null;
            }
            update() {
                this.node.nodeValue = this.vm[this.name];
            }
        }

        let regExp = /\{\{(.+?)\}\}/g;
        class Compiler {
            // 这里的vm是Vue实例对象，不是虚拟DOM
            constructor(el, vm) {
                this.el = document.querySelector(el);
                this.vm = vm;
                this.frag = this._createFragment();
                this.el.appendChild(this.frag);
            }
            _createFragment() {
                const frag = document.createDocumentFragment();
                var child;
                while (child = this.el.firstChild) {
                    this._compile(child);
                    frag.appendChild(child);
                }
                return frag;
            }
            _compile(node) {
                if (node.nodeType == 3) {  //文本节点
                    if (regExp.test(node.nodeValue)) {
                        const name = RegExp.$1.trim();
                        new Watcher(node, name, this.vm);
                    } 
                }else if(node.nodeType==1) {  //元素节点
                    
                }
            }
        }


        var app = new Vue({
            el: '#root',
            data: {
                message: 'msg'
            }
        })
    </script>
</body>

</html>

响应式

<script>
        var obj = {
            message: 'msg'
        }

        Object.keys(obj).forEach(key => {
            var value = obj[key];  //原来的值
            Object.defineProperty(obj, key, {
                set(newValue) {  //新值
                    console.log('setter value:' + value)
                    value = newValue;
                    console.log('setter value:' + value)
                }
                , get() {
                    console.log('getter value:' + value)
                    return value;
                }
            })
        })

        // 发布者
        class Dep {
            constructor() {
                this.subs = [];
            }
            addSub(watcher) {
                this.subs.push(watcher);
            }
            notify() {
                this.subs.forEach(item => {
                    item.update();
                })
            }
        }
        // 订阅者
        class watcher {
            constructor(name) {
                this.name = name;
            }
            update() {
                console.log(this.name + 'is update')
            }
        }
        var dep = new Dep();
        const w1 = new watcher('comp1');
        const w2 = new watcher('comp2');
        const w3 = new watcher('comp3');
        dep.subs.push(w1, w2, w3);
        dep.notify();
    </script>
qq_26144233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
发布订阅设计模式，前端小程序开发
2401_84097820的博客
04-05 608
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载华为、OPPO等大厂，18年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
实现发布订阅的三种方式
钟离默的个人博客
04-02 1900
一、Redis Redis 发布订阅 (pub/sub) 是一种消息通信模式：发送者 (pub) 发送消息，订阅者 (sub) 接收消息。 Redis 客户端可以订阅任意数量的频道。 redis 127.0.0.1:6379> SUBSCRIBE runoobChat Reading messages... (press Ctrl-C to quit) 1) "subscribe" #...
JS 设计模式 - 发布订阅模式
楠姐的博客
05-26 1621
发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在JavaScript开发中，一般用事件模型来替代传统的发布—订阅模式。
发布订阅模式简单实现
tuohaohu的博客
09-02 476
发布订阅模式简单实现
发布—订阅模式
TKOP_的博客
06-20 1425
为更好地理解 vue 的双向数据绑定原理，大致了解了一下发布订阅模式的实现。
发布订阅模式与观察者模式
hfhan的博客
03-29 4万+
背景 设计模式并非是软件开发的专业术语，实际上，“模式”最早诞生于建筑学。 设计模式的定义是：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说，设计模式是在某种场合下对某个问题的一种解决方案。如果再通俗一点说，设计模式就是给面向对象软件开发中的一些好的设计取个名字。 这些“好的设计”并不是谁发明的，而是早已存在于软件开发中。一个稍有经验的程序员也许在不知不觉中数次使用过这些设...
js实现的订阅发布者模式简单示例
10-15
主要介绍了js实现的订阅发布者模式,结合完整示例形式分析了js订阅发布者模式相关实现与使用方法,需要的朋友可以参考下
JavaScript中发布/订阅模式的简单实例
10-25
主要介绍了JavaScript中发布/订阅模式的简单实例,本文给出了一个简单易懂的实现代码,比较容易理解,需要的朋友可以参考下
JS模式之简单的订阅者和发布者模式完整实例
10-24
主要介绍了JS模式之简单的订阅者和发布者模式,以一个完整实例形式详细分析了JS订阅者和发布者模式基本实现技巧,需要的朋友可以参考下
JavaScript事件发布/订阅模式原理与用法分析
10-18
主要介绍了JavaScript事件发布/订阅模式,结合实例形式简单分析了javascript发布/订阅模式的概念、原理及简单使用方法,需要的朋友可以参考下
java发布订阅模型demo
06-05
java语言，使用设计模式的框架简单模型。万能扩展各类品种
基于Http协议订阅发布系统设计
weixin_30872789的博客
07-05 693
基于Http协议订阅发布系统设计 --物联网系统架构设计 1,订阅发布(subscriber-publisher) 订阅发布模式最典型的应用场景就是消息系统的设计。在消息系统的架构中，消息的发送者称作(publisher)，消息的接收者称作(subscriber)，参见wikipedia: Publish–subscribe pattern。整个消息系统的架构可以用如下...
如何实现一个简单的发布订阅模式
聚享小站
02-28 659
背景 在业务开发中，经常会遇到要处理跨页面通信的问题，比如说用户打开了一个网站，网站的某些页面需要根据用户的登录的状态不同，显示不同的数据。显然这需要我们在登录成功的那一刻， 去通知到那些需要改变的页面。为了解决类似这样的问题，发布订阅模式诞生了。 思路 一个简单的发布订阅模式需要事件的绑定和触发是互相隔离的，同时支持动态的添加和删除事件。基于此就有了一个思路： 定义一个变量存储这些事件 定义一个监听方法，用于把事件添加到事件变量中 定义一个删除方法，用于把是事件从变量中移除 定义一个触发方法，用于调用变
js class 实现发布订阅者模式。
qq_54753561的博客
01-12 1814
js class 实现发布订阅者模式。订阅发布模式由三部分构成 1：订阅者 2：事件中心 3：发布者 具体实现流程 发布者发布消息给事件中心 事件中心通知所有的订阅者 demo： 小明天天看手机但是有一天突发奇想，想买个报纸看看，于是小明坐上火箭就飞到福利社了，但是到了福利社老板说今天的报纸卖完了，如果想看就订购明天的报纸吧，小明心有不甘但还是订购了明天的报纸，订购完了，就等福利社老板通知我了（传参数），到了明天老板说报纸有了小明欢快的拿到了报纸（收参数）。
使用js实现一个简单的发布订阅模式
听雨少年的博客
08-10 883
发布订阅模式 订阅： 由多个对象（用户）发起 发布： 在js中，可以这样做： 有一个对象，使用使用数组，把所有的对应函数，都先装起来 当需要的时候，把所有的函数都调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
JS简单实现发布订阅模式
弟弟的博客
01-30 5251
发布订阅模式 在发布订阅模式里，发布者，并不会直接通知订阅者，换句话说，发布者和订阅者，彼此互不相识。 那他们之间如何交流？ 由一个调度中心来做中间人，发布者更新(publish)主题，由主题(调度中心)来进行通知(noticy)订阅者更新(update)。 简单的代码实现 参考网上class面向对象实现，相较于很多js event的实现便于理解 // 主题 class Dep { constructor(callback) { this.subs = []; // 主题的订阅者 t.
实现一个发布-订阅模式
weixin_43276913的博客
09-14 537
订阅/发布者模式 订阅发布模式：一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象，中间通过一个调度中心来发布通知 function Dep(){ this.subs = []; } Dep.prototype.addSub = function(sub){ this.subs.push(sub); } Dep.prototype.notify = function(){ this.subs.forEach(sub =>
Kafka下的生产消费者模式与订阅发布模式
热门推荐
茅庐
01-21 6万+
生产消费者模式与订阅发布模式是使用消息中间件时常用的两种模式，用于功能解耦和分布式系统间的消息通信。本文在总结了Kafka基本概念的基础上，以“数据接入”和“事件分发”这两个场景为例，来探讨Kafka作为消息系统的应用方法（High Level）。
观察者模式（发布订阅模式）的简单实现，以及实际应用举例
weixin_34309435的博客
05-19 910
观察者模式实现 鉴于最近在归纳总结一些常用的设计模式，刚好最近小程序项目中跨组件的异步通信中仿造vue总线机制实现了一个用于订阅和发布消息的对象。所以将js中观察者模式实现总结如下。 简介 目的：实现发布订阅的功能，取消订阅功能的observer对象 是一种解决封装良好的组件之间异步通信的一种方式 典型应用是vue中的总线机制 主要包含的内容 发布函数，发布的时候可能会携带参数 订阅函数，收...
ipc实现发布订阅模式 C
最新发布
11-17
以下是使用IPC实现发布订阅模式的C语言代码示例： 1. 发布者代码： ```c #include #include #include #include #include ...#define MQ_NAME "mq_magic_test" ...这样就实现了一个简单的发布订阅模式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值