19 of the 23 JavaScript design patterns
Concept and characteristics
Concept: The
intermediary model is to provide an intermediary to change the many-to-many relationship between objects and objects into a one-to-many relationship to decouple the dependencies between objects.
The mode of intermediary is similar to that of housing intermediary. Now the buying and selling of houses is done through intermediaries, so that buyers and sellers will not have too much contact, and instead focus on their more important things.
Features:
- Reduce the coupling between objects, so that objects can be reused independently.
- Convert one-to-many associations between objects into one-to-one associations. Improve system flexibility and make the system more conducive to expansion and maintenance.
Structure and realization
Structure: The
intermediary model includes abstract intermediaries, concrete intermediaries, abstract colleague classes and concrete colleague classes.
Abstract intermediary: The intermediary interface provides abstract methods for colleague object registration and forwarding colleague object information.
Specific intermediary: implement the intermediary interface, define a list to manage colleague objects, and coordinate the interaction between each colleague object, so it depends on the colleague role.
Abstract colleague class: save the intermediary object and provide abstract methods for colleague object interaction. Realize the common functions of all colleague classes that affect each other.
Specific colleague class: implement the abstract method of the abstract colleague class, when it is necessary to interact with other colleague objects, the intermediary object is responsible.
Case :
Using the intermediary model to complete transactions between buyers and sellers of real estate agents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>React App</title>
</head>
<body>
<div><label for="">卖方张三说：</label><input type="text" id="sell"><button style="margin-left: 10px" id="sellSubmit">发布</button></div>
<div><label for="">买方李四说：</label><input type="text" id="buy"><button style="margin-left: 10px" id="buySubmit">发布</button></div>
<div style="margin-top: 20px;
border: 1px solid #ddd;
padding: 20px;
border-radius: 10px;
display: inline-block;">
<div style="text-align: center">公告台</div>
<div style="display: flex">
<div style="margin-top: 10px">
<span style="background: pink">卖方消息内容:</span>
<div id="sellContent"></div>
</div>
<div style="margin-left: 20px;margin-top: 10px">
<span style="background: blue">买房消息内容:</span>
<div id="buyContent"></div>
</div>
</div>
</div>
<script>
//抽象中介者-房地产中介公司
class Medium{
register(member){
}//客户注册
relay(from,ad){
}//转发
}
//具体中介者-韶关房地产交流平台
class EstateMedium extends Medium{
constructor(){
super();
this.list = []
}
//用户注册
register(member){
if(!this.list.includes(member)){
this.list.push(member);
member.setMedium(this);
}
}
//转发用户消息
relay(from,ad){
for(let i of this.list){
let name = i.getName();
if(name !== from){
i.receive(from,ad);
}
}
}
}
//抽象同事类-客户
class Qistomer{
constructor(name){
this.name = name;
}
setMedium(medium){
this.medium = medium;
}
getName(){
return this.name;
}
send(ad){
}
receive(from,ad){
}
}
//具体同事类-卖方
class Seller extends Qistomer{
constructor(name){
super(name);
this.name = name;
this.content = this.name+"说:"+"<br>";
}
send(ad){
this.content+=ad+"<br>";
sellContent.innerHTML = this.content;
this.medium.relay(this.name,ad);
}
receive(from,ad){
console.log("接收到一条消息"+from+"说:"+ad);
}
}
//具体同事类-买方
class Buyer extends Qistomer{
constructor(name){
super(name);
this.name = name;
this.content = this.name+"说:"+"<br>";
}
send(ad){
this.content+=ad+"<br>";
buyContent.innerHTML = this.content;
this.medium.relay(this.name,ad);
}
receive(from,ad){
console.log("接收到一条消息"+from+"说:"+ad);
}
}
class Customer{
static main(){
let md = new EstateMedium();
let member1 = new Seller("卖方(张三)");
let member2 = new Buyer("买方(李四)");
md.register(member1);
md.register(member2);
sellSubmit.onclick = function () {
member1.send(sell.value);
sell.value = "";
}
buySubmit.onclick = function () {
member2.send(buy.value);
buy.value = "";
}
}
}
Customer.main();
</script>
</body>
</html>
Application scenario
- When there is a complex network structure between objects, which leads to chaotic dependencies and difficult to reuse. There is a one-to-many relationship between objects. The state change of one object will affect the change of other states.
- The colleague object does not hold the intermediary, but directly obtains and calls the intermediary object when needed.
Applications
Refer to the above case.
to sum up
The intermediary model is to decouple the many-to-many dependency of objects. Use third parties, or intermediaries, to make multiple objects independent. Then the intermediary must provide object registration, object message forwarding and other functions. In that way, between objects, such as buyers and sellers, only need to publish their own messages to the platform (intermediary party). The platform forwards to other objects, and the received message also comes from the platform side. In this way, objects can be well decoupled from each other.
[Intermediary]:
1. Initialize the list container to manage colleague objects.
2. Provide the method register to register the colleague object (call the setMedium method).
3. Provide the method replay to forward the message (call the receive method of the colleague object).
[Colleague object]:
1. Define the setMedium method in the abstract class.
1. Provide a method to receive
a message , 2. Provide a method to send a message (call this.medium.replay).