【设计模式】观察者模式

最新推荐文章于 2025-09-12 14:39:04 发布

weixin_34253539

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

文章标签：设计模式 javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/tinaluo/p/9263830.html

本文介绍了一个基于观察者模式的消息通知系统实现案例。该系统通过注册和触发事件来更新UI元素，如留言数量和内容。文章提供了完整的HTML和JavaScript代码示例。

注：这篇文是根据书中的一些片段组合而成的。

观察者模式很久以前有点了解，但是用的地方很少，以至于没有去认真研究。最近在看vue框架，涉及很多观察者模式的应用，趁这个机缘研究一下。这是第一版，随着时间时时更新。

————————————————————————————

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div>
        <span style="background:red">ID:xx</span>
        <span>消息:</span>
        <span id="msg_num">0</span>
    </div>
    <div>
        <h3>留言显示:</h3>
        <ul id="msg">
        </ul>
    </div>
    <div>
        <textarea rows="5" id="user_input">
        </textarea>
        <br />
        <button id="user_submit">发布留言</button>
    </div>
    <script>
        var Observer = (function () {
            var _message = {};
            return {
                regist: function (type, fn) {
                    if (typeof _message[type] === 'undefined') {
                        _message[type] = [fn];
                    } else {
                        _message[type].push(fn);
                    }
                },
                fire: function (type, args) {
                    if (!_message[type]) {
                        return;
                    }
                    var events = {
                        type: type,
                        args: args || {}
                    },
                    len = _message[type].length;
                    for (var i = 0; i < len; i++) {
                        _message[type][i].call(this, events);
                    }
                },
                remove: function (type, fn) {
                    if (_message[type] instanceof Array) {
                        var i = _message[type].length - 1;
                        for (; i >= 0; i--) {
                            _message[type][i] === fn && _message[type].splice(i, 1);
                        }
                    }
                },
                getMessage: function () {
                    return _message;
                }
            }
        })();
        //$
        function $(id) {
            return document.getElementById(id);
        }
        //工程师A
        (function () {
            function addMsgItem(e) {
                var text = e.args.text;
                ul = $('msg'),
                var li = document.createElement("li");
                span = document.createElement("span");
                li.innerHTML = text;
                span.innerHTML = "删除";
                span.onclick = function () {
                    ul.removeChild(li);
                    Observer.fire('removeCommentMessage', {
                        num: -1
                    })
                }
                li.appendChild(span);
                ul.appendChild(li);
            }
            Observer.regist("addCommentMessage", addMsgItem);
        })();

        //工程师B
        (function () {
            function changeMsgNum(e) {
                var num = e.args.num;
                $('msg_num').innerHTML = parseInt($('msg_num').innerHTML) + num;
            }
            Observer.regist('addCommentMessage', changeMsgNum);
            Observer.regist("removeCommentMessage", changeMsgNum);
        })();

        //工程师C
        (function () {
            $("user_submit").onclick = function () {
                var text = $('user_input');
                if (text.value === '') {
                    return;
                }
                Observer.fire('addCommentMessage', {
                    text: text.value,
                    num: 1
                });
                text.value = '';
            }
        })();
    </script>
</body>
</html>