首页 > 技术文章 > javascript 中mediator pattern(中介者模式)一个实例demo

wylking2000 2013-08-06 11:10 原文

<!doctype html>
<html lang="en">
<head>
    <title>JavaScript Patterns</title>
    <meta charset="utf-8">
</head>
<body>
<div id="results"></div>
    <script>
        function Player(name) {
            this.points = 0;
            this.name = name;
        }
        Player.prototype.play = function () {
            this.points += 1;
            mediator.played();
        };
        var scoreboard = {

            // 显示内容的容器
            element: document.getElementById('results'),

            // 更新分数显示
            update: function (score) {
                var i, msg = '';
                for (i in score) {
                    if (score.hasOwnProperty(i)) {
                        msg += '<p><strong>' + i + '<\/strong>: ';
                        msg += score[i];
                        msg += '<\/p>';
                    }
                }
                this.element.innerHTML = msg;
            }
        };

        var mediator = {

            // 所有的player
            players: {},

            // 初始化
            setup: function () {
                var players = this.players;
                players.home = new Player('Home');
                players.guest = new Player('Guest');
            },

            // play以后,更新分数
            played: function () {
                var players = this.players,
                    score = {
                        Home: players.home.points,
                        Guest: players.guest.points
                    };

                scoreboard.update(score);
            },

            // 处理用户按键交互
            keypress: function (e) {
                e = e || window.event; // IE
                if (e.which === 49) { // 数字键 "1"
                    mediator.players.home.play();
                    return;
                }
                if (e.which === 48) { // 数字键 "0"
                    mediator.players.guest.play();
                    return;
                }
            }
        };

        // go!
        mediator.setup();
        //window.onkeypress = mediator.keypress;//只兼容标准浏览器
        document.onkeypress = mediator.keypress;//兼容所有浏览器,包括IE
// 30秒以后结束 setTimeout(function () { window.onkeypress = null; console.log('Game over!'); }, 30000); </script> </body> </html>

  参考引用地址:http://www.cnblogs.com/TomXu/archive/2012/03/13/2374789.html

推荐阅读