观察者模式

最新推荐文章于 2024-03-27 10:22:08 发布

江呱呱

最新推荐文章于 2024-03-27 10:22:08 发布

阅读量100

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108759460

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

观察者模式

1 观察者模式.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 400px;
            margin: 0 auto;
            border: 2px solid #ccc;
        }
        
        h1 {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
        }
        
        ul {
            height: 320px;
        }
        
        ul li {
            list-style: none;
            height: 20px;
            font-size: 16px;
            line-height: 20px;
            display: flex;
        }
        
        ul li span {
            flex: 9;
        }
        
        ul li i {
            flex: 1;
            text-align: center;
        }
        
        .box .operate {
            height: 50px;
            display: flex;
        }
        
        .box .operate textarea {
            flex: 4;
        }
        
        .box .operate button {
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="box" class="box">
        <h1>XXX的留言板消息数量:(<span id="num">0</span>)</h1>
        <ul id="list">
            <!-- <li><span>人生得意须尽欢</span><i>&times;</i></li> -->
        </ul>
        <div class="operate">
            <textarea id="message"></textarea>
            <button id='btn'>留言</button>
        </div>
    </div>
    <script>
        // 观察者模式： 又叫做消息管道模式、发布-订阅模式、自定义事件等
        // 主要功能就是 "解除耦合"

        // 耦合：指的是功能与功能之间重合的部分   
        // 耦合度如果高 那么说明程序可复用性低
    </script>
    <script src="js/Observer.js"></script>
    <script src="js/one.js"></script>
    <script src="js/two.js"></script>
    <script src="js/three.js"></script>


</body>

</html>

2.Observer.js

var Observer = (function() {
    var _O = {}
    return {
        on: function(name, fn) {
            _O[name] = fn;
        },
        trigger: function(name, ...args) {
            // 截取剩余参数
            // var args = [].slice.call(arguments, 1);
            // _O[name].apply("", args);
            // 以上是ES6之前的写法
            _O[name](...args);
        }
    }
})();

3.one.js
one.js用于操作头部标题的信息

  // 第一个人的代码
  ;
  (function() {
      // 获取元素
      var num = document.getElementById("num");
      // 使用观察者模式 向消息管道中注册事件
      Observer.on("msg", function() {
          num.innerHTML++;
      });

      Observer.on('remove', function() {
          num.innerHTML--;
      });
  })();

4.two.js
two.js用于处理中间部分也就是信息显示部分的代码

// 第二个人的代码
;
(function() {
    // 获取元素
    var list = document.getElementById("list");
    // 第二个人发现 代码不是立刻执行的 所以提前封装好业务逻辑 放入一个函数  等用户点的时候 调用这个函数就好了  第三个人也只需要给这个函数传递参数即可
    Observer.on("publish", function(msg) {
        list.innerHTML += `<li><span>${msg}</span><i>&times;</i></li>`;
    });

    // 委托模式添加点击事件
    list.onclick = function(e) {
        if (e.target.tagName.toLowerCase() === "i") {
            e.target.parentNode.remove();
            Observer.trigger("remove");
        }
    }
})();

5.three.js
three.js用于处理按钮点击事件也就是发布新闻的事件

 // 第三个人的代码
 ;
 (function() {
     // 获取元素
     var message = document.getElementById("message");
     var btn = document.getElementById("btn");
     // 添加事件
     btn.onclick = function() {
         // 获取数据
         var value = message.value;
         // 调用其他人提供的函数 并传递参数
         // Observer.trigger('msg');
         Observer.trigger("publish", value)
     }
 })();

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
观察者模式

观察者模式1 观察者模式.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫

专栏目录