Javascript 中介者模式实例

 更新时间:2009年12月16日 22:24:13   作者:  
在页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?

问题:

  在页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?在展示的过程中我们还要考虑当页面功能不断的增加与修改,结果展示也不断的增多,我们要用一个应对这些变化最好的方法解决问题。

解决方法:

  在网盘开发中就遇到了这样的一个问题,经过几番的思考,决定了用如下的方式去解决这个问题,先看图:

 

 从图中我们可以知道,会使用到一个中介专门去接收使用者的信息,再发送到相应的展示主题,这样我们就可以解决了展示方式不段改变的问题,如何去展示就是展示主题代码问题了。

 这个方法也就是我们平常说的中介者模式,如果想了解更多的可以去google或baidu一下中介者模式。

代码:

  好了,现在我符上一些代码,如果大家更好的解决方案也可以给我个评论。

复制代码 代码如下:

/*
* 中介
**/
var Mediator = function(){
var self = this;
var _messageObj = {};
this.Register = function(key,obj){
//注册中介
_messageObj[key] = obj;
},
this.Send = function(key,message){
//根据客户Key发送信息给客户
if(_messageObj[key]){
_messageObj[key].Receive(message);
}
}
}

/*
* 客户父类
**/
var MessageBase = function(key,mediator){
mediator.Register(key,this); //注册中介
}

/*
* 自由主题1
**/
var MessageObj1 = function(key,mediator){
MessageBase.call(this,key,mediator); //继承父类
this.Receive = function(message){
//接收中介消息
alert("Object1 " + message);
}
}

/*
* 自由主题2
**/
var MessageObj2 = function(key,mediator){
MessageBase.call(this,key,mediator); //继承父类
this.Receive = function(message){
//接收中介消息
alert("Object2 " + message);
}
}

var med; //中介者
var init = function(){
//客户代码
med = new Mediator();
new MessageObj1("m1",med);
new MessageObj2("m2",med);
};

window.onload = function(){
init();
}

使用方法:
复制代码 代码如下:

<a href="javascript://" onclick="med.Send('m1','Good');">test1</a>
<a href="javascript://" onclick="med.Send('m2','GoodBoy');">test2</a>

下载:http://xiazai.jb51.net/200912/yuanma/js_zhongjie.rar

相关文章

  • 谈谈JavaScript中super(props)的重要性

    谈谈JavaScript中super(props)的重要性

    今天小编就为大家分享一篇关于谈谈JavaScript中super(props)的重要性,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 详解JavaScript中Generator函数的使用

    详解JavaScript中Generator函数的使用

    Generator 是 ES6 新增的一种函数类型,这篇文章主要来和大家详细聊聊Generator函数的具体用法,文中的示例代码讲解详细,感兴趣的可以了解一下
    2023-06-06
  • 关于ExtJS4.1:快捷键支持的问题

    关于ExtJS4.1:快捷键支持的问题

    本篇文章小编为大家介绍,关于ExtJS4.1 快捷键支持的问题。需要的朋友参考下
    2013-04-04
  • Javascript封装DOMContentLoaded事件实例

    Javascript封装DOMContentLoaded事件实例

    这篇文章主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下
    2014-06-06
  • 利用momentJs做一个倒计时组件(实例代码)

    利用momentJs做一个倒计时组件(实例代码)

    这篇文章主要介绍了利用momentJs做一个倒计时组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • 鼠标移动到图片名上,显示图片的简单实例

    鼠标移动到图片名上,显示图片的简单实例

    鼠标移动到名(wait.gif)上,显示图片,鼠标移开则不显示图片
    2013-07-07
  • JS实现省市县三级下拉联动

    JS实现省市县三级下拉联动

    这篇文章主要为大家详细介绍了JS实现省市县三级下拉联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • 关于动态执行代码(js的Eval)实例详解

    关于动态执行代码(js的Eval)实例详解

    下面小编就为大家带来一篇关于动态执行代码(js的Eval)实例详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js实现DIV的一些简单控制

    js实现DIV的一些简单控制

    js实现DIV的一些简单控制...
    2007-06-06
  • JavaScript ES6解构运算符的理解和运用

    JavaScript ES6解构运算符的理解和运用

    在ES6属性中新增了两个属性,分别是解构和…运算符,下面这篇文章主要给大家介绍了关于JavaScript ES6解构运算符的理解和运用,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-10-10

最新评论