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

相关文章

  • 详谈js中标准for循环与foreach(for in)的区别

    详谈js中标准for循环与foreach(for in)的区别

    下面小编就为大家带来一篇详谈js中标准for循环与foreach(for in)的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript中好用的数组对象排序方法分享

    JavaScript中好用的数组对象排序方法分享

    在日常工作中,我们经常需要对数组对象进行排序,尤其是在处理数据可视化需求中。本文将介绍一些简单而又实用的方法,帮助你实现对数组对象的某几个 key 进行排序
    2023-05-05
  • 微信小程序自定义toast组件的方法详解【含动画】

    微信小程序自定义toast组件的方法详解【含动画】

    这篇文章主要介绍了微信小程序自定义toast组件的方法,结合实例形式详细分析了微信小程序自定义toast组件的步骤、实现方法及相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 浅谈typescript中keyof与typeof操作符用法

    浅谈typescript中keyof与typeof操作符用法

    本文主要介绍了typescript中keyof与typeof操作符用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Javascript 鼠标移动上去小三角形滑块缓慢跟随效果

    Javascript 鼠标移动上去小三角形滑块缓慢跟随效果

    一个tab选项卡,当鼠标移动上去时红色滑块跟随,在布局过程中经常会使用到,本文提供了详细的实现代码,感兴趣的朋友可以参考下
    2013-04-04
  • JavaScript实现获取设备网络连接信息

    JavaScript实现获取设备网络连接信息

    作为前端开发,做好用户体验是很重要的,日常开发中我们经常可以遇到用户网速慢导致静态资源加载慢,从而给影响用户体验,所以本文来和大家分享一个有趣的API,可以实现获取网络信息
    2023-05-05
  • JAVASCRIPT下判断IE与FF的比较简单的方式

    JAVASCRIPT下判断IE与FF的比较简单的方式

    在JAVASCRIPT当中可以通过取当前浏览器返回值来判断当前使用什么浏览器。
    2008-10-10
  • 最佳的JavaScript错误处理实践

    最佳的JavaScript错误处理实践

    在JavaScript中遇到处理错误很让人头疼,这篇文章整理了JavaScript错误处理实践,有需要的小伙伴们可以参考。
    2016-07-07
  • 浅谈webpack 自动刷新与解析

    浅谈webpack 自动刷新与解析

    这篇文章主要介绍了浅谈webpack 自动刷新与解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Javascript动画效果(1)

    Javascript动画效果(1)

    这篇文章主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论