JavaScript 21 visitor mode of 23 design patterns
Concept and characteristics
Concept: The
visitor model separates the operation of the data from the data structure, and encapsulates the operation of each element in the data into an independent class, so that it can expand new operations on the data without changing the data structure.
Features:
- It has good extensibility and can add new functions to the elements in the object without modifying the object structure.
- The reusability is good, the general function of the whole object can be defined by the visitor, so as to realize the reuse.
- Good flexibility, the visitor model decouples the object structure from the operations acting on the object.
- In line with the principle of single responsibility, the visitor model encapsulates related behaviors to form a visitor, so that each visitor has a single function.
Structure and realization
Structure: The
visitor pattern includes abstract visitors, concrete visitors, abstract elements, concrete elements and object structures.
Abstract visitor: Define an interface to access specific elements, so that each specific element has an access operation.
Specific visitor: Implement each visit operation defined in the abstract visitor, and determine what the visitor should do when visiting an element.
Abstract element: Declare an interface containing receiving operations.
Specific elements: implement an interface that includes receiving operations.
Object structure: a container that contains element roles, providing a method for visitors to traverse all elements in the container.
Case :
There are two companies, [Art Company] and [Minting Company];
there are two materials, [Paper] and [Copper].
Give [Paper] to [Art Company] to get drawings;
give [Copper] to [Art Company] to design bronze statues.
Give [Paper] to the [Minting Company] to make paper money;
give [Copper] to the [Minting Company] to make copper coins.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>React App</title>
</head>
<body>
<script>
//抽象访问者-公司
class Company{
create(){
}
}
//具体访问者-艺术公司
class ArtCompany extends Company{
create(el){
if(el instanceof Paper){
return "画图"
}else if(el instanceof Cuprum){
return "设计铜像"
}
}
}
//具体访问者-造钱公司
class Mint extends Company{
create(el){
if(el instanceof Paper){
return "造纸币"
}else if(el instanceof Cuprum){
return "造铜币"
}
}
}
//抽象元素-材料
class Material{
accept(visitor){
}
}
//抽象元素-纸币
class Paper extends Material{
accept(visitor){
return visitor.create(this);
}
}
//抽象元素-铜币
class Cuprum extends Material{
accept(visitor){
return visitor.create(this);
}
}
//对象结构-添加或删除材料，根据不同的公司做出不同的东西
class SetMaterial{
constructor(){
this.list = [];
}
accept(visitor){
let str = "";
for(let i of this.list){
str+=i.accept(visitor)+"\n";
};
return str;
}
add(el){
this.list.push(el);
}
remove(el){
this.list.filter((item)=>item!==el);
}
}
class Customer{
static main(){
//定义材料对象
let setMaterial = new SetMaterial();
//添加材料
setMaterial.add(new Paper());
setMaterial.add(new Cuprum());
//根据不同的公司生产不同的东西
let pro = setMaterial.accept(new ArtCompany());
let pro1 = setMaterial.accept(new Mint());
console.log(pro);
console.log(pro1);
}
}
Customer.main();
</script>
</body>
</html>
Application scenario
- The object structure is relatively stable, but its operation algorithm changes frequently.
- Objects in the object structure need to provide many different and unrelated operations. And to avoid the changes of these operations affecting the object structure.
- The object structure contains many types of objects. Hope to perform some operations on these objects that depend on their specific types.
Applications
Refer to the above case.
to sum up
The visitor mode is more suitable for scenarios where multiple elements have different performances in different scenarios, and it is a many-to-many relationship. In this case, you can separate the visitor object from the element object. Different visitors will have different behaviors in the face of different elements. This mode requires that the structure of the visitor object and the element object is relatively stable, but the business behavior has different changes.
[Visitors]:
1. Provide a visit access method, which receives element objects and makes different responses according to different elements.
[Element]:
1. Provide the accept method, receive the visitor object, pass in the element object, and call the visit method of the visitor object.
2. Provide getMaterial method to get elements.
[Object structure]:
1. Initialize the list container to manage the elements.
2. Provide the accept method, receive the visitor object, traverse the element object, and call the accepet method of the element object.
3. Provide the add method to add the element object to the container.
4. Provide the remove method to delete the element object from the container.