轻松掌握:JavaScript代理模式、中介者模式

时间:2022-09-04 09:36:52

代理模式、中介者模式

代理模式

在面向对象设计中,有一个单一职责原则,指就一个类(对象、函数)而言,应该仅有一个引起它变化的原因。如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就多,它把这些职责耦合到了一起,这种耦合会导致程序难于维护和重构。

这时候,我们可以把该对象(本体)的其中一部分职责分离出来给一些第三方对象去做,本体只管自己的一些核心职责,这些第三方对象就称作代理。代理对象可以作为对象(也叫“真正的主体”)的保护者,让真正的主体对象做尽量少的工作。在代理设计模式中,一个对象充当了另一个对象的接口的角色。

通常代理和本体的接口应该保持一致性,这样当不需要代理的时候,用户可直接访问本体。

当我们不方便直接访问一个对象时,就可以考虑给该对象招一个代理。

代理可用于:图片预加载、合并HTTP请求(代理收集一定时间内的所有HTTP请求,然后一次性发给服务器)、惰性加载(通过代理处理和收集一些基本操作,然后仅在真正需要本体的时候才加载本体)、缓存代理(缓存请求结果、计算结果)等

例子1:图片预加载

var myImage = (function(){
var imgNode = document.createElement('img');
document.body.appendChild(imgNode);
return {
setSrc:function(src){
imgNode.src = src;
}
}
})();
//代理函数
var proxyImage = (function(){
var img = new Image;
img.onload = function(){
myImage.setSrc(this.src);
}
return{
setSrc:function(src){
myImage.setSrc('loading.gif');
img.src = src;
}
}
})(); proxyImage.setSrc('show.jpg');

中介者模式

中介者模式的作用就是解除对象与对象之间的紧耦合关系,它也称‘调停者’。所有的对象都通过中介者对象来通信,而不是相互引用,所以当一个对象发生改变时,只需要通知中介者即可。

如:机场的指挥塔,每架飞机都只需要和指挥塔通信即可,指挥塔知道每架飞机的飞行状况,可以安排所有起降时间,调整航线等

中介者模式符合迪米特法则,即最少知识原则,指一个对象应该尽可能少地了解另外的对象。如果对象之间的耦合性太高,则改变一个对象,会牵动很多对象,难于维护。当对象耦合很紧时,要修改一个对象而不影响其它的对象是很困难的。

如果对象之间的复杂耦合确实导致调用和维护出现了困难,而且这些耦合度随项目的变化呈指数增长,那我们就可以考虑用中介者模式来重构代码!中介者通过解耦来提升代码的可维护性。

例子1:游戏

玩家对象是通过Player()构造函数来创建的,有自己的points和name属性。原型上的play()方法负责给自己加一分然后通知中介者:

function Player(name) {
this.points = 0;
this.name = name;
}
Player.prototype.play = function () {
this.points += 1;
mediator.played();
};

scoreboard对象(计分板)有一个update()方法,它会在每次玩家玩完后被中介者调用。计分析根本不知道玩家的任何信息,也不保存分数,它只负责显示中介者给过来的分数:

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;
}
};

现在我们来看一下mediator对象(中介者)。在游戏初始化的时候,在setup()方法中创建游戏者,然后放后players属性以便后续使用。played()方法会被游戏者在每轮玩完后调用,它更新score哈希然表然后将它传给scoreboard用于显示。最后一个方法是keypress(),负责处理键盘事件,决定是哪位玩家玩的,并且通知它:

var mediator = {
players: {},
setup: function () {
var players = this.players;
players.home = new Player('Home');
players.guest = new Player('Guest');
},
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) { // key "1"
mediator.players.home.play();
return;
}
if (e.which === 48) { // key "0"
mediator.players.guest.play();
return;
}
}
};

最后一件事是初始化和结束游戏:

// go!
mediator.setup();
window.onkeypress = mediator.keypress; // game over in 30 seconds
setTimeout(function () {
window.onkeypress = null;
alert('Game over!');
}, 30000);

例子2:卖手机

