<!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. url请求返回结果测试工具（CURL）

    官网:http://curl.haxx.se/download.html 具体用法用时百度 或  到时再补充

  2. iOS最为简单时间轴（GZTimeLine）

    概述 迄今为止最为简单的时间轴 :可以自定义(类似于美团的送餐信息) 详细 代码下载:http://www.demodashi.com/demo/10797.html 迄今为止 最为简单的时间轴 :可 ...

  3. 【laravel5.4】PHP5.6+ 调用命名空间下类方法、属性和对象

    1.调用命名空间的类方法,对象.属性 类对象:\App\User(); 类方法:\App\User::find($this->user_id) //查询构造器方法,将$this->user ...

  4. 关于多线程中使用ArrayList的问题

    多线程全局变量:1.定义只读的全局变量时,必须加final修饰,即使是private的,防止被反射修改.2.对于需要多次读写的全局变量,一定要用ThreadLocal封装,避免多线程并发时变量被多次赋 ...

  5. kubernetes中使用NFS创建pv_pvc

    Persistent Volume(持久化卷)简称PV, 是一个K8S资源对象,我们可以单独创建一个PV, 它不和Pod直接发生关系, 而是通过 Persistent Volume Claim, 简称 ...

  6. SVN访问版本库精细的权限控制

    SVN精细权限控制本章将详细介绍前一章所涉及的两个配置文件, svnserve.conf 和 authz.conf,通过对配置逐行的描述,来阐明其中的一些细节含义.除此之外的其他配置.安装等内容,不是 ...

  7. iOS 直播推流 - 搭建基于RTMP的本地Nginx服务器

    前端时间,公司要调研直播相关的内容,特地花时间进行了一番调研. 本篇将记录其中的推流篇-本地推理播放测试. 关于Nginx: 配置Nginx以支持HLS.RTMP的推流与拉流,iOS系统使用LFLiv ...

  8. web服务器一些概念

    一.Web服务器 Web服务基于HTTP协议,HTTP协议基于TCP/IP协议. HTTP请求底层必然是套接字,也就是TCP协议,HTTP服务器就是监听端口的一个守护进程. 它负责HTTP连接的建立. ...

  9. CocoaPods的ruby问题 Error fetching http://ruby.taobao.org/:

    今天安装了一个CocoaPods,在安装淘宝ruby是遇到了问题 bogon:~ zhch$ gem sources -a http://ruby.taobao.org/ Error fetching ...

  10. iPhone手机屏幕的尺寸180330更新

    以下是 iPhone的型号和对应的屏幕宽高 英寸  宽 高  厚度 3.5   320 480 4s      ipad   系列   4   320 568 5   5s   4.7  375 66 ...