The so-called combination mode is to break up a bunch of structures and put them together. There are many such examples in reality, such as:

1. The Kentucky Meal is a combination mode, such as a chicken drumstick meal, which is usually made up of a chicken drumstick, a package of fries, a cup of cola, etc.

2. The same is true for an assembled desktop computer, which consists of a board, power supply, memory strip, graphics card, chassis, display, peripherals, etc.

The advantage of the combination mode is that a moulded product component is divided into separate parts, which can make many flexible products.

For example: Home desktop computers require relatively low configuration. At this time, you only need the motherboard + power supply + memory bar + chassis + Display + peripherals, and you do not need to configure a separate graphics card.

Chicken burger + chicken wings + sweet potato + cola can be configured with another set.

In our front-end area, typesetting is the most common contact. By combining different html structures + css styles into non-gorgeous web pages, we can also do this through combination mode.

Some people might ask why it is not so easy to write html and css directly when generating with js.Yes, but can different templates be generated very quickly by making different packages (modules) in combination mode?Greatly faster web page writing?

In this article, let's take a look at one of the most basic list news modules and see how to use the combination mode.Let's look at what we need to do first:

This is an unordered list with an a tag, very simple package (module)

1. First, we define the parent class, 2 attributes, 3 methods

 1 /***************Parent Start*********************************/
 2 var Layout = function () {
 3     this.children = [];
 4     this.element = null;
 5 }
 6 Layout.prototype = {
 7     init: function () {
 8         throw new Error('This method needs to be overridden');
 9     },
10     add: function () {
11         throw new Error('This method needs to be overridden');
12     },
13     getElement: function () {
14         throw new Error('This method needs to be overridden');
15     }
16 }
17 /***************Parent End***********************************/

This.elementis used to store the current element, and this.children is used to store the child elements below the current element

init method: tags, attributes, styles used to initialize elements

Add method: add child nodes below parent nodes

getElement: Get the current node

2. Here we need to use parasitic combinatorial inheritance

 1 function object(o) {
 2     var G = function () {
 3     };
 4     G.prototype = o;
 5     return new G();
 6 }
 7 function inheritPrototype(subObj, superObj) {
 8     var proObj = object(superObj.prototype); //Copy parent class superObj Prototype object
 9     proObj.constructor = subObj; //constructor Point to Subclass Constructor
10     subObj.prototype = proObj; //Give this object to the prototype object of the subclass again
11 }

3. Since the outermost layer of this news module is ul, we want to encapsulate a container class that generates the UL element

 1 /***************List Container Class Start***************************/
 2 var UlContainer = function (id, parent) {
 3     Layout.call(this);
 4     this.id = id;
 5     this.parent = parent;
 6     this.init();
 7 }
 8 inheritPrototype(UlContainer, Layout);
 9 UlContainer.prototype.init = function () {
10     this.element = document.createElement("ul");
11     this.element.id = this.id;
12     this.element.className = 'news-list';
13 }
14 UlContainer.prototype.add = function (child) {
15     this.children.push(child);
16     this.element.appendChild(child.getElement());
17     return this;
18 }
19 UlContainer.prototype.getElement = function () {
20     return this.element;
21 }
22 UlContainer.prototype.show = function () {
23     this.parent.appendChild(this.element);
24 }
25 /***************End of List Container Class***************************/

Overrides the parent class's method using parasitic combination inheritance, copies the parent class's attributes to the child class instance through the child class's borrowed constructor, and adds a show method whose purpose is to display the final template

4. Generating li elements

 1 /***************List item li starts***********************************/
 2 var LiTag = function (cName) {
 3     Layout.call(this);
 4     this.className = cName || '';
 5     this.init();
 6 }
 7 inheritPrototype(LiTag, Layout);
 8 LiTag.prototype.init = function () {
 9     this.element = document.createElement("li");
10     this.element.className = this.className;
11 }
12 LiTag.prototype.add = function (child) {
13     this.children.push(child);
14     this.element.appendChild(child.getElement());
15     return this;
16 }
17 LiTag.prototype.getElement = function () {
18     return this.element;
19 }
20 /***************End of list item li***********************************/

