Tutorial on using the combination mode in JavaScript design mode development, and the javascript Design Mode

Tutorial on using the combination mode in JavaScript design mode development, and the javascript Design Mode

We usually encounter this situation in the development process: Processing simple objects and complex objects composed of Simple objects at the same time. These simple objects and complex objects are combined into a tree structure, the client must maintain consistency during processing. For example, for product orders on e-commerce websites, each product order may have multiple sub-order combinations, such as operating system folders. Each folder has multiple sub-folders or files, when we copy or delete a file as a user, whether it is a folder or a file, it is the same for our operator. In this scenario, the combination mode is very suitable.

Basic knowledge

Combination Mode: combines objects into a tree structure to represent a "part-whole" hierarchy. The combination mode ensures consistency between the use of a single object and a combination object.
The combination mode has three roles:
(1) Abstract Component: abstract class, which mainly defines the public interfaces of objects involved in the combination
(2) Sub-object (Leaf): the most basic object for composite objects
(3) Composite: a complex object composed of sub-objects
The key to understanding the combination mode is to understand the consistency of the combination mode on the use of a single object and a combination object. Let's talk about the implementation of the combination mode to deepen our understanding.
The combination mode is tailored to the dynamic UI creation on the page. You can use only one life = command to initialize complex or recursive operations for many objects. The combination mode provides two features:
(1) allows you to treat a group of objects as specific objects. the combination object (A composite) and its sub-objects implement the same operation. executing an operation on a composite object will make all sub-objects under the object perform the same operation. therefore, you can not only seamlessly replace a single object as a set of objects, but also vice versa. these independent objects are loosely coupled.
(2) The combination mode combines sub-object sets into a tree structure and allows traversing the entire tree. this can hide internal implementations and allow you to organize sub-objects in any way. any code of this object (composite object) will not depend on the implementation of internal sub-objects.

Implementation of the Combination Mode

(1) The simplest Combination Mode

The DOM structure of HTML documents is a natural tree structure. The most basic element is the DOM tree, which forms a DOM document and is very suitable for combination mode.
We commonly use jQuery class libraries, where the application of the combination mode is more frequent. For example, the following code is often implemented:

$(".test").addClass("noTest").remove("test");

This simple code is to get the elements of the class containing test, and then perform addClass and removeClass processing, regardless of $ (". test) is an element or multiple elements, and is finally called through the unified addClass and removeClass interfaces.
Let's simulate the implementation of addClass:

var addClass = function (eles, className) {  if (eles instanceof NodeList) {    for (var i = 0, length = eles.length; i < length; i++) {      eles[i].nodeType === 1 && (eles[i].className += (' ' + className + ' '));    }  }  else if (eles instanceof Node) {    eles.nodeType === 1 && (eles.className += (' ' + className + ' '));  }  else {    throw "eles is not a html node";  }}addClass(document.getElementById("div3"), "test");addClass(document.querySelectorAll(".div"), "test");

This code simulates the implementation of addClass (compatibility and versatility are not considered for the moment). It is very easy to judge the node type first, and then add className based on different types. For NodeList or Node, client calls use the addClass interface. This is the most basic idea of the combination mode, so that the parts and the overall use are consistent.

(2) typical examples

We mentioned a typical example above: A product order contains multiple product suborders, and multiple product suborders form a complex product order. Due to the features of the Javascript language, we can simplify the three roles in the combination mode into two roles:
(1) subobject: In this example, subobject is a product suborder.
(2) combination object: Here is the total order of the product.
Suppose we develop a travel product website, which includes two sub-products: air ticket and hotel. We define sub-objects as follows:

function FlightOrder() { }FlightOrder.prototyp.create = function () {  console.log("flight order created");}function HotelOrder() { }HotelOrder.prototype.create = function () {  console.log("hotel order created");}

The code above defines two categories: Ticket Order and hotel order. Each class has its own order creation method.
Next we will create a total order class:

function TotalOrders() {  this.orderList = [];}TotalOrders.prototype.addOrder = function (order) {  this.orderList.push(order);}TotalOrders.prototype.create = function (order) {  for (var i = 0, length = this.orderList.length; i < length; i++) {    this.orderList[i].create();  }}

This object mainly has three members: Order List, order adding method, and order creation method.
When using the client:

var flight = new FlightOrder();flight.create();var orders = new TotalOrders();orders.addOrder(new FlightOrder());orders.addOrder(new HotelOrder());orders.create();

Client call shows two methods: one is to create a single ticket order, and the other is to create multiple orders, but they are all created using the create method, this is a typical combination mode application scenario.

Summary
The combination mode is not difficult to understand. It mainly solves the consistency problem between the usage of a single object and the combination object. If objects have obvious hierarchies and want to use them in a unified manner, this is a perfect combination mode. In Web development, such hierarchies are very common and suitable for combination modes. Especially for Javascript, they do not have to stick to the traditional object-oriented language, use the features of the JS language flexibly to ensure consistency between the parts and the overall usage.
(1) scenarios using the combination mode
The combination mode is used only in the following two cases:
A. object set containing A certain level of structure (the specific structure cannot be determined during development)
B. Want to perform some operation on these objects or some of them
(2) Disadvantages of the Combination Mode
Because any operation on the composite object will call the same operation on all sub-objects, performance problems may occur when the composite structure is large. In addition, when using the combination mode to encapsulate HTML, You need to select the appropriate tag. For example, the table cannot be used in the combination mode, and the leaf node is not obvious.