<!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

javascript 中mediator pattern(中介者模式)一个实例demo的更多相关文章

  1. Mediator Pattern --中介者模式原理及实现（C++）

    主要参考<大话设计模式>和<设计模式:可复用面向对象软件的基础>两本书.本文介绍中介者模式的实现. 中介者模式:What it is:Define an object that ...

  2. 在WildFly中运行多个standalone模式的实例

      WildFly作为一款优秀的EJB容器,其前身为JBoss AS.JBoss作为一款开源的应用服务器,被广泛的应用在各种项目当中.假设我们现在有这样一个项目,他是以standalone的模式运行在 ...

  3. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  4. JavaScript中创建字典对象（dictionary）实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...

  5. JavaScript中创建对象的几种模式

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. JavaScript中面向对象的三大特性（一个菜鸟的不正经日常）

    经过几天的学习,把jQuery给啃会了,但是运用的还不算特别熟练,总感觉自己在JavaScript方面的基础十分欠缺,所以继续拾起JavaScript,开始更好的编程之旅~ 今天学的是JavaScri ...

  7. JavaScript中的execCommand()命令详解及实例展示

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...

  8. JavaScript中For循环以及For循环嵌套实例

    JavaScript中For循环实例 1.打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身. 例如:153是一个 ...

  9. [VC]在VC++中实现让程序只运行一个实例的方法且实现该实例

    方法一: 有时候在开发应用程序时,希望控制程序运行唯一的实例.例如,最常用的mp3播放软 件Winamp,由于它需要独占计算机中的音频设备,因此该程序只允许自身运行唯一的一个例程.在Visual C+ ...

随机推荐

  1. 6种.net分布式缓存解决方式

    6种.net分布式缓存解决方式 1.     使用内置ASP.NET Cache (System.Web.Caching) : https://msdn.microsoft.com/en-us/lib ...

  2. maven 亲测可用国内镜像 阿里云(20170123)

    来源于:http://www.jianshu.com/p/4d5bb95b56c5 http://blog.csdn.net/qq_27093465/article/details/52982484 ...

  3. PHP开发安全问题

    1.不相信表单 对于一般的Javascript前台验证,由于无法得知用户的行为,例如关闭了浏览器的javascript引擎,这样通过POST恶意数据到服务器.需要在服务器端进行验证,对每个php脚本验 ...

  4. ArchLinux安装 LXDE

    http://wiki.lxde.org/zh/index.php?title=ArchLinux&variant=zh-cn 透过 pacman 安装 LXDE 大多数的最新 LXDE 套件 ...

  5. HDUOJ---1996汉诺塔VI

    汉诺塔VI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  6. ADO,OLEDB,ODBC,DAO,RDO的区别说明

    http://www.jb51.net/article/31286.htm http://wenku.baidu.com/link?url=D7iis1tmkyXTCqjsezsvYtYHWG8jK- ...

  7. shell脚本条件判断

    http://blog.csdn.net/ws_zll/article/details/7515310

  8. Android干坏事——禁止设备休眠

    实现这一功能的方法有两种,一种是在Manifest.xml文件里面声明,一种是在代码里面修改LayoutParams的标志位.具体如下: 1.在Manifest.xml文件里面用user-permis ...

  9. 利用C#改写JAVA中的Base64.DecodeBase64以及Inflater解码

    最近正在进行项目服务的移植工作,即将JAVA服务的程序移植到DotNet平台中. 在JAVA程序中,有个HTTP请求数据头中,包含一个BASE64编码的字符串,例如: eJyVjMENgDAMA1fp ...

  10. mysql 必须掌握的工具pt-query-digest安装

    mysql 必须掌握的工具pt-query-digest 古人云:工欲善其事,必先利其器.作为一名优秀的mysql dba也需要有掌握几个好用的mysql管理工具,所以我也一直在整理和查找一些能够便于 ...