js 面向对象编程设计模式---中间者模式

最新推荐文章于 2021-04-25 14:17:51 发布

weixin_42975115

最新推荐文章于 2021-04-25 14:17:51 发布

阅读量127

点赞数

分类专栏： js 面向对象设计模式

本文链接：https://blog.csdn.net/weixin_42975115/article/details/90762381

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

面向对象

24 篇文章 0 订阅

订阅专栏

设计模式

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mediator</title>
</head>
<body>
<div id="one">
    <b >hello world</b>
    <b >hello world</b>
</div>
是否隐藏<input id="onehide" type="checkbox">
<input type="text" id="binputvalue">
<script>
    //中间模式
    let Mediator =function () {
        //创建一个消息队列
        let message ={};
       return{
           //消息订阅方法
           register:function (type,fn) {

               //该信息存在
               if(message[type])
                   //在消息空间添加对应的方法
                   message[type].push(fn);
               else{
                   message[type] = [];
                   message[type].push(fn);
               }
           },
           send:function (type) {
               //如果该消息空间已经存在
               if(message[type])
                   for (let i=0;i<message[type].length;i++){
                     //执行回调函数
                       message[type][i]&&message[type][i]();
                   }
               else {
                   console.log("消息空间不存在");
               }
           }
       }
    }();
    //
/**
 * 显示导航栏组件
 * 参数 dom   模块
 * 参数 tag   处理的的标签
 * 参数 showorHide 显示还是隐藏
 **/
let showHideNav = function (dom,tag,showOrhide) {
    //获取模块
    var dom = document.getElementById(dom),
        //获取模块下的其他标签类型
        tag = document.getElementsByTagName(tag),
        showOrhide =(!showOrhide||showOrhide=="hide")?'hidden':'visible';
    for (let i=0;i<tag.length;i++){
        tag[i].style.visibility = showOrhide;
    }
    // console.log(showOrhide);
    // console.log(tag[0]);

}
//用户信息模块
    Mediator.register('oneshow',function () {
        showHideNav('one',"b",false);
    });
    Mediator.register('onehide',function () {
        showHideNav('one',"b",true);
    });


//发布消息
    (function () {
        //消息提醒框
          let onehide = document.getElementById('onehide');
          let binputvalue =document.getElementById('binputvalue');
          let oneb =document.getElementById('one').children[0];
          onehide.onchange = function () {
              //如果勾选
              if(onehide.checked)
                  Mediator.send('oneshow');
              else
                  Mediator.send('onehide');
          }
          binputvalue.oninput = function () {
              console.log(oneb);
              oneb.innerHTML = this.value;
          }

    })();
</script>
</body>
</html>

weixin_42975115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 面向对象编程设计模式---中间者模式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Mediator</title></head><body><div id="one"> <b >hello w...
复制链接

扫一扫