Examples of the JavaScript design pattern: the Mediator Pattern, And the javascript Design Pattern

Examples of the JavaScript design pattern: the Mediator Pattern, And the javascript Design Pattern

This article describes the JavaScript design pattern-the Mediator Pattern. We will share this with you for your reference. The details are as follows:

1. Definition

The mediator mode encapsulates a series of object interaction methods, so that these objects do not have to interact explicitly. So that they can be loosely coupled. When the roles of some objects change, the roles of other objects are not immediately affected. Ensure that these functions can be changed independently of each other. The mediator mode converts the multi-to-many interaction into one-to-many interaction. The mediation mode abstracts the behavior and collaboration of objects, and processes the interaction between objects and other objects on a small scale.

2. usage reasons

When there are many interaction operations between objects and each object's behavior operations is dependent on each other, to prevent the behavior of modifying an object and modifying many other objects, the failover mode can be used to solve the problem of tight coupling.

This mode changes the many-to-many relationship between objects to one-to-many relationship. The called object changes the system from a mesh structure to a star structure centered on the called USER, reducing the complexity of the system, improve scalability.

Structure Diagram of the design mode of the dispatcher:

The mediator mode includes the following roles:

● Abstract the Mediator role: defines the interface from a colleague object to the mediation object. The main method is one or more event methods.
● The specific ConcreteMediator role implements the event Methods declared by the abstract mediator. Specific mediators are aware of all the specific types of colleagues and are responsible for coordinating the interaction between colleagues and objects.
● Abstract Colleague role: defines the interface from the caller to the Colleague object. Colleagues only know the callers, but do not know other colleagues.
● The role of a specific colleague class: all the specific colleague classes are inherited from the abstract colleague class. Implement your own business. When you need to communicate with other colleagues, you need to communicate with the on-demand contact. The on-demand contact will be responsible for interacting with other colleagues.

JS implementation code:

CD drive

Function CDDriver (mediator) {// hold a mediator object this. mediator = mediator;/*** get the mediator object corresponding to the current colleague class */this. getMediator = function () {return mediator;} // The data read from the optical drive. this. data = "";/*** get the data read from the CD */this. getData = function () {return this. data;}/*** read the disc */this. readCD = function () {// The data displayed in the video before the comma (,), and the sound after the comma. data = "Journey to the West, old Sun also! "; // Notify the motherboard that its status has changed this. getMediator (). changed (this );}}

CPU Processor

Function CPU (mediator) {// hold a mediator object this. mediator = mediator;/*** get the mediator object corresponding to the current colleague class */this. getMediator = function () {return mediator;} // The video data decomposed. this. videoData = ""; // audio data decomposed this. soundData = "";/*** obtain the decomposed video data */this. getVideoData = function () {return this. videoData;}/*** obtain the decomposed audio data */this. getSoundData = function () {return this. soundData;}/*** process data and divide the data into audio and video data */this.exe cuteData = function (data) {// split the data into video data, followed by the Audio data var array = data. split (","); this. videoData = array [0]; this. soundData = array [1]; // notifies the motherboard that the CPU is finished. this. getMediator (). changed (this );}}

Graphics card

Function VideoCard (mediator) {// hold a mediator object this. mediator = mediator;/*** get the mediator object corresponding to the current colleague class */this. getMediator = function () {return mediator;}/*** display video data */this. showData = function (data) {console. log ("playing is:" + data );}}

Sound Card

Function SoundCard (mediator) {// hold a mediator object this. mediator = mediator;/*** get the mediator object corresponding to the current colleague class */this. getMediator = function () {return mediator;}/*** send a sound Based on the audio frequency data */this. soundData = function (data) {console. log ("Output Audio:" + data );}}

Specific Mediators

Function MainBoard () {// You Need To Know the colleague class to interact with-the optical drive class this. cdDriver = null; // You Need To Know the colleague class to interact with-CPU class this. cpu = null; // You Need To Know the colleague class to interact with-the graphics class this. videoCard = null; // You Need To Know the colleague class to interact with-the sound card class this. soundCard = null; this. setCdDriver = function (cdDriver) {this. cdDriver = cdDriver;} this. setCpu = function (cpu) {this. cpu = cpu;} this. setVideoCard = function (videoCard) {this. videoCard = videoCard;} this. setSoundCard = function (soundCard) {this. soundCard = soundCard;} this. changed = function (c) {if (c instanceof CDDriver) {// indicates that the optical drive reads data this. opeCDDriverReadData (c);} else if (c instanceof CPU) {this. opeCPU (c) ;}}/*** interaction with other objects after the optical drive reads data */this. opeCDDriverReadData = function (cd) {// obtain the data read by the optical drive var data = cd. getData (); // pass the data to the CPU for processing cpu.exe cuteData (data);}/*** interaction with other objects after processing CPU data */this. opeCPU = function (cpu) {// obtain the data processed by the CPU first var videoData = cpu. getVideoData (); var soundData = cpu. getSoundData (); // transmits the data to the video card and sound card for display. this. videoCard. showData (videoData); this. soundCard. soundData (soundData );}}

Client

// Create a dispatcher -- MainBoard var mediator = new MainBoard (); // create a colleague class var cd = new CDDriver (mediator); var cpu = new CPU (mediator ); var vc = new VideoCard (mediator); var SC = new SoundCard (mediator); // Let the dispatcher know all colleagues mediator. setCdDriver (cd); mediator. setCpu (cpu); mediator. setVideoCard (vc); mediator. setSoundCard (SC); // starts to watch a movie, puts the cd into the optical drive, and starts to read the cd. readCD ();

Print Effect

Advantages of the Mediator Mode

● Loose coupling: By encapsulating the interaction between multiple colleague objects into the mediation object, the mediation object can be loose coupled and complementary. In this way, the objects of colleagues can be changed and reused independently, instead of "taking one place and moving the whole body" as before.
● Centralized interaction control: interaction between multiple colleague objects is encapsulated in the mediation object for centralized management. When these interaction behaviors change, you only need to modify the mediation object, of course, if it is a ready system, it will expand the object of the mediation, and each colleague class does not need to be modified.
● Multiple-to-multiple becomes one-to-many: When the mediator mode is not used, the relationship between colleague objects is usually many-to-many. After the mediator object is introduced, the relationship between the Paster object and the colleague object is usually a two-way one-to-multiple relationship, which makes the object relationship easier to understand and implement.

Disadvantages of the Mediator Mode

One potential disadvantage of the mediation model is that it is overly centralized. If the interaction between colleagues and objects is very large and complex, when these complexities are all concentrated to the callers, it will lead to the complex and difficult to manage and maintain the callers.