Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of the web front-end intermediary pattern. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Intermediary mode (Mediator Pattern)

In the intermediary pattern, the Mediator wraps a series of ways in which objects interact with each other, so that these objects do not have to interact directly, but the intermediaries coordinate their interaction, so that they can be loosely coupled. When the interaction between some objects changes, it will not immediately affect the interaction between other objects, ensuring that these functions can change independently of each other.

There are some similarities between the intermediary pattern and the observer pattern, which are both one-to-many relationships and centralized communication. The difference is that the intermediary pattern deals with the interaction between peer objects, while the Observer pattern deals with the interaction between Observer and Subject. The intermediary model is a bit like a dating agency, where dating partners can't communicate directly at first, but they have to screen matches through intermediaries and then decide who meets whom.

Scene

For example, shopping cart requirements, the existence of item selection form, color selection form, purchase quantity form, and so on, will trigger change events, so you can forward and process these events through intermediaries to achieve decoupling between events, and only maintain the intermediary object.

Var goods = {/ / Mobile phone inventory 'red | 32g inventory: 3,' red | 64G inventory: 1, 'blue | 32G inventory: 7,' blue | 32G inventory: 6,}; / / intermediary var mediator = (function () {var colorSelect = document.getElementById ('colorSelect'); var memorySelect = document.getElementById (' memorySelect'); var numSelect = document.getElementById ('numSelect')) Return {changed: function (obj) {switch (obj) {case colorSelect: / / TODO break; case memorySelect: / / TODO break; case numSelect: / / TODO break ) (); colorSelect.onchange = function () {mediator.changed (this);}; memorySelect.onchange = function () {mediator.changed (this);}; numSelect.onchange = function () {mediator.changed (this);}

In the chat room

Chat room member class:

Function Member (name) {this.name = name; this.chatroom = null;} Member.prototype = {/ / send message send: function (message, toMember) {this.chatroom.send (message, this, toMember);}, / / receive message receive: function (message, fromMember) {console.log (`${fromMember.name} to ${this.name}: ${message}`);}}

Chat room category:

Function Chatroom () {this.members = {};} Chatroom.prototype = {/ / add member addMember: function (member) {this.members [member.name] = member; member.chatroom = this;}, / / send message send: function (message, fromMember, toMember) {toMember.receive (message, fromMember);}}

Test it:

Const chatroom = new Chatroom (); const bruce = new Member ('bruce'); const frank = new Member (' frank'); chatroom.addMember (bruce); chatroom.addMember (frank); bruce.send ('Hey frank', frank); / / output: bruce to frank: hello frank

Advantages

The coupling between objects is loose, and the interaction between them can be changed independently.

The one-to-many relationship between intermediaries and objects replaces the reticular many-to-many relationship between objects.

If the complex coupling between objects makes maintenance difficult, and the coupling increases rapidly with the project, intermediaries are required to ReFactor the code

Shortcoming

An intermediary object will be added in the system. Because of the complexity of the interaction between objects, it is transferred to the complexity of the intermediary object, so that the intermediary object is often huge. The mediator object itself is often a difficult object to maintain.

This is the end of the article on "sample Analysis of web Front-end Mediator pattern". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.