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 this使用方法图解

    JavaScript this使用方法图解

    这篇文章主要介绍了JavaScript this使用方法图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • javaScript合并对象的多种方式及知识扩展

    javaScript合并对象的多种方式及知识扩展

    众所周知JavaScript中有多种方法可以合并对象,下面这篇文章主要给大家介绍了关于javaScript合并对象的多种方式及知识扩展,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 前端大屏适配的三种解决方案总结

    前端大屏适配的三种解决方案总结

    在日常前端开发中,大屏项目是每个前端开发者必备技能,但是目前设备尺寸大小和分辨率都不相同,所以大屏适配成了一个头疼的问题,所以下面这篇文章主要给大家介绍了关于前端大屏适配的三种解决方案,需要的朋友可以参考下
    2024-03-03
  • javascript中一些util方法汇总

    javascript中一些util方法汇总

    Util.js文件包含了一些工具函数,来帮助人们使用JavaScript数据(例如从服务器返回的数据)来更新Web页面。有需要的小伙伴可以参考下
    2015-06-06
  • JavaScript 字符串连接性能优化

    JavaScript 字符串连接性能优化

    从多次测试结果看来,使用StringBuffer 可以节省50%以上的时间
    2008-12-12
  • 如何使用浏览器扩展篡改网页中的JS 文件

    如何使用浏览器扩展篡改网页中的JS 文件

    这篇文章主要为大家介绍了如何使用浏览器扩展篡改网页中的JS文件实现解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 简单了解Ajax表单序列化的实现方法

    简单了解Ajax表单序列化的实现方法

    这篇文章主要介绍了简单了解Ajax表单序列化的实现方法,随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化,需要的朋友可以参考下
    2019-06-06
  • JSCode all of Brower 全局屏蔽网页右键功能 具体实现

    JSCode all of Brower 全局屏蔽网页右键功能 具体实现

    JSCode all of Brower 全局屏蔽网页右键功能 具体实现,需要的朋友可以参考一下
    2013-06-06
  • javascript利用canvas实现鼠标拖拽功能

    javascript利用canvas实现鼠标拖拽功能

    这篇文章主要为大家详细介绍了javascript利用canvas实现鼠标拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JS数组返回去重后数据的方法解析

    JS数组返回去重后数据的方法解析

    本文主要分享了Js数组返回去重后的数据的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论