This article describes the Javascript object-oriented programming combination pattern. Share it for your reference, as follows:
Overview
Regarding the definition of composition pattern: Composite pattern is sometimes called part-total pattern. It blurs the concepts of simple elements and complex elements in the problem of tree structure. Client programs can handle complex elements like processing simple elements, thus decoupling the client program from the internal structure of complex elements. From Baidu Encyclopedia:/view/
In fact, after object-oriented fifth, it has not had much relationship with JavaScript itself. What is more important is some concepts of design patterns. As long as you understand the general knowledge of object-oriented JavaScript and master the meaning of design patterns, the code itself is not difficult.
Let’s briefly talk about the combination mode here. In fact, the combination mode is to combine a series of similar or similar objects into a large object. This large object provides some commonly used interfaces to operate these small objects. The code can be reused and the external operation is simple. For example, for elements in a form, without considering the page design, the input is generally left. These inputs have attributes of name and value. Therefore, these input elements can be combined as members of the form object. The form object provides an external interface, so some simple operations can be implemented, such as setting the value of an input, adding/deleting an input, etc.
text
introduce:Combination mode is also called partial overall mode, which is used to treat a group of similar objects as a single object. Combination mode combines objects based on a tree structure to represent parts and overall levels.
definition:Combining multiple objects to form a tree structure to represent a hierarchical mechanism with an overall part of the relationship. Combination mode has consistency in the use of single objects (i.e. leaf objects) and combined objects (i.e. container objects), and combination mode can become a part of the pattern.
It is an object structure pattern.
Scene:We will print the company's personnel structure. Assuming that there is only one difference between all management positions and development positions, are there any subordinate employees? Let's implement it:
Example:
var LEADER = function(name,dept){
this._name = name || ''; //Name this._dept = dept || ''; //Position this._subordinates = []; //subordinate
= function(employee){
this._subordinates.push(employee);
}
= function(employee){
this._subordinates.splice(this._subordinates.indexOf(employee),1);
}
= function(){
return this._subordinates;
}
= function(){
('Name:'+this._name+',Position:'+this._dept)
}
}
var JAVARD = function(name,dept){
this._name = name || ''; //Name this._dept = dept || ''; //Position
= function(){
('Name:'+this._name+',Position:'+this._dept)
}
}
var FERD = function(name,dept){
this._name = name || ''; //Name this._dept = dept || ''; //Position = function(){
('Name:'+this._name+',Position:'+this._dept)
}
}
function addData(){
var CEO = new LEADER('spancer','CEO');
var CTO = new LEADER('zijian','CTO');
var MANAGER = new LEADER('jiang','LEADER');
var JAVA_LEADER = new LEADER('fei','JAVA_LEADER');
var FE_LEADER = new LEADER('risker','FE_LEADER');
var wh = new FERD('wanghui','FE');
var si = new FERD('si','FE');
var amy = new FERD('amy','FE');
var wei = new JAVARD('wei','JAVA');
var guo = new JAVARD('guo','JAVA');
var yuan = new JAVARD('yuan','JAVA');
(CTO);
(MANAGER);
(JAVA_LEADER);
(FE_LEADER);
FE_LEADER.add(wh);
FE_LEADER.add(si);
FE_LEADER.add(amy);
JAVA_LEADER.add(wei);
JAVA_LEADER.add(guo);
JAVA_LEADER.add(yuan);
return CEO;
}
var eachEmployee = function(employee){
for(var employ of ()){
();
if( && ().length > 0){
eachEmployee(employ);
}
}
}
var CEO = addData();
();
eachEmployee(CEO);
// Name:spancer, Position:CEO// Name: zijian, Position: CTO// Name:jiang, Position:LEADER// Name:fei, Position:JAVA_LEADER// Name:wei, Position:JAVA// Name:guo, Position: JAVA// Name:yuan, Position:JAVA// Name:risker, Position:FE_LEADER// Name:wanghui, Position:FE// Name:si, Position:FE// Name:amy,Position:FE
The demo we simply wrote here is used to traverse and output the company's organizational structure. Because of the differences in the specific functions of rd and leader, we divide technology and management into two categories. But there are many problems with this design:
* Poor scalability. When a new position is generated, it is a problem whether to add a new one or put it under an existing category when classifying it.
* When a certain behavior changes, you need to modify the leader class rd class one by one, which does not comply with the switching principle.
Next we use the combination mode to implement it:
var Employee = function(name, dept){
this._name = name || ''; //Name this._dept = dept || ''; //Position this._subordinates = []; //subordinate
= function(employee){
this._subordinates.push(employee);
}
= function(employee){
this._subordinates.splice(this._subordinates.indexOf(employee),1);
}
= function(){
return this._subordinates;
}
= function(){
('Name:'+this._name+',Position:'+this._dept)
}
}
function addData(){
var CEO = new Employee('spancer','CEO');
var CTO = new Employee('zijian','CTO');
var LEADER = new Employee('jiang','LEADER');
var JAVA_LEADER = new Employee('fei','JAVA_LEADER');
var FE_LEADER = new Employee('risker','FE_LEADER');
var wh = new Employee('wanghui','FE');
var si = new Employee('si','FE');
var amy = new Employee('amy','FE');
var wei = new Employee('wei','JAVA');
var guo = new Employee('guo','JAVA');
var yuan = new Employee('yuan','JAVA');
(CTO);
(LEADER);
(JAVA_LEADER);
(FE_LEADER);
FE_LEADER.add(wh);
FE_LEADER.add(si);
FE_LEADER.add(amy);
JAVA_LEADER.add(wei);
JAVA_LEADER.add(guo);
JAVA_LEADER.add(yuan);
return CEO;
}
var eachEmployee = function(employee){
for(var employ of ()){
();
if(().length > 0){
eachEmployee(employ);
}
}
}
var CEO = addData();
();
eachEmployee(CEO);
// Name:spancer, Position:CEO// Name: zijian, Position: CTO// Name:jiang, Position:LEADER// Name:fei, Position:JAVA_LEADER// Name:wei, Position:JAVA// Name:guo, Position: JAVA// Name:yuan, Position:JAVA// Name:risker, Position:FE_LEADER// Name:wanghui, Position:FE// Name:si, Position:FE// Name:amy,Position:FE
You can compare the differences between the following two pieces of code. We use an Employee class to replace the leader and rd classes. In fact, this is the key to the combination pattern:
Define an abstract class that can represent both the leader and the rd. It is also based on the Employee class when adding and printing, without knowing what role this person is. It can be handled uniformly.
Combination mode summary:
advantage:
* You can clearly define complex objects with hierarchical relationships, so that the hierarchical differences can be ignored during client development.
* When modifying globally, you only need to modify one location
shortcoming:
* The generated results cannot be restricted. Like the first example, all rds have no subordinate employee attributes and no corresponding method. Therefore, pay attention to these constraints when using
Applicable scenarios;
* A tree structure needs to be processed in an object-oriented language development system.
* In a structure with a whole and a part, it is hoped that the differences between the two will be ignored and that the client will treat them consistently.
Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.
For more information about JavaScript, readers who are interested in reading this site's special topic:JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《Summary of JavaScript traversal algorithm and skills"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.