<!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. xml DTD中的ELEMENT和ATTLIST

    是W3C的一个文档类型定义规则文件,是用来让浏览器根据你定义的DTD(文档类型定义)来解释页面代码的. doctype声明指出阅读程序应该用什么规则集来解释文档中的标记.在Web文档的情况下,“阅读程 ...

  2. IP欺骗：要虚拟很多IP的情况：在一台机上虚拟的IP跨网段的处理,可通过在服务器端添加路由来实现

    要虚拟很多IP的情况:在一台机上虚拟的IP跨网段的处理,可通过在服务器端添加路由来实现. 例: [服务器] IP:192.168.0.1 [测试机] IP:192.168.0.2 测试机上添加的虚拟 ...

  3. rarlinux基于linux-x64

    winrar在Win都吃香,在也linux也凄惨...  风萧萧兮易水寒,壮士一去兮不复还! 00.下载rarlinux wget http://www.rarlab.com/rar/rarlinux ...

  4. Android API之android.provider.ContactsContract.Contacts

    android.provider.ContactsContract.Contacts 对应contacts数据表.RawContacts的一个聚合(aggregate)代表同一个人.每个人在数据表co ...

  5. 概率校准Probability Calibration

    在分类问题中,我们有时不仅仅需要给测试样本打上类别标签,也需要给出一个"置信度"来表示该样本属于此类别的可能性. 然而,有的分类器只能直接打上类别标签没法给出置信度.概率校准就是用 ...

  6. InteliJ Idea通过maven创建webapp

    facet是IDE给工程添加的属性,在使用maven时一定不能使用facet 一.创建maven项目,选定webapp作为archtype,这样就会自动生成webapp目录 如果没有给maven设置代 ...

  7. Sublime Text 2搭建Go开发环境（Windows）

    转自:http://blog.csdn.net/love_se/article/details/7754274 下载packcontrol包地址:http://www.imjeff.cn/blog/6 ...

  8. servlet与filter的url-pattern设置方式

    servlet与filter的url-pattern设置方式: 1.精确匹配: /directory/file1.jsp /directory/file2.jsp /directory/file3.j ...

  9. Hadoop: Setup Maven project for MapReduce in 5mn

    Hadoop: Setup Maven project for MapReduce in 5mn 25 MAY 2013 / ANTOINE AMEND I am sure I am not the ...

  10. linux权限详解

    一个用户.一个组 我们来看一看 Linux 权限和所有权模型.我们已经看到每个文件属于一个用户和一个组.这正是 Linux 中权限模型的核心.您可以在 ls -l 清单中查看用户和组: $ ls -l ...