How to Learn JavaScript design patterns: intermediary pattern _ javascript skills

This article mainly introduces the intermediary mode in the JavaScript design mode. If you are interested in the JavaScript design mode, refer to it. I. Definition

Object-Oriented Design encourages behavior distribution to various objects and divides objects into smaller granularities, which helps enhance object reusability. However, the sharp increase in links between these fine-grained objects may in turn reduce their reusability.
The intermediary mode is used to remove the tight coupling between objects.

Ii. Example: purchase a product

• Suppose we are developing a page for purchasing a mobile phone. During the purchase process, we can select the color of the mobile phone and enter the quantity to purchase. At the same time, the page displays the input content. There is also a button to dynamically display the next operation (the color inventory is sufficient, show the next step; otherwise, the inventory is insufficient ).
  

Select color    Rose Gold    Tuhaojin  
Enter the purchase quantity: 
The color you selected is:The quantity you selected is:
Add to shopping cart

// Inventory var goods = {roseGold: 10, luxuryGold: 10}; var colorSelect = document. getElementById ("selColor"), numberInput = document. getElementById ("selNum"), colorInfo = document. getElementById ("conColor"), numberInfo = document. getElementById ("conNum"), nextBtn = document. getElementById ("nextBtn"); colorSelect. onchange = function () {var color = colorSelect. value, // color number = + numberInput. value ,// Quantity stock = goods [color]; // the inventory of the corresponding color colorInfo. innerHTML = color; if (! Color) {nextBtn. disabled = true; nextBtn. innerHTML = "select the phone color"; return ;}if (! Number | (number-0) | 0 )! = (Number-0) {nextBtn. disabled = true; nextBtn. innerHTML = "Please select the number of mobile phones"; return;} if (number> stock) {nextBtn. disabled = true; nextBtn. innerHTML = "inventory shortage"; return;} nextBtn. disabled = false; nextBtn. innerHTML = "add to shopping cart" ;};/* do the same for the number of purchases */

When another drop-down list box is added to the page, it indicates the memory of the mobile phone. The above code changes greatly.

3. Introduce the intermediary Model

All node objects only communicate with the intermediary.
When an event occurs in selColor, selMemory, or the selNum drop-down box, only the intermediary is notified that they have been changed, and they are passed as parameters to the intermediary, so that the intermediary can identify who has changed, and the rest is handed over to the intermediary object.

Select color:    Rose Gold    Tuhaojin  
Select memory:    16 GB    64 GB  
Enter the purchase quantity: 
The color you selected is:The memory you selected is:The quantity you selected is:
Add to shopping cart

// Inventory var goods = {"roseGold | 16G": 10, "roseGold | 32G": 10, "luxuryGold | 16G": 10, "luxuryGold | 32G": 10}; var colorSelect = document. getElementById ("selColor"), memorySelect = document. getElementById ("selMemory"), numberInput = document. getElementById ("selNum"), colorInfo = document. getElementById ("conColor"), memeryInfo = document. getElementById ("conMemory"), numberInfo = document. getElementById ("co NNum "), nextBtn = document. getElementById ("nextBtn"); var mediator = (function () {return {changed: function (obj) {var color = colorSelect. value, // color: memory = memorySelect. value, // Memory number = + numberInput. value, // quantity stock = goods [color + '|' + memory]; // the inventory of the corresponding color if (obj = colorSelect) {colorInfo. innerHTML = color;} else if (obj = memorySelect) {memeryInfo. innerHTML = memory;} else if (o Bj === numberInput) {numberInfo. innerHTML = number;} if (! Color) {nextBtn. disabled = true; nextBtn. innerHTML = "select the phone color"; return ;}if (! Memory) {nextBtn. disabled = true; nextBtn. innerHTML = "Please select the phone memory"; return ;}if (! Number | (number-0) | 0 )! = (Number-0) {nextBtn. disabled = true; nextBtn. innerHTML = "Please select the number of mobile phones"; return;} if (number> stock) {nextBtn. disabled = true; nextBtn. innerHTML = "inventory shortage"; return;} nextBtn. disabled = false; nextBtn. innerHTML = "add to shopping cart" ;};}) (); // event function colorSelect. onchange = function () {mediator. changed (this) ;}; memorySelect. onchange = function () {mediator. changed (this) ;}; numberInput. oninput = function () {mediator. changed (this );}

The intermediary mode is an implementation that caters to the dimit law.The dimit rule, also known as the minimum knowledge principle, refers to the principle that an object should understand other objects as little as possible. Avoid "fire in the city, affecting the fish pool ".

Disadvantages:The biggest drawback is that an intermediary object will be added in the system. Because of the complexity of interaction between objects, it is transferred to the complexity of the intermediary object, making the intermediary object often huge and difficult to maintain.

In general, if the complex coupling between objects makes it difficult to call and maintain, and these coupling degrees increase exponentially as the project changes, we can consider using the intermediary mode to refactor the code.

I hope this article will help you learn about javascript programming.