1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>中介者模式</title>
6 </head>
7 <body>
8 <script>
9 function extend(subclass, superclass) {
10 var F = function () {
11 };
12 F.prototype = superclass.prototype;
13 subclass.prototype = new F();
14 subclass.prototype.constructor = subclass;
15 subclass.super = superclass.prototype;
16
17 if (superclass.prototype.constructor === Object.prototype.constructor) {
18 superclass.prototype.constructor = superclass;
19 }
20 }
21
22 function override(targetObj, obj, deep) {
23 if (Object.prototype.toString.call(obj) !== '[object Object]') {
24 return;
25 }
26 for (var i in obj) {
27 if (obj.hasOwnProperty(i)) {
28 if (deep === true) {
29 targetObj[i] = targetObj[i] || {};
30 rewrite(targetObj[i], obj[i], deep);
31 } else {
32 targetObj[i] = obj[i];
33 }
34 }
35 }
36 }
37 </script>
38 <script>
39 /**
40 * 中介者模式
41 *
42 * 定义：
43 * 用一个中介对象来封装一系列的对象交互。中介者使得各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。
44 *
45 * 本质：封装交互
46 *
47 * 中介者模式的解决私立很简单，它通过引入一个中介对象，让其他的对象都只和中介对象交互，而中介对象知道如何和其他所有的对象交互，这样对象之间的交互关系就没有了，从而实现了对象之间的解耦。
48 * 对于中介对象而言，所有的相互交互的对象，被视为同事类，中介者对象就是来维护各个同事之间的关系，而所有的同事类都只是和中介对象交互。
49 * 每个同事对象，当自己发生变化的时候，不需要知道这会引起其他对象有什么变化，它只需要通知中介者就可以了，然后由中介者去与其他对象交互。这样松散耦合带来的好处是，除了让同事对象之间相互没有关联外，还有利于功能的修改和扩展。
50 * 有了中介者之后，所有的交互都封装到中介者对象里面，各个对象就不再需要维护这些关系了。扩展关系的时候也只需要扩展或修改中介者对象就可以了。
51 *
52 *
53 * 同事关系
54 * 在标准的中介者模式中，将使用中介者对象来交互的那些对象称为同事类，在中介者模式中，要求这些类都要继承相同的类。也就是说，这些对象从某个角度讲是同一个类型，算是兄弟对象。
55 * 正是这些兄弟对象之间的交互关系很复杂，才产生了把这些交互关系分离出来，单独做成中介者对象。
56 *
57 * 同事和中介者的关系
58 * 在中介者模式中，当一个同事对象发生了改变，需要主动通知中介者，让中介者去处理与其他同事对象相关的交互。
59 * 这就导致了同事对象和中介者对象之间必须有关系，首先是同事对象需要知道中介者对象是谁；反过来，中介者对象也需要知道相关的同事对象，这样它才能与同事对象进行交互。也就是说中介者对象和同事对象之间是相互依赖的。
60 *
61 * 如何实现同事和中介者的通信
62 * 一个同事对象发生了改变，会通知中介者对象，中介者对象会处理与其他同事的交互，这就产生了同事对象和中介者对象的相互通信。
63 * 一个实现方式是在Mediator接口中定义一个特殊的通知接口，作为一个通用的方法，让各个同事类来调用这个方法，在中介者模式结构图里画的就是这种方式。例如定义了一个通用的changed方法，并且把同事对象当作参数传入，这样在中介者对象里面，就可以去获取这个同事对象的实例数据了。
64 * 另外一种实现方式是可以采用观察者模式，把Mediator实现成为观察者，而各个同事类实现成为Subject，这样同事类发生了改变，会通知Mediator。Mediator在接到通知以后，会于相应的同事对象进行交互。
65 *
66 */
67
68 // 示例代码
69
70 (function(){
71 function Colleague(mediator){
72 this.mediator = mediator;
73 }
74 Colleague.prototype = {
75 getMediator: function(){
76 return this.mediator;
77 }
78 };
79
80 // 同事类A
81 function ColleagueA(mediator){
82 ColleagueA.super.constructor.apply(this, arguments);
83 }
84 extend(ColleagueA, Colleague);
85 ColleagueA.prototype.someOperation= function(){
86 // some code..
87
88 // 在需要跟其他同事通信的时候，通知中介者对象
89 this.getMediator().changed(this);
90 }
91
92 function ColleagueB(mediator){
93 ColleagueB.super.constructor.call(this);
94 }
95 extend(ColleagueB, Colleague);
96 ColleagueB.prototype.someOperation= function(){
97 // some code..
98
99 // 在需要跟其他同事通信的时候，通知中介者对象
100 this.getMediator().changed(this);
101 };
102
103 // 中介者
104 function Mediator(){
105 var colleagueA, colleagueB;
106
107 // 设置中介者需要了解并维护的同事A对象
108 this.setColleagueA = function(colleague){
109 colleagueA = colleague;
110 };
111
112 // 设置中介者需要了解并维护的同事B对象
113 this.setColleagueB = function(colleague){
114 colleagueB = colleague;
115 };
116
117 this.changed = function(colleague){
118 // 某个同事类发生了变化，通常需要与其他同事交互
119 // 具体协调相应的同事对象来实现协作行为
120 };
121 }
122 }());
123
124 (function(){
125 // 抽象同事类
126 var Colleague = function(mediator){
127 this.mediator = mediator;
128 };
129 Colleague.prototype = {
130 getMediator: function(){
131 return this.mediator;
132 }
133 };
134
135 // 光驱类
136 var CDDriver = function(){
137 CDDriver.super.constructor.apply(this, arguments);
138
139 this.data = '';
140 };
141 extend(CDDriver, Colleague);
142 override(CDDriver.prototype, {
143 getData: function(){
144 return this.data;
145 },
146 readCD: function(){
147 this.data = 'CDDriver Data, SoundCard Data';
148 // 通知主板，自己的状态发生了变化
149 this.getMediator().changed(this);
150 }
151 });
152
153 // CPU类
154 var CPU = function(){
155 CPU.super.constructor.apply(this, arguments);
156
157 this.videoData = '';
158 this.soundData = '';
159 };
160 extend(CPU, Colleague);
161 override(CPU.prototype, {
162 // 获取分解出来的视频数据
163 getVideoData: function(){
164 return this.videoData;
165 },
166 // 获取分解出来的声音数据
167 getSoundData: function(){
168 return this.soundData;
169 },
170 executeData: function(data){
171 var ss = data.split(',');
172 this.videoData = ss[0];
173 this.soundData = ss[1];
174 // 通知主板，CPU的工作完成
175 this.getMediator().changed(this);
176 }
177 });
178
179 // 显卡类
180 var VideoCard = function(){
181 VideoCard.super.constructor.apply(this, arguments);
182 };
183 extend(VideoCard, Colleague);
184 override(VideoCard.prototype, {
185 showData: function(data){
186 console.log('您正在观看的是：' + data);
187 }
188 });
189
190 // 声卡类
191 var SoundCard = function(){
192 SoundCard.super.constructor.apply(this, arguments);
193 };
194 extend(SoundCard, Colleague);
195 override(SoundCard.prototype, {
196 soundData: function(data){
197 console.log('画外音：' + data);
198 }
199 });
200
201 // 中介对象接口
202 var Mediator = function(){};
203 Mediator.prototype = {
204 changed: function(colleague){}
205 };
206
207 var MotherBoard = function(){
208 };
209 extend(MotherBoard, Mediator);
210 override(MotherBoard.prototype, {
211 setCdDriver: function(cdDriver){
212 this.cdDriver = cdDriver;
213 },
214 setCpu: function(cpu){
215 this.cpu = cpu;
216 },
217 setVideoCard: function(videoCard){
218 this.videoCard = videoCard;
219 },
220 setSoundCard: function(soundCard){
221 this.soundCard = soundCard;
222 },
223
224 changed: function(colleague){
225 switch(colleague) {
226 case this.cdDriver:
227 this.opeCDDriverReadData(colleague);
228 break;
229 case this.cpu:
230 this.opeCPU(colleague);
231 break;
232 default:
233 break;
234 }
235 },
236
237 opeCDDriverReadData: function(cd){
238 this.cpu.executeData(cd.getData());
239 },
240 opeCPU: function(cpu){
241 this.videoCard.showData(cpu.getVideoData());
242 this.soundCard.soundData(cpu.getSoundData());
243 }
244 });
245
246 void function run(){
247 var mediator = new MotherBoard();
248 var cd = new CDDriver(mediator);
249 var cpu = new CPU(mediator);
250 var vc = new VideoCard(mediator);
251 var sc = new SoundCard(mediator);
252
253 mediator.setCdDriver(cd);
254 mediator.setCpu(cpu);
255 mediator.setVideoCard(vc);
256 mediator.setSoundCard(sc);
257
258 cd.readCD();
259 }();
260
261 }());
262
263 /**
264 * 广义中介者
265 *
266 * 在实际开发中，经常会简化中介者模式，比如有如下简化：
267 * 1.通常会去掉同事对象的父类，这样可以让人意的对象，只要需要相互交互，就可以成为同事。
268 * 2.通常不定义Mediator接口，把具体的中介者对象实现成为单例。
269 * 3.同事对象不再持有中介者，而是在需要的时候直接获取中介者对象并调用；中介者也不再持有同事对象，而是在具体处理方法里面去创建，或者获取，或者从参数传入需要的同事对象。
270 */
271
272 // 部门与人员的交互
273 (function(){
274 // 部门类
275 var Dep = function(){
276 // 描述部门编号
277 this.depId = '';
278 // 描述部门名称
279 this.depName = '';
280 };
281 Dep.prototype = {
282 getDepId: function(){
283 return this.depId;
284 },
285 setDepId: function(depId){
286 this.depId = depId;
287 },
288 getDepName: function(){
289 return this.depName;
290 },
291 setDepName: function(depName){
292 this.depName = depName;
293 },
294 // 撤销部门
295 deleteDep: function(){
296 // 要先通过中介者去除掉所有与这个部门相关的部门和人员的关系。
297 var mediator = DepUserMediatorImpl.getInstance();
298 mediator.deleteDep(this.depId);
299
300 // 然后才能真正地清除掉这个部门
301 // 在实际开发中，这些业务功能可能会做到业务层去
302 // 而且实际开发中对于已经使用的业务数据通常不会被删除
303 // 而是会被作为历史数据保留
304 return true;
305 }
306 };
307
308 // 人员类
309 var User = function(){
310 // 人员编号
311 this.userId = '';
312 // 人员名称
313 this.userName = '';
314 };
315 User.prototype = {
316 getUserId: function(){
317 return this.userId;
318 },
319 setUserId: function(userId){
320 this.userId = userId;
321 },
322 getUserName: function(){
323 return this.userName;
324 },
325 setUserName: function(userName){
326 this.userName = userName;
327 },
328 // 人员离职
329 dimission: function(){
330 var mediator = DepUserMediatorImpl.getInstance();
331 mediator.deleteUser(this.userId);
332
333 return true;
334 }
335 };
336
337 // 描述部门和人员关系的类
338 var DepUserModel = function(){
339 // 用于部门和人员关系的编号，用作主键
340 this.depUserId = '';
341 this.depId = '';
342 this.userId = '';
343 };
344 DepUserModel.prototype = {
345 setDepUserId: function(depUserId){
346 this.depUserId = depUserId;
347 },
348 getDepUserId: function(){
349 return this.depUserId;
350 },
351 setDepId: function(depId){
352 this.depId = depId;
353 },
354 getDepId: function(){
355 return this.depId;
356 },
357 setUserId: function(userId){
358 this.userId = userId;
359 },
360 getUserId: function(){
361 return this.userId;
362 }
363 };
364
365 // 中介者对象
366 var DepUserMediatorImpl = function(){
367 // 记录部门和人员的关系
368 this.depUserCol = [];
369 this.initTestData();
370 };
371 DepUserMediatorImpl.getInstance = function(){
372 if(!(DepUserMediatorImpl.instance instanceof DepUserMediatorImpl)) {
373 DepUserMediatorImpl.instance = new DepUserMediatorImpl();
374 }
375 return DepUserMediatorImpl.instance;
376 };
377 DepUserMediatorImpl.prototype = {
378 // 初始化测试数据
379 initTestData: function(){
380 var du1 = new DepUserModel();
381 du1.setDepUserId('du1');
382 du1.setDepId('d1');
383 du1.setUserId('u1');
384 this.depUserCol.push(du1);
385
386 var du2 = new DepUserModel();
387 du2.setDepUserId('du2');
388 du2.setDepId('d1');
389 du2.setUserId('u2');
390 this.depUserCol.push(du2);
391
392 var du3 = new DepUserModel();
393 du3.setDepUserId('du3');
394 du3.setDepId('d2');
395 du3.setUserId('u3');
396 this.depUserCol.push(du3);
397
398 var du4 = new DepUserModel();
399 du4.setDepUserId('du4');
400 du4.setDepId('d2');
401 du4.setUserId('u4');
402 this.depUserCol.push(du4);
403
404 var du5 = new DepUserModel();
405 du5.setDepUserId('du5');
406 du5.setDepId('d2');
407 du5.setUserId('u1');
408 this.depUserCol.push(du5);
409 },
410 // 完成因撤销部门的操作所引起的与人员的交互，需要去除相应的关系
411 deleteDep: function(depId){
412 for(var i = 0; i < this.depUserCol.length; i++){
413 if(this.depUserCol[i].depId === depId){
414 this.depUserCol.splice(i--, 1);
415 }
416 }
417
418 return true;
419 },
420 // 完成因人员离职引起的与部门的交互
421 deleteUser: function(userId){
422 for(var i = 0; i < this.depUserCol.length; i++){
423 if(this.depUserCol[i].userId === userId){
424 this.depUserCol.splice(i--, 1);
425 }
426 }
427
428 return true;
429 },
430 // 显示一个部门想啊的所有人员
431 showDepUsers: function(dep){
432 var du;
433 for(var i = 0, len = this.depUserCol.length; i < len; i++){
434 du = this.depUserCol[i];
435 if(du.depId === dep.depId) {
436 console.log('部门编号=' + dep.depId + '下面拥有的人员，其编号是：' + du.userId);
437 }
438 }
439 },
440 // 显示一个人员所属的部门
441 showUserDeps: function(user){
442 var du;
443 for(var i = 0, len = this.depUserCol.length; i < len; i++){
444 du = this.depUserCol[i];
445 if(du.userId === user.userId) {
446 console.log('人员编号=' + user.userId + '属于部门编号是' + du.depId);
447 }
448 }
449 },
450 cjageDep: function(){
451 // ..省略
452 return false;
453 },
454 joinDep: function(colDepIds, newDep){
455 // ...省略
456 return false;
457 }
458 };
459
460 var mediator = DepUserMediatorImpl.getInstance();
461 var dep = new Dep();
462 dep.setDepId('d1');
463 var dep2 = new Dep();
464 dep2.setDepId('d2');
465 var user = new User();
466 user.setUserId('u1');
467
468 console.log('撤销部门前---------------------');
469 mediator.showUserDeps(user);
470 dep.deleteDep();
471 console.log('撤销部门后---------------------');
472 mediator.showUserDeps(user);
473
474 console.log('-----------人员离职前-----------');
475 mediator.showDepUsers(dep2);
476 user.dimission();
477 console.log('----------人员离职后------------');
478 mediator.showDepUsers(dep2);
479
480 }());
481
482 /**
483 * 中介者模式的优点：
484 * 1.松散耦合
485 * 中介者模式用过把多个同事对象之间的交互封装到中介者对象里面，从而使得同事对象之间松散耦合，基本上可以做到互不依赖。这样一来，同事对象就可以独立变化和复用，从而不再像以前那样“牵一发而动全身”。
486 *
487 * 2.集中控制交互
488 * 多个同事对象的交互，被封装在中介者对象里面集中管理，使得这些交互行为发生变化的时候，只需要修改中介者对象就可以了，当然如果是已经做好的系统，那就扩展中介者对象，而各个同事类不需要做修改。
489 *
490 * 3.多对多变成一对多
491 * 没有使用中介者模式的时候，同事对象之间的关系通常是多对多的，引入中介者对象之后，中介者对象和同事对象的关系通常变成了双向的一对多，这会让对象的关系更让哦难以理解和实现。
492 *
493 *
494 * 中介者模式的缺点：
495 * 1.过度集中化
496 * 如果同事对象的交互非常多，而且比较复杂，当这些复杂性全部集中到中介者的时候，会导致中介者对象变得十分复杂，而且难于管理和维护。
497 *
498 * 何时选用中介者模式
499 *
500 * 1.如果一组对象之间的通信比较复杂，导致相互依赖，结构混乱，可以采用中介者模式，吧这些对象相互的交互管理起来，各个对象都只需要和中介者交互，从而使得各个对象松散耦合，结构也更清晰易懂。
501 *
502 * 2.如果一个对象引用很多对象，并直接跟这些对象交互，导致难以复用该对象，可以采用中介者模式，把这个对象跟其他对象的交互封装到中介者对象里面，这个对象只需要和中介者对象交互就可以了。
503 *
504 * 相关模式
505 *
506 * 中介者模式和外观模式
507 * 这两个模式有相似的地方，也存在很大的不同。
508 * 外观模式多用来封装一个子系统内部的多个模块，目的是想子系统外部提供简单易用的接口。也就是说外观模式封装的是子系统外部和子系统内部模块间的交互；而中介者模式是提供多个平等的同事对象之间交互关系的封装，一般是用在内部实现上。
509 * 另外，外观模式是实现单向的交互，是从子系统外部来调用子系统内部，不会反着来；而中介者模式实现的是内部多个模块间多向的交互。
510 *
511 * 中介者模式和观察者模式
512 * 这两个模式可以组合使用。
513 * 中介者模式可以组合使用观察者模式，来实现当同事对象发生改变的时候，通知中介者对象，让中介对象去进行与其他相关对象的交互。
514 */
515
516 // example
517 /* Title: Mediator
518 Description: allows loose coupling between classes by being the only class that has detailed knowledge of their methods
519 */
520
521 (function(){
522 function Player(name) {
523 this.points = 0;
524 this.name = name;
525 }
526 Player.prototype.play = function () {
527 this.points += 1;
528 mediator.played();
529 };
530 var scoreboard = {
531
532 // HTML element to be updated
533 element:document.getElementById('results'),
534
535 // update the score display
536 update:function (score) {
537 var i, msg = '';
538 for (i in score) {
539 if (score.hasOwnProperty(i)) {
540 msg += '<p><strong>' + i + '<\/strong>: ';
541 msg += score[i];
542 msg += '<\/p>';
543 }
544 }
545 this.element.innerHTML = msg;
546 }
547 };
548
549 var mediator = {
550
551 // all the player
552 players:{},
553
554 // initialization
555 setup:function () {
556 var players = this.players;
557 players.home = new Player('Home');
558 players.guest = new Player('Guest');
559 },
560
561 // someone plays, update the score
562 played:function () {
563 var players = this.players,
564 score = {
565 Home:players.home.points,
566 Guest:players.guest.points
567 };
568
569 scoreboard.update(score);
570 },
571
572 // handle user interactions
573 keypress:function (e) {
574 e = e || window.event; // IE
575 if (e.which === 49) { // key "1"
576 mediator.players.home.play();
577 return;
578 }
579 if (e.which === 48) { // key "0"
580 mediator.players.guest.play();
581 return;
582 }
583 }
584 };
585
586 // go!
587 mediator.setup();
588 window.onkeypress = mediator.keypress;
589
590 // game over in 30 seconds
591 setTimeout(function () {
592 window.onkeypress = null;
593 console.log('Game over!');
594 }, 30000);
595 }());
596
597
598
599 // http://www.dofactory.com/javascript-mediator-pattern.aspx
600
601 (function(){
602 var Participant = function(name) {
603 this.name = name;
604 this.chatroom = null;
605 };
606
607 Participant.prototype = {
608 send: function(message, to) {
609 this.chatroom.send(message, this, to);
610 },
611 receive: function(message, from) {
612 log.add(from.name + " to " + this.name + ": " + message);
613 }
614 };
615
616 var Chatroom = function() {
617 var participants = {};
618 return {
619 register: function(participant) {
620 participants[participant.name] = participant;
621 participant.chatroom = this;
622 },
623 send: function(message, from, to) {
624 if (to) { // single message
625 to.receive(message, from);
626 } else { // broadcast message
627 for (key in participants) {
628 if (participants[key] !== from) {
629 participants[key].receive(message, from);
630 }
631 }
632 }
633 }
634 };
635 };
636
637 // log helper
638 var log = (function() {
639 var log = "";
640 return {
641 add: function(msg) { log += msg + "\n"; },
642 show: function() { alert(log); log = ""; }
643 }
644 })();
645
646
647 function run() {
648
649 var yoko = new Participant("Yoko");
650 var john = new Participant("John");
651 var paul = new Participant("Paul");
652 var ringo = new Participant("Ringo");
653
654 var chatroom = new Chatroom();
655 chatroom.register(yoko);
656 chatroom.register(john);
657 chatroom.register(paul);
658 chatroom.register(ringo);
659
660 yoko.send("All you need is love.");
661 yoko.send("I love you John.");
662 john.send("Hey, no need to broadcast", yoko);
663 paul.send("Ha, I heard that!");
664 ringo.send("Paul, what do you think?", paul);
665
666 log.show();
667 }
668 }());
669
670 </script>
671 </body>
672 </html>
