js 面向对象设计模式

最新推荐文章于 2024-02-28 23:59:43 发布

weixin_42975115

最新推荐文章于 2024-02-28 23:59:43 发布

阅读量79

点赞数

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

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

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

面向对象

24 篇文章 0 订阅

订阅专栏

设计模式

23 篇文章 0 订阅

订阅专栏

观察者模式定义一种依赖关系，解决了主体对象与观察者之间功能的耦合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>观察者模式</title>

</head>
<body>
<div id="msg"></div>
<div id="msg_num"></div>
<textarea id="user_input"></textarea>
<button id="usr_submit">提交</button>
<script>
    //获取元素
    function getObj(id) {
        return document.getElementById(id);
    }
    let Observer = (function () {
        //防止消息队列被串改
        let _messages ={};
        console.log(_messages);
        return {
            //注册信息接口
            regist:function (type,fn) {
                //如果此消息不存在，在消息队列创建一个该消息类型
                if(typeof _messages[type]==="undefined")
                    _messages[type] = [fn];
                else
                    _messages[type].push(fn);

            },
            //发布信息接口
            fire:function (type,args) {
                //如果该消息没有被注册，则返回
                if(!_messages[type])
                    return;
                //定义消息
                let events ={
                    type:type,
                    args:args||{}
                }
                for (let i=0;i<_messages[type].length;i++){
                    //依次执行驻车的消息队列
                    _messages[type][i].call(this,events);
                }
            },
            remove:function (type,fn) {
                //移除信息接口
                if(_messages[type] instanceof Array){
                    for(let i=0;i<_messages[type].length-1;i++){
                        //如果存在该动作则在动作序列中移除动作
                        _messages[type][i]===fn && _messages[type].splice(i,1);
                    }
                }
            }
        }
    })();
    //A 工程师
    (function () {
        //追加一条信息
        function addMsgitem(e) {
            let text = e.args.text,
                ul = getObj('msg'),
                li = document.createElement('li'),
                span = document.createElement('span');
            span.innerHTML = " 关闭";
            console.log(e.args.text);
            li.innerHTML = text;
            //组件组合
            li.appendChild(span);
            //添加留言节点
            ul.appendChild(li);
            //关闭按钮
            span.onclick = function () {
                //移除消息模块
                ul.removeChild(li);
                //发布删除留言消息
                Observer.fire('removeMessage',{num:-1});
            }

        }
        //注册发布信息
        Observer.regist('addMessage',addMsgitem);
    })();
    //工程B
    (function () {
        //更改用户信息条
        function changeMessage(e) {
            let num = e.args.num;
            if(getObj('msg_num').innerHTML=="")
                getObj('msg_num').innerHTML =num;
            else
                getObj('msg_num').innerHTML = parseInt(getObj('msg_num').innerHTML)+num;
        }
        //注册添加评论
        Observer.regist('addMessage',changeMessage);
        Observer.regist('removeMessage',changeMessage);

    })();
    //工程⑩C
    (function () {
        //用户点击提交按钮
        getObj('usr_submit').onclick =function () {
            //获取用户输入框信息
            let text = getObj("user_input");
            //如果消息为空提交失败
            if (text.value===""){
                return;
            }
            Observer.fire('addMessage',{
                text:text.value,
                num:1
            });
            text.value = "";
        }
    })();
</script>
</body>
</html>

weixin_42975115

关注

0
点赞
踩
0

收藏

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

观察者模式定义一种依赖关系，解决了主体对象与观察者之间功能的耦合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>观察者模式</title></head><body><div i...
复制链接

扫一扫