5. How to combine the picture with tag a

 1 /***************Picture News Start*************************/
 2 var ImageMsg = function (url, href, cName) {
 3     Layout.call(this);
 4     this.url = url || '';
 5     this.href = href || '#';
 6     this.className = cName || 'default';
 7     this.init();
 8 }
 9 inheritPrototype(ImageMsg, Layout);
10 ImageMsg.prototype.init = function () {
11     this.element = document.createElement("a");
12     var oImg = new Image();
13     oImg.src = this.url;
14     this.element.appendChild(oImg);
15     this.element.className = 'img-Layout ' + this.className;
16     this.element.href = this.href;
17 }
18 ImageMsg.prototype.add = function () {
19 }
20 ImageMsg.prototype.getElement = function () {
21     return this.element;
22 }
23 /***************Photo News End***************************/

6. Generate a simple combination of tags and content

 1 /***************Simple News Start*************************/
 2 var ATag = function (text, href, cName) {
 3     Layout.call(this);
 4     this.href = href || '#';
 5     this.className = cName || 'default';
 6     this.text = text || '';
 7     this.init();
 8 }
 9 inheritPrototype(ATag, Layout);
10 ATag.prototype.init = function () {
11     this.element = document.createElement("a");
12     this.element.href = this.href;
13     this.element.innerHTML = this.text;
14 }
15 ATag.prototype.add = function () {
16 }
17 ATag.prototype.getElement = function () {
18     return this.element;
19 }
20 /***************Simple News End*************************/

7. Generate headlines with categories

 1 /***************Category News Start*************************/
 2 var TypeMsg = function (text, href, type, cName, pos) {
 3     Layout.call(this);
 4     this.text = text || '';
 5     this.href = href || '#';
 6     this.type = type || '';
 7     this.pos = pos || 'left';
 8     this.className = cName || '';
 9     this.init();
10 }
11 inheritPrototype(TypeMsg, Layout);
12 TypeMsg.prototype.init = function () {
13     this.element = document.createElement("a");
14     if (this.pos === 'left') {
15         this.element.innerHTML = '[' + this.type + '] ' + this.text;
16     } else {
17         this.element.innerHTML = this.text + ' [' + this.type + ']';
18     }
19     this.element.href = this.href;
20     this.element.className = this.className;
21 }
22 TypeMsg.prototype.add = function () {
23 }
24 TypeMsg.prototype.getElement = function () {
25     return this.element;
26 }
27 /***************Category News End*************************/

8. Successfully completed, starting the call to generate the final module

 1 window.onload = function () {
 2     var oUlContainer = new UlContainer('Layout', document.body);
 3     oUlContainer.add(
 4         new LiTag('default').add(
 5             new TypeMsg('es6 Series Tutorials - New Class Grammar Actual Tab', 'http://Www.cnblogs.com/ghostwu/p/7465066.html','road to JS master-ghostwu','default','left')
 6         )
 7     ).add(
 8         new LiTag('default').add(
 9             new TypeMsg('Design Mode Series-Single Case Mode Implementation Modal Box', 'http://Www.cnblogs.com/ghostwu/p/7460301.html','road to JS master-ghostwu','default','left')
10         )
11     ).add(
12         new LiTag('default').add(
13             new TypeMsg('HTML Label interpreted as DOM node', 'http://Www.cnblogs.com/ghostwu/p/7455184.html','road to JS master-ghostwu','default','left')
14         )
15     ).add(
16         new LiTag('default').add(
17             new TypeMsg('HTML Label interpreted as DOM node', 'http://Www.cnblogs.com/ghostwu/p/7455184.html','road to JS master-ghostwu','default','left')
18         )
19     ).add(
20         new LiTag('default').add(
21             new ATag('Basic features, advantages and disadvantages of constructors', 'http://Www.cnblogs.com/ghostwu/p/7434609.html','The Road to a Master of js-ghostwu' )
22         )
23     ).show();
24 }