这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要帮助大家轻松掌握 JavaScript 中介者模式,告诉大家什么是 js 中介者模式?js 中介者模式的作用是什么,感兴趣的小伙伴们可以参考一下
中介者模式的作用就是解除对象与对象之间的紧耦合关系,它也称'调停者'。所有的对象都通过中介者对象来通信,而不是相互引用,所以当一个对象发生改变时,只需要通知中介者即可。
如:机场的指挥塔,每架飞机都只需要和指挥塔通信即可,指挥塔知道每架飞机的飞行状况,可以安排所有起降时间,调整航线等
中介者模式符合迪米特法则,即最少知识原则,指一个对象应该尽可能少地了解另外的对象。如果对象之间的耦合性太高,则改变一个对象,会牵动很多对象,难于维护。当对象耦合很紧时,要修改一个对象而不影响其它的对象是很困难的。
如果对象之间的复杂耦合确实导致调用和维护出现了困难,而且这些耦合度随项目的变化呈指数增长,那我们就可以考虑用中介者模式来重构代码!中介者通过解耦来提升代码的可维护性。
例子 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 设计模式与开发实践》
来源: http://www.phperz.com/article/17/0513/332308.html