Javascript 模式实例 中介者模式

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

问题:

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

解决方法:

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

 

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

 这个方法也就是我们平常说的中介者模式,如果想了解更多的可以去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>

演示代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • JavaScript字符串处理常见操作方法小结

    JavaScript字符串处理常见操作方法小结

    这篇文章主要介绍了JavaScript字符串处理常见操作方法,结合实例形式分析了JavaScript字符串操作常见的转换、截取、分割、获取等相关实现技巧,需要的朋友可以参考下
    2019-11-11
  • JS 无法通过W3C验证的处理方法

    JS 无法通过W3C验证的处理方法

    今天在页面上使用JS时发现无法通过W3C验证,检查了一会发现此方法可以屏蔽大多数JS无法通过验证的问题,简单实用
    2010-03-03
  • 新手快速上手webpack4打包工具的使用详解

    新手快速上手webpack4打包工具的使用详解

    这篇文章主要介绍了新手快速上手webpack4打包工具的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • JavaScript实现的日期控件具体代码

    JavaScript实现的日期控件具体代码

    JavaScript实现的日期控件,它还会读取当前的时间,有需要的朋友可以参考一下
    2013-11-11
  • JavaScript模拟实现自由落体效果

    JavaScript模拟实现自由落体效果

    这篇文章主要为大家详细介绍了JavaScript模拟实现自由落体效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 利用Three.js制作一个新闻联播开头动画

    利用Three.js制作一个新闻联播开头动画

    这篇文章主要为大家介绍了如何利用Three.js制作一个新闻联播开头动画,文中的实现步骤讲解详细,对我们学习有一定帮助,需要的可以参考一下
    2022-05-05
  • Map与WeakMap类型在JavaScript中的使用详解

    Map与WeakMap类型在JavaScript中的使用详解

    这篇文章主要介绍了Map与WeakMap类型在JavaScript中的使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • IE6 hack for js 集锦

    IE6 hack for js 集锦

    本文主要讲诉了使用js实现网站功能兼容IE6,非常的实用的小技巧,有需要的朋友可以参考下
    2014-09-09
  • js delete 用法(删除对象属性及变量)

    js delete 用法(删除对象属性及变量)

    js delete可以删除对象属性及变量,下面是一些示例,感兴趣的朋友可以看看
    2014-08-08
  • javascript中mouseenter与mouseover的异同

    javascript中mouseenter与mouseover的异同

    javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover:鼠标移入监听对象中,或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter:鼠标移入监听对象时触发,在监听对象内移动不会触发。
    2017-06-06

最新评论