The function of the mediator pattern is to disconnect the tight coupling relationship between objects, which is also called 'mediator'. All objects communicate through the intermediary object, rather than referring to each other, so when an object changes, you only need to notify the intermediary.
For example: the command tower of the airport, each aircraft only needs to communicate with the command tower. The command tower knows the flight status of each aircraft, can arrange all takeoff and landing times, adjust routes, etc.
The intermediary model conforms to the Dimitian law, that is, the principle of least knowledge, which means that an object should know as little as possible about another object. If the coupling between objects is too high, changing an object will affect many objects and are difficult to maintain. When the object coupling is tight, it is difficult to modify one object without affecting the other objects.
If the complex coupling between objects does cause difficulties in calling and maintaining, and these coupling degrees grow exponentially with the changes in the project, then we can consider refactoring the code with the intermediary pattern! Mediators improve the maintainability of code through decoupling.
Example 1: Game
The player object is created through the Player() constructor and has its own points and name attributes. The play() method on the prototype is responsible for adding a point to itself and notifying the intermediary:
function Player(name) { this.points = 0; this.name = name;}Player.prototype.play = function () { this.points += 1; mediator.played();};The scoreboard object (scoreboard) has an update() method, which is called by the intermediary after each player finishes playing. The analysis does not know any information about the player at all, nor does it save scores. It is only responsible for displaying the scores given by the intermediary:
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; }};Now let's take a look at the mediator object (mediator). When the game is initialized, create the player in the setup() method, and then put the player attribute for subsequent use. The played() method will be called by the player after each round. It updates the score hash table and then passes it to the scoreboard for display. The last method is keypress(), which handles keyboard events, decides which player plays it, and notifies it:
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; } }};The last thing is to initialize and end the game:
// go!mediator.setup();window.onkeypress = mediator.keypress;// game over in 30 secondsetTimeout(function () { window.onkeypress = null; alert('Game over!');}, 30000);Example 2: Selling a mobile phone
var goods = { //Inventory 'red|32G':3, 'red|16G':5, 'blue|32G':3, 'blue|16G':6}//Intermediator 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 ==== memorySelect){ memoryInfo.innerHTML = memory; }else if(obj ==== numberInput){ numberInfo.innerHTML = number; } if(!color){ nextBtn.disabled = true; nextBtn.innerHTML = 'Please select the phone color'; return; } if(!memory){ nextBtn.disabled = true; nextBtn.innerHTML = 'Please select the memory size'; return; } if(Number.isInteger(number-0) && number > 0){ nextBtn.disabled = true; nextBtn.innerHTML = 'Please enter the correct purchase quantity'; return; } nextBtn.disabled = false; nextBtn.innerHTML = 'Put into shopping cart'; } }})();//Add event colorSelect.onchange = function(){ mediator.changed(this);} memorySelect.onchange = function(){ mediator.changed(this);} numberInput.onchange = function(){ mediator.changed(this);}References: "JavaScript Pattern" "JavaScript Design Pattern and Development Practice"
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.