JavaScript Mediator Pattern Definition and Detailed Explanation of How to Reference Code-JS Tutorial-php.cn

Object-oriented design encourages the distribution of behaviors to various objects and divides objects into smaller granularities, which helps enhance the reusability of objects. However, the proliferation of connections between these fine-grained objects may in turn reduce their reusability.

The role of the mediator pattern is to relieve the tight coupling between objects.

Example:

Suppose we are developing a page to purchase a mobile phone. During the purchase process, you can select the color of the mobile phone and enter the purchase quantity, and the page can display the input accordingly. content. There is also a button that dynamically displays the next step (if the stock of this color is sufficient, the next step is displayed; otherwise, the stock is insufficient).

请选择颜色

请输入购买数量：

您选择的颜色为：您选择的数量为：

Copy after login

// 库存量 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, // 颜色 number = +numberInput.value, // 数量 stock = goods[color]; // 对应颜色的库存量 colorInfo.innerHTML = color; if(!color) { nextBtn.disabled = true; nextBtn.innerHTML = "请选择手机颜色"; return; } if(!number || (((number - 0) | 0) !== (number - 0))) { nextBtn.disabled = true; nextBtn.innerHTML = "请选择手机数量"; return; } if( number > stock) { nextBtn.disabled = true; nextBtn.innerHTML = "库存不足"; return; } nextBtn.disabled = false; nextBtn.innerHTML = "加入购物车"; }; /* 购买数量做同样处理 */

Copy after login

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

Introducing the intermediary mode

All node objects only communicate with the intermediary.
When an event occurs in the drop-down selection box selColor, selMemory or text box selNum, the mediator will only be notified that they have been changed, and at the same time, pass itself as a parameter to the mediator, so that the mediator can identify who has changed. The mediator object does the rest.

请选择颜色：

请选择内存：

请输入购买数量：

您选择的颜色为：您选择的内存为：您选择的数量为：

Copy after login

// 库存量 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("conNum"), nextBtn = document.getElementById("nextBtn"); var mediator = (function() { return { changed: function(obj) { var color = colorSelect.value, // 颜色 memory = memorySelect.value,// 内存 number = +numberInput.value, // 数量 stock = goods[color + '|' + memory]; // 对应颜色的库存量 if(obj === colorSelect) { colorInfo.innerHTML = color; }else if(obj === memorySelect) { memeryInfo.innerHTML = memory; }else if(obj === numberInput) { numberInfo.innerHTML = number; } if(!color) { nextBtn.disabled = true; nextBtn.innerHTML = "请选择手机颜色"; return; } if(!memory) { nextBtn.disabled = true; nextBtn.innerHTML = "请选择手机内存"; return; } if(!number || (((number - 0) | 0) !== (number - 0))) { nextBtn.disabled = true; nextBtn.innerHTML = "请选择手机数量"; return; } if( number > stock) { nextBtn.disabled = true; nextBtn.innerHTML = "库存不足"; return; } nextBtn.disabled = false; nextBtn.innerHTML = "加入购物车"; } }; })(); // 事件函数 colorSelect.onchange = function() { mediator.changed(this); }; memorySelect.onchange = function() { mediator.changed(this); }; numberInput.oninput = function() { mediator.changed(this); }

Copy after login

Disadvantages:The biggest disadvantage is that an intermediary object will be added to the system, because The complexity of interactions between objects is transferred to the complexity of intermediary objects, making intermediary objects often huge and difficult to maintain.

Generally speaking, if the complex coupling between objects does cause difficulties in calling and maintenance, and these coupling degrees increase exponentially as the project changes, then we can consider using the mediator pattern. rebuild code.

The above is the detailed content of JavaScript Mediator Pattern Definition and Detailed Explanation of How to Reference Code. For more information, please follow other related articles on the PHP Chinese website!