var goods = {   //库存
'red|32G':3,
'red|16G':5,
'blue|32G':3,
'blue|16G':6
}
//中介者
var mediator = (function(){
function id(id){
return document.getElementById(id);
}
var colorSelect = id('colorSelect'),
memorySelect = id('memorySelect'),
numberInput = id('numberInput'),
colorInfo = id('colorInfo'),
memoryInfo = id('memoryInfo'),
numberInfo = id('numberInfo'),
nextBtn = id('nextBtn');
return{
changed:function(obj){
var color = colorSelect.value,
memory = memorySelect.value,
number = numberInput.value,
stock = goods[color+'|'+memory];
if(obj === colorSelect){
colorInfo.innerHTML = color;
}else if(obj === memorySelect){
memoryInfo.innerHTML = memory;
}else if(obj === numberInput){
numberInfo.innerHTML = number;
}
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if(!memory){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择内存大小';
return;
}
if(Number.isInteger(number-0) && number > 0){
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
}
}
})();
//添加事件
colorSelect.onchange = function(){
mediator.changed(this);
}
memorySelect.onchange = function(){
mediator.changed(this);
}
numberInput.onchange = function(){
mediator.changed(this);
}

参考文献: 《JavaScript模式》 《JavaScript设计模式与开发实践》

轻松掌握:JavaScript代理模式、中介者模式的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式23&lpar;中介者模式&rpar;

    中介者模式 概念介绍 中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介 中介者模 ...

  2. 学习javascript设计模式之中介者模式

    1.中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象后,所有的相关对象都通过中介者来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介对象即可.中介者使各对象之间耦合 ...

  3. javascript设计模式之中介者模式

    /* * 小游戏演示中介者模式 * Home 按键 1 * Guest 按键 0 * 半分钟内看谁按下的次数多 * * 参与的对象: * 玩家 * 计分板 * 中介者 * * 中介者模式使对象之间松耦 ...

  4. javascript中的中介者模式——迪米特法则

    ”迪米特法则“——最少知识原则,不和陌生人说话,就是说,一个对象应当对其他对象有尽可能少的了解.talk only to your immediate friends.初衷是:降低对象之间的耦合度. ...

  5. 6&period;js模式-中介者模式

    1. 中介者模式 所有对象通过中介者进行通信 var playDirector = (function(){ var players = []; var options = {}; options.a ...

  6. java设计模式--行为型模式--中介者模式

    怎么理解中介者模式,我姑且用房产中介来理解吧.呵呵 中介者模式: 中介者模式 概述 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之 ...

  7. &lbrack;19&sol;04&sol;30-星期二&rsqb; GOF23&lowbar;行为型模式&lpar;中介者模式、命令模式、解释器模式、访问者模式&rpar;

    一.中介者模式(meditor) [中介] /*** * 抽象中介者接口和其具体实现类"经理"类 */ package cn.sxt.meditor; import java.ut ...

  8. javaScript 设计模式之中介者模式示例

    飞机把注册信息放到铁塔里,发送数据到铁塔,报告其它的飞机一些信息. var feiji = function( name ){ this.name = name; } feiji.prototype. ...

  9. javascript设计模式--中介者模式(Mediator)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. MySQL数据备份之mysqldump使用

    mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...

  2. C&num; 集合类 :(Array、 Arraylist、List、Hashtable、Dictionary、Stack、Queue)

    我们用的比较多的非泛型集合类主要有 ArrayList类 和 HashTable类.我们经常用HashTable 来存储将要写入到数据库或者返回的信息,在这之间要不断的进行类型的转化,增加了系统装箱和 ...

  3. Android 启动画面

    如果你的程序初始化时间过长,那么在初始化之前,程序会现实一个空白的activity页,十分难看. 添加一个启动画面的方法就是为响应的activity加入自定义的Theme,并在theme中设定 and ...

  4. JavaPersistenceWithHibernate第二版笔记Getting started with ORM-001用JPA和Hibernate实现HellowWorld&lpar;JTA、Bitronix&rpar;

    一.结构 二.model层 1. package org.jpwh.model.helloworld; import javax.persistence.Entity; import javax.pe ...

  5. 【转】 U3D DrawCall优化手记 - 夜阑卧听风吹雨

     原文  http://www.cnblogs.com/ybgame/p/3588795.html 在最近,使用U3D开发的游戏核心部分功能即将完成,中间由于各种历史原因,导致项目存在比较大的问题,这 ...

  6. Java中的enum

    package com.st.java; /** * ENUM枚举类型的使用 * @author Administrator * 2016年04月10日 */ public enum MoneyTyp ...

  7. Django Channels简明实践

    1.安装,如果你已经安装django1.9+,那就不要用官方文档的安装指令了,把-U去掉,直接用: sudo pip install channels 2.自定义的普通Channel的名称只能包含a- ...

  8. 8、路由 router

    路由:router 用户功能 /user ----> index.html /user/login ----> login.html /user/reg ----> reg.html ...

  9. 【BZOJ3456】城市规划(生成函数,多项式运算)

    [BZOJ3456]城市规划(生成函数,多项式运算) 题面 求\(n\)个点的无向连通图个数. \(n<=130000\) 题解 \(n\)个点的无向图的个数\(g(n)=2^{C_n^2}\) ...

  10. 科普Spark,Spark核心是什么,如何使用Spark(1)

    科普Spark,Spark是什么,如何使用Spark(1)转自:http://www.aboutyun.com/thread-6849-1-1.html 阅读本文章可以带着下面问题:1.Spark基于 ...