Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to write the code of javascript intermediary mode". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to write the code of javascript intermediary mode" can help you solve the problem.

Intermediary objects practice the principle of least knowledge, which means that an object knows as little about other objects as possible, so as to minimize the degree of coupling between objects. In this way, each object only needs to pay attention to its own implementation logic, and the interaction between objects is realized and maintained by the intermediary object.

Demand background:

On the mobile phone purchase page, in the purchase process, you can select the color of the phone and enter the purchase quantity, while the page has two display areas to show the user the color and quantity you have just selected. There is also a button that dynamically displays the next step. We need to query the corresponding inventory of the color phone. If the inventory is less than the quantity purchased this time, the button will be disabled and show that the inventory is insufficient. Otherwise, the button can be clicked and displayed to put into the shopping cart.

Intermediary mode purchase item selection color: please select red and blue input purchase quantity: you have chosen the color:

You entered the quantity:

Please select the phone color and purchase quantity / / the most rudimentary words var colorSelect = document.getElementById ('colorSelect'), numberInput = document.getElementById (' numberInput'), colorInfo = document.getElementById ('colorInfo'), numberInfo = document.getElementById (' numberInfo'), nextBtn = document.getElementById ('nextBtn') Var goods = {'red': 3,' blue': 6} colorSelect.onchange = function () {var color = this.value, number = numberInput.value, stock = goods [color] ColorInfo [XSS _ clean] = color; if (! color) {nextBtn.disabled = true; nextBtn [XSS _ clean] = 'Please choose the phone color'; return } if (((number-0) | 0)! = = number-0) {/ / whether the purchase quantity entered by the user is a positive integer nextBtn.disabled = true; nextBtn [XSS _ clean] = 'Please enter the correct purchase quantity'; return;} if (number > stock) {/ / the currently selected quantity is greater than the inventory nextBtn.disabled = true NextBtn [XSS _ clean] = 'insufficient inventory'; return;} nextBtn.disabled = false; NextBtn [XSS _ clean] = 'put it in the shopping cart';} numberInput.oninput = function () {var color = colorSelect.value, number = this.value, stock = goods [color] colorInfo [clean] = color; if (! color) {nextBtn.disabled = true NextBtn [XSS _ clean] = 'Please select mobile phone color'; return;} if (((number-0) | 0)! = = number-0) {/ / whether the purchase quantity entered by the user is a positive integer nextBtn.disabled = true; NextBtn [XSS _ clean] = 'Please enter the correct purchase quantity'; return } if (number > stock) {/ / the currently selected quantity is greater than the inventory nextBtn.disabled = true; nextBtn [XSS _ clean] = 'insufficient inventory'; return;} nextBtn.disabled = false; nextBtn [XSS _ clean] = 'put in the shopping cart';}

In the previous example, the relationships between objects are highly coupled, but the two input boxes are fine, but if there are multiple, the interconnections are very complex, and the intermediary pattern should be considered at this point.

Intermediary mode purchase item selection color: please choose red and blue choose memory: please select 32g 16g input purchase quantity: you have chosen the color:

You have selected memory:

You entered the quantity:

Please select the color, memory and purchase quantity of the phone var goods = {'red | 32 Gateway: 3,' red | 16 Globe: 0, 'blue | 32 GB: 1,' blue | 16 Gateway: 6} / / introduce intermediary var mediator = (function () {var colorSelect = document.getElementById ('colorSelect'), memorySelect = document.getElementById (' memorySelect'), numberInput = document.getElementById ('numberInput')) ColorInfo = document.getElementById ('colorInfo'), memoryInfo = document.getElementById (' memoryInfo'), numberInfo = document.getElementById ('numberInfo'), nextBtn = document.getElementById (' nextBtn') Return {changed: function (obj) {var color = colorSelect.value, memory = memorySelect.value, number = numberInput.value, stock = goods [color +'|'+ memory] If (obj = = colorSelect) {/ / if you change the color drop-down box ColorInfo [XSS _ clean] = color;} else if (obj = = memorySelect) {numberyInfo [XSS _ clean] = memory;} else if (obj = = numberInput) {numberInfo[ XSS _ clean] = number } if (! color) {nextBtn.disabled = true; nextBtn [XSS _ clean] = 'Please choose mobile phone color'; return;} if (! memory) {nextBtn.disabled = true NextBtn [XSS _ clean] = 'Please select mobile phone memory'; return;} if (! number) {nextBtn.disabled = true; NextBtn [XSS _ clean] = 'Please fill in the number of mobile phones'; return } if (((number-0) | 0)! = = number-0) {/ / whether the purchase quantity entered by the user is a positive integer nextBtn.disabled = true; nextBtn [XSS _ clean] = 'Please enter the correct purchase quantity'; return } if (number > stock) {/ / the current selected quantity is greater than the inventory nextBtn.disabled = true; nextBtn [XSS _ clean] = 'insufficient inventory'; return;} nextBtn.disabled = false NextBtn [XSS _ clean] = 'put it in the shopping cart' }) () colorSelect.onchange = function () {mediator.changed (this)} memorySelect.onchange = function () {mediator.changed (this)} numberInput.oninput = function () {mediator.changed (this)} / / later, if you want to add options such as mobile phone CPU, you just need to add the corresponding configuration to the intermediary object.

In the actual development, we should still pay attention to the pros and cons. Because the intermediary object contains the complexity of the interaction between objects, the maintenance cost may also be high. In actual development, the best goal is to complete the project delivery quickly, rather than over-design and stacking mode. Sometimes coupling between objects is also necessary, and the intermediary pattern is considered only when complex coupling between objects has indeed made invocation and maintenance difficult.

That's all for "how to write the code for the javascript intermediary pattern". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.