JS设计模式 --- 观察者模式

程序员文章站 2022-08-07 23:35:59

JS设计模式 — 观察者模式又来更新了，昨天学了白贺翔老师的观察者模式，分享一下，直接看代码！ Document</titl...</div> <div class="content"> <h2> <a id="JS____0" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>JS设计模式 — 观察者模式</h2> 又来更新了，昨天学了白贺翔老师的观察者模式，分享一下，直接看代码！ <pre><code class="prism language-csharp"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./CommonUtil.js"></script> </head> <body> <script charset="utf-8"> // JS观察者模式：对程序中的某一个对象进行实时观察，当该对象发生变化，进行通知 // 有两个重要的角色:观察者被观察者 // 经典案例:订报纸(报社(也叫发布者，被观察者)，订阅者(观察者)) // 发布者被观察者 var Publish=function(name){ this.name=name; this.subscribers=[];//接受所有的订阅者(每一个订阅者都是一个函数类型fn) }; // Publish类实例对象发布消息的方法 Publish.prototype.deliver=function(news){ var publish=this;//当前实例当前发布消息的报社 this.subscribers.forEach(function(fn){//把消息发布给这家报社的所有的订阅者 fn(news,publish); }); return this;//链式编程 }; // 因为所有的订阅者都是函数类型fn，所以直接在Function的原型上添加方法 // 订阅者观察者具体的一个订阅者去订阅报纸的方法 Function.prototype.subscriber=function(publish){ var sub=this;//取得当前订阅的报纸的这个人 // 先判断这家报社是否已经存在当前订阅者 // some方法：循环遍历数组的每一个元素，每一个元素读取执行一个函数，如果其中有一个返回true，那整体就返回true var alreadyExists= publish.subscribers.some(function(item){ return item === sub; }); if(!alreadyExists){ //如果不为真，表明该订阅者没有在这家报社订阅过 publish.subscribers.push(this); //就添加进去 } return this; }; // 订阅者观察者具体的一个订阅者去取消订阅报纸的方法 Function.prototype.unsubscriber=function(publish){ var sub=this;//取得当前取消订阅的报纸的这个人 // 先判断当前订阅者是否在这个报社里，如果在，就把他过滤掉 // filter过滤函数:循环遍历数组的每一个元素，每一个元素读取执行一个函数，如果不匹配就过滤(删除)该元素 publish.subscribers=publish.subscribers.filter(function(item){ return item !== sub;//满足的就返回，不满足的就过滤 }); return this;//链式编程 }; window.onload=function(){ // 实例化发布者对象(报社被观察者) var pub1=new Publish('第一家报社'); var pub2=new Publish('第二家报社'); var pub3=new Publish('第三家报社'); // 观察者订阅者接收消息 var sub1=function(news){ document.getElementById('sub1').innerHTML += arguments[1].name + ":" + news + "\n"; }; var sub2=function(news){ document.getElementById('sub2').innerHTML += arguments[1].name + ":" + news + "\n"; }; // 订阅者订阅报纸执行方法 sub1.subscriber(pub1).subscriber(pub2).subscriber(pub3); sub2.subscriber(pub1).subscriber(pub2); // 事件绑定 BH.EventUtil.addHandler(document.getElementById('pub1'),'click',function(){ pub1.deliver(document.getElementById('text1').value); }); BH.EventUtil.addHandler(document.getElementById('pub2'),'click',function(){ pub2.deliver(document.getElementById('text2').value); }); BH.EventUtil.addHandler(document.getElementById('pub3'),'click',function(){ pub3.deliver(document.getElementById('text3').value); }); // 取消订阅 sub2.unsubscriber(pub2); }; </script> <input type="button" id="pub1" value="第一家报社" /> <input type="text" id="text1" /><br/> <input type="button" id="pub2" value="第二家报社" /> <input type="text" id="text2" /><br/> <input type="button" id="pub3" value="第三家报社" /> <input type="text" id="text3" /><br/> <textarea id="sub1" cols="30" rows="5"></textarea> <textarea id="sub2" cols="30" rows="5"></textarea> </body> </html> </code></pre> 本文地址：https://blog.csdn.net/zz_xiaojun/article/details/109381320 </div> <div class="tags"> 相关标签： <a href="/t/JavaScript/" target="_blank"> JavaScript </a> </div> <div class="info-pre-next"> 上一篇： <a href="/article/1794961.html"> vue 公共列表选择组件,引用Vant-UI的样式方式 </a> 下一篇： <a href="/article/1794963.html"> 微信支付宝版电子营业执照是怎么回事?微信支付宝版电子营业执照怎么申请? </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2185899.html" target="_blank" title="JavaScript设计模式之命令模式实例分析"> <h2> JavaScript设计模式之命令模式实例分析 </h2> </a> </li> <li> <a href="/article/2185898.html" target="_blank" title="JavaScript设计模式之享元模式实例详解"> <h2> JavaScript设计模式之享元模式实例详解 </h2> </a> </li> <li> <a href="/article/2185801.html" target="_blank" title="JavaScript设计模式之装饰者模式实例详解"> <h2> JavaScript设计模式之装饰者模式实例详解 </h2> </a> </li> <li> <a href="/article/2184562.html" target="_blank" title="大话设计模式笔记（十六）の组合模式"> <h2> 大话设计模式笔记（十六）の组合模式 </h2> </a> </li> <li> <a href="/article/2184392.html" target="_blank" title="大话设计模式笔记（十五）の备忘录模式"> <h2> 大话设计模式笔记（十五）の备忘录模式 </h2> </a> </li> <li> <a href="/article/2184249.html" target="_blank" title="总结JavaScript设计模式编程中的享元模式使用"> <h2> 总结JavaScript设计模式编程中的享元模式使用 </h2> </a> </li> <li> <a href="/article/2184278.html" target="_blank" title="常用的javascript设计模式"> <h2> 常用的javascript设计模式 </h2> </a> </li> <li> <a href="/article/2183223.html" target="_blank" title="【朝花夕拾】设计模式之单例模式"> <h2> 【朝花夕拾】设计模式之单例模式 </h2> </a> </li> <li> <a href="/article/2183207.html" target="_blank" title="【朝花夕拾】设计模式之中介者模式"> <h2> 【朝花夕拾】设计模式之中介者模式 </h2> </a> </li> <li> <a href="/article/2183031.html" target="_blank" title="设计模式之装饰者模式"> <h2> 设计模式之装饰者模式 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about">关于网站<ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </div></div></div></footer> </body> </html>