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

2023年4月11日 516次阅读 来源: 设计模式

概念

观察者模式是一个一对多的关系，让多个观察者同时监听一个对象，当这个对象发生了变化时，它会广播给监听它的观察者。使他们自动更新。

作用

1.支持简单的广播通信，自动通知所有的监听者。
2.当页面载入后，被观察对象很容易与观察者有一种动态关联的关系，来增加灵活性。
3.被观察对象，与观察者之间的抽象耦合关系能够单独的扩展和重用。

注意

要先监听，然后在发布通知。

栗子

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            ~(function() {
                var o = $({});
                $.jianting = function() {
                    o.on.apply(o, arguments);
                }
                $.tongzhi = function() {
                    o.trigger.apply(o, arguments);
                }

                $.shanchu = function() {
                    o.off.apply(o, arguments);
                }

            })()

            $.jianting("频道", function(e, a, b) {
                alert(a + b)
            })
            $.jianting("频道", function(e, a, b) {
                alert(a - b)
            })
            setTimeout(function() {
                $.tongzhi("频道", [1, 2]);
            }, 1000)
        </script>
    </body>

</html>
    原文作者：设计模式
    原文地址: https://segmentfault.com/a/1190000007950323
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