Concept and characteristics

Concept:
Provide a unified interface for multiple complex subsystems, make the subsystems easier to access, and reduce the coupling between systems.

Features:

Reduce the degree of coupling between the client and the subsystem. So that changes in the subsystem will not affect the client that calls it.
Reduce the number of clients processed.
The client's restrictions on the subsystem are not flexible enough.

Structure and realization

The appearance model includes appearance classes, subsystem classes, and customer classes.
Appearance: Provide common interfaces for multiple subsystems.
Subsystem class: Realize the partial functions of the system, and customers can access it through the appearance class.
Customer category: Access to various subsystems through appearance roles.

Little theater:
Xiao Wang wants to buy clothes, shoes, and hats for his girlfriend Xiaohua. But Xiao Wang is lazy and doesn't want to go to the clothing store and the shoe store separately. So Xiao Wang plans to go directly to the mall where he can buy clothes, shoes, and hats at the same time.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<body>
<script>
    class MarketShop{
    
    
        constructor(){
    
    
            this.clothes = new ClothesShop();
            this.shoe = new ShoeShop();
            this.cap = new CapShop();
        }
        sell(){
    
    
            this.clothes.sell();
            this.shoe.sell();
            this.cap.sell();
        }
    }
    class ClothesShop{
    
    
        sell(){
    
    
            console.log('卖衣服');
        }
    }
    class ShoeShop{
    
    
        sell(){
    
    
            console.log('卖鞋');
        }
    }
    class CapShop{
    
    
        sell(){
    
    
            console.log('卖帽子');
        }
    }
    class Customer{
    
    
      static  main(){
    
    
           let shop = new MarketShop();
          shop.sell();
        }
    }
    Customer.main();
</script>
</body>
</html>

Insert picture description here

Application scenario

When building a hierarchical structure system, using the appearance model to define the entry points of each layer in the subsystem can simplify the dependencies between the subsystems.
When there are many subsystems in a complex system, you can use the appearance mode to design a simple interface for the outside world to call.
When the client is highly coupled with the subsystem, the appearance mode can be used to decouple the subsystem from the client to make the subsystem more independent.

Applications

Nothing.

to sum up

Appearance mode should be the best understood in structural design mode. Its function is mainly to gather the methods of multiple subsystems and call them in a function, and only expose this function to the client. This well decouples the relationship between the client and the subsystem, and the client reduces the processing of the subsystem.

10 appearance modes of JavaScript 23 design patterns