_javascript Techniques for learning the intermediary pattern of JavaScript design patterns

Source: Internet
Author: User

I. Definition

Object-oriented design encourages the distribution of behavior to various objects, dividing objects into smaller granularity, which helps to enhance the reusability of objects. However, because of the proliferation of these fine-grained objects, they may in turn reduce their reusability.
The role of mediator mode is to release the tight coupling relationship between object and object.

Ii. Example: purchase of goods

    • Suppose we are developing a page to buy a mobile phone, the purchase process, you can choose the color of the phone and enter the purchase quantity, and the page can correspond to show the input content. There is also a button to dynamically display the next action (the color inventory is sufficient to show the next step; otherwise, the inventory is not sufficient).
<div>
  <span> Please select color </span> 
  <select id= "Selcolor" >
    <option value= "Rosegold" > Rose gold </option>
    <option value= "Luxurygold" > Tyrants gold </option>
  </select>
</div >
<div>
  <span> Please enter the purchase quantity:</span>
  <input type= "text" id= "Selnum" 
/> </ div>
<div>
  <span> The colors you choose are: </span><strong id= "Concolor" ></strong>
  <span> The quantity you choose is: </span><strong id= "Connum" ></strong>
</div>

< Button id= "nextbtn" > Add Shopping Cart </button>

//inventory var goods = {rosegold:10, luxurygold:10}; var colorselect = document.getElementById ("Selcolor"), Numberinput = document.getElementById ("SelNum"), ColorInfo = do Cument.getelementbyid ("Concolor"), Numberinfo = document.getElementById ("Connum"), nextbtn = Document.getElementById

("nextbtn"); Colorselect.onchange = function () {var color = colorselect.value,//color number = +numberinput.value,//Quantity Stoc    k = Goods[color];
  The corresponding color of the inventory colorinfo.innerhtml = color;
    if (!color) {nextbtn.disabled = true;
    nextbtn.innerhtml = "Please choose mobile phone color";
  Return } if (!number | | (((number-0) | 0)!== (number-0)))
    {nextbtn.disabled = true;
    nextbtn.innerhtml = "Please choose the number of mobile phone";
  Return
    } if (number > stock) {nextbtn.disabled = true;
    nextbtn.innerhtml = "Insufficient stock";
  Return
  } nextbtn.disabled = false;

nextbtn.innerhtml = "Add Shopping cart";

}; /* Purchase quantity do the same processing * * * 

This code changes a lot when you add another Drop-down list box on your page that represents your phone's memory.

Iii. Introduction of intermediary mode

All node objects communicate with the mediator only.
The Drop-down selection box Selcolor, selmemory, or text box Selnum event behavior occurs, only notifies the mediator that they have been changed, and as a parameter to the intermediary, so that the intermediary to identify who has changed, the rest of the matter to the intermediary object to complete.

 <div> <span> Please select a color:</span> <select id= "Selcolor" > <o Ption value= "Rosegold" > Rose gold </option> <option value= "Luxurygold" > Tyrants gold </option> </select> &L t;/div> <div> <span> Please select memory:</span> <select id= "Selmemory" > <option value= "16G" >16g </option> <option value= "64G" >64G</option> </select> </div> <div> <span> Please enter purchase quantity:</span> <input type= "text" id= "Selnum"/> </div> <div> <span> The colors you choose are: </span& Gt;<strong id= "concolor" ></strong> <span> the memory you selected is: </span><strong id= "Conmemory" >< /strong> <span> The quantity you choose is: </span><strong id= "Connum" ></strong> </div> <button id= " Nextbtn "> Add Shopping cart </button> 
Library stock var goods = {"rosegold|16g": Ten, "rosegold|32g": Ten, "luxurygold|16g": Ten, "luxurygold|32g": 10}; var colorselect = document.getElementById ("Selcolor"), Memoryselect = document.getElementById ("SelMemory"), number Input = document.getElementById ("Selnum"), Colorinfo = document.getElementById ("concolor"), Memeryinfo = document. getElementById ("Conmemory"), Numberinfo = document.getElementById ("Connum"), nextbtn = document.getElementById ("Ne

Xtbtn "); var mediator = (function () {return {changed:function (obj) {var color = colorselect.value,//Color Memo    ry = memoryselect.value,//Memory Number = +numberinput.value,//Quantity stock = Goods[color + ' | ' + memory];
      The corresponding color inventory amount 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 = "Please choose mobile phone color";
      Return
        } if (!memory) {nextbtn.disabled = true;
        nextbtn.innerhtml = "Please choose Mobile Memory";
      Return } if (!number | | (((number-0) | 0)!== (number-0)))
        {nextbtn.disabled = true;
        nextbtn.innerhtml = "Please choose the number of mobile phone";
      Return
        } if (number > stock) {nextbtn.disabled = true;
        nextbtn.innerhtml = "Insufficient stock";
      Return
      } nextbtn.disabled = false;
    nextbtn.innerhtml = "Add Shopping cart";
}
  };

})();
event function Colorselect.onchange = function () {mediator.changed (this);
Memoryselect.onchange = function () {mediator.changed (this);

 Numberinput.oninput = function () {mediator.changed (this);}

The intermediary pattern is a kind of realization that caters to the Dimitri Law. The Dimitri rule is also called the minimum knowledge principle, which means that an object should know as little as possible about another object. Avoid "Chengmenthe, affecting fish ponds".

disadvantage: The biggest disadvantage is that the system will add a mediation object, because the complexity of interaction between objects, transferred to the complexity of intermediary objects, so that the intermediary object is often huge, difficult to maintain.

In general, if complex coupling between objects does cause difficulty in invocation and maintenance, and the coupling increases exponentially as the project changes, we can consider refactoring the code with the mediator pattern.

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.