Introduction to Appearance Patterns of JavaScript Design Patterns_Javascript Skills

Appearance mode description

Explanation: Appearance mode is a high-level interface provided due to the complex composition of subsystems or programs. It is easier to access the underlying program or system interface using the client;

Appearance mode is a mode that we often encounter. The functions we often involve may need to involve several sub-interfaces or sub-systems, and one of our functions may only need this one of multiple sub-interfaces. One or several sequential packages. If the business function directly corresponds to a sub-interface or subsystem, the developer may be required to have a good understanding of the internals; you may need to understand how the business process goes, what its order is, etc. This requires developers to understand the business, and also makes client programming quite complicated;

If there is a layer or a class here that specifically encapsulates the methods we want to use, the client function only needs to interact with this middle layer class. The corresponding methods of the middle layer class are organized by relevant developers who understand the business. Encapsulation, then the program will become very simple. The programmer only needs to know which method is required for this function, and does not need to know the internal logic.

This middle layer class is what we call the appearance class. This is the idea of ​​appearance mode.

Scenario example:

1>. Take the example of a master switch. This master switch can control a light on the door of your home, several lights in the hall, and control the power supply to your TV, refrigerator, etc. Which small button do you put? Press "ON", and everything will have electricity, or even directly emit light and heat. You don't need to know how the button on the main switch comes out to generate electricity, or how to press it to the relevant electrical appliances. Anyway, just press it and the electricity will come on. .

These lights, TVs, etc. are the interfaces and small systems we want to use; this main switch is our appearance class, we can operate it directly by facing it.

2>. It’s like a company with several functional departments. When the boss needs the execution status of various aspects of work, he will go to each department and ask the employees how this certain thing is going. Well, if you ask the right person, you can give the boss a direct answer. If this person is not responsible, he will tell the boss, oh, who is responsible for this, and the boss will have to go and ask that person, how troublesome it is.

If each functional department has a person in charge, the boss can just go to him directly to understand the situation. The boss doesn’t need to care how the person in charge knows this. He only needs to know these 1, 2, or 3 things. Just follow the situation and progress of the matter.

Example source code

Now implement the source code according to the second instance scenario:

1. Several department functions:

Department 1 (Business Department):

Copy code The code is as follows:

function BusinessDept() {
this.manager = 'Manager Chen'; //Responsible person
}
BusinessDept.prototype = {
MonthSales: function() {
console.log(this.manager 'Said: Sales this month is xxx');
},
NextPlan: function() {
console.log(this.manager 'Said: The next plan is like this, xxxx');
}
}

Department 2 (R&D Department):

Copy code The code is as follows:

function RDdept() {
this.manager = 'Manager Huang';
}
RDdept.prototype = {
progress: function() {
console.log(this.manager 'Said: The current project situation and progress is like this xxx');
},
deptPlan: function() {
console.log(this.manager 'Said: The next department plan is like this xxx');
}
}

The above are the questions that the heads of each department should answer to the boss;

Next, create an appearance class to organize the questions the boss wants to ask;

Copy code The code is as follows:

function Facade() {
this.business = new BusinessDept() ;
this.rddept = new RDdept();
}
Facade.prototype = {
DeptSituation: function() {
This.business.MonthSales(); //The sales manager will speak first;
This.rddept.progress();
},
deptPlan: function() {
This.business.NextPlan(); //Report next plan;
This.rddept.deptPlan();
}
}

Then the boss called the two managers in front of him and started questioning:

Copy code The code is as follows:

var facade = new Facade();
console.log('The boss asked: Now introduce the situation of your department?');
facade.DeptSituation();
console.log('The boss asked: What are the plans next?');
facade.deptPlan();

Other instructions

Using the appearance mode can decouple interfaces or classes so that there is no need for dependence between classes. When it is not necessary, A must contain B, or B must contain A. This violates the principle of closed modification. Use The middle-layer appearance class packaging can make interface calls simpler, and calls using sub-interfaces or subsystem objects become more free and organized.

Appearance patterns often appear in our programming. Appearance patterns are often used in the pattern definitions of architectural systems. Our systems use third-party interface services and often add a facade layer to organize available business interfaces. ;