master

分支 (1)

管理

管理

master

meiriyiti
/
20-观察者设计模式.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>
</head>

<body>
    <div id="box"></div>
    <script src='js/jquery-3.2.1.min.js'></script>
    <script>
        // 观察者设计模式   基于发布订阅
        //   观察者      Foreign
        //   被观察者    RMB    需要保存观察者
        // 人民币类
        function RMB() {
            // 创建人民币输入框的dom
            this.$dom = $("<div><span>人民币：</span><input type='text'/></div>");
            // 追加节点
            $("#box").append(this.$dom)
            // 保存了观察者（订阅者）
            // 在被观察者中保存了所有观察者
            this.subscribes = [];
            // 初始化监听
            this.bindEvent();
        }
        RMB.prototype.subscribe = function (obj) {
            this.subscribes.push(obj)
        }
        RMB.prototype.bindEvent = function () {
            let that = this;
            this.$dom.find("input").bind("input", function () {
                // 通知所有的观察者重新计算
                for (let i = 0; i < that.subscribes.length; i++) {
                    that.subscribes[i].update($(this).val());
                }
            })
        }
        var rmb = new RMB()

        // 外币类
        function Foreign(title, rate) {
            this.title = title;
            this.rate = rate;
            // 外币的dom
            this.$dom = $("<div><span>" + this.title +
                "：</span><input disabled type='text'/></div>");
            $("#box").append(this.$dom);

            rmb.subscribe(this)
        }
        Foreign.prototype.update = function (val) {
            let res = val / this.rate;
            this.$dom.find("input").val(res)
        }
        new Foreign("美元", '6.5');
        new Foreign("英镑", '8.7');
        new Foreign("日元", '0.063');
        new Foreign("韩元", '0.0058');
    </script>
</body>

</html>