JavaScript design pattern Theory and actual combat: Combinatorial mode

In our usual development process, we are bound to encounter this situation: both simple objects and complex objects composed of simple objects, these simple objects and complex objects will be combined into a tree structure, when the client processing it to maintain consistency. For example, the product orders in the e-commerce website, each product order may have many sub-order combinations, such as the operating system folder, each folder has multiple subfolders or files, we as users to copy, delete and other operations, whether it is a folder or file, for our operators are the same. In this scenario, it is well suited to use a combination pattern.

Basic knowledge

Composition mode: Combines objects into a tree structure to represent a "partial-whole" hierarchy, combining patterns that allow users to be consistent with the use of individual objects and composite objects.
There are three main characters in the combo mode:
(1) abstract component (Component): Abstract class that mainly defines the public interface of the object that participates in the composition
(2) Sub-object (Leaf): The most basic object that makes up a grouped object
(3) grouped objects (Composite): Complex objects grouped together by sub-objects
The key to understanding the combinatorial pattern is to understand the consistency of the combination pattern with respect to individual objects and composite objects, and let's say that the implementation of the combinatorial pattern deepens understanding.

The simplest combination mode for the implementation of the combined mode

The DOM structure of the HTML document is a natural tree structure, the most basic elements drunk into the DOM tree, the final form of the DOM document, very suitable for the combination of patterns.
Our common jquery class library, where the combination pattern is used more frequently, such as the following code is often implemented:

1 $ (". Test"). AddClass ("Notest"). Remove ("test");

The simple code is to get the class containing the test elements, and then do addclass and removeclass processing, whether $ (". Test") is an element, or more than one element, Ultimately, they are called through a unified AddClass and Removeclass interface.

Let's simply simulate the implementation of AddClass:

1 varAddClass =function(Eles, className) {2     if(ElesinstanceofNodeList) {3          for(vari = 0, length = eles.length; i < length; i++) {4Eles[i].nodetype = = = 1 && (eles[i].classname + = (' + className + ')));5         }6     }7     Else if(ElesinstanceofNode) {8Eles.nodetype = = = 1 && (eles.classname + = (' + className + ')));9     }Ten     Else { One         Throw"Eles is not a HTML node"; A     } - } -AddClass (document.getElementById ("Div3"), "test"); theAddClass (Document.queryselectorall (". Div"), "test");

This code simply simulates the implementation of the addclass (regardless of compatibility and commonality), it is simple to determine the node type first, and then add classname to the different types. For nodelist or node, the client invocation is the same as using the AddClass interface, this is the most basic idea of the combination mode, so that the use of parts and the whole is consistent.

A typical example

Before we mention a typical example: a product order contains multiple product sub-orders, and multiple product sub-orders form a complex product order. Due to the features of the JavaScript language, we reduced the three roles of the combined pattern to 2 roles: the
(1) Sub-object: In this example, the sub-object is the product sub-order
(2) Composite object: Here is the total order for the product
Suppose we develop a tourism product website, Including airfare and hotel two seed products, we have defined sub-objects as follows:

 1  function   Flightorder () {}  2  FlightOrder.prototyp.create = function   () { 3  Console.log ("Flight order Created " 4   5  function   Hotelorder () {}  6  HotelOrder.prototype.create = function   () { ); 8 } 

The code above defines two classes: the Ticket Order class and the hotel order class, each with its own order creation method.
Next we create a total order class:

1 functiontotalorders () {2      This. orderlist = [];3 }4TotalOrders.prototype.addOrder =function(order) {5      This. Orderlist.push (order);6 }7TotalOrders.prototype.create =function(order) {8      for(vari = 0, length = This. orderlist.length; i < length; i++) {9          This. Orderlist[i].create ();Ten     } One}

This object has 3 members: the order list, the method to add the order, and the method to create the order.
The client is used as follows:

1 var New Flightorder (); 2 flight.create (); 3 4 var New totalorders (); 5 Orders.addorder (new  Flightorder ()); 6 Orders.addorder (new  Hotelorder ()); 7 orders.create ();

The client invocation shows two ways, one is to create a single ticket order, one to create multiple orders, but ultimately to create the creation method, which is a typical application scenario for a combined pattern.

Summarize

The combination mode is not difficult to understand, it mainly solves the problem of consistency of the use of single object and composite object. If objects have a distinct hierarchy and want to use them uniformly, this is a good fit for combining patterns. In web development, this hierarchy is very common, it is very suitable for the use of combination mode, especially for JS, not rigidly adhere to the traditional object-oriented language form, the flexibility to use the characteristics of JS language, to achieve partial and overall use of consistency.

Original address: http://luopq.com/2015/11/16/design-pattern-composite/

JavaScript design pattern Theory and actual combat: Combinatorial mode