javascript-Decorator Mode

Decorator Mode notes
On the basis of not changing the original object,
By wrapping it up (adding properties or methods), the original object can meet the more complex requirements of the user.
Requirements are not immutable and demand is constantly improving to enhance the user experience
Demo instance: Add focus and blur events to the input box
In this instance, the input box only one or two, the new requirements do not feel trouble, when there are many input boxes to add new requirements, the implementation will be cumbersome, and the use of decorator mode can be very simple to complete

HTML code

1         <style>2 #container{width:800px;margin:100px Auto;}3 input{Margin-right:5px;}4 span{font-size:12px;Color:#999;}5         </style>6         <DivID= "Container">7             <inputname= "Uname"ID= "Uname"value=""placeholder= "Please enter user name"/><spanID= "Uname_demo_text">The user name starts with a letter, consists of letters, numbers, underscores, 3-16 bits in length</span><spanID= "Uname_warn_text"></span><BR/><BR/>8             <inputname= "Phone"ID= "Phone"value=""placeholder= "Please enter mobile phone number"/><spanID= "Phone_demo_text">Cell phone numbers start with 13, 14, 15, 18, and are made up of numbers with a length of 11 bits.</span><spanID= "Phone_warn_text"></span>9         </Div>

Legacy Event function

1             varUname=document.getelementbyid ("uname");2             varPhone=document.getelementbyid ("Phone");3             varUnamedemotext=document.getelementbyid ("Uname_demo_text");4             varUnamewarntext=document.getelementbyid ("Uname_warn_text");5             varPhonedemotext=document.getelementbyid ("Phone_demo_text");6             varPhonewarntext=document.getelementbyid ("Phone_warn_text");7Uname.onblur =function(){8                 varnamevalid=/^[a-za-z][a-za-z0-9_]{5,17}$/i;9                 if(!namevalid.test (Uname.value)) {TenUnamewarntext.innerhtml= "User name does not match the filling rule"; One}Else{ AUnamewarntext.innerhtml= "User name conforms to fill rule"; -                 } -             } thePhone.onblur =function(){ -                 varPhonevalid=/^1 (3|4|5|8) \d{9}$/i; -                 if(!phonevalid.test (Phone.value)) { -Phonewarntext.innerhtml= "mobile phone number does not meet the filling rules"; +}Else{ -Phonewarntext.innerhtml= "mobile number conforms to the filling rules"; +                 } A}

Decoration person

1             /*Decoration Person*/2             varDecorator=function(INPUT,FOCUSFN,BLURFN) {3                 //Get Event Source4                 varinput=document.getElementById (input);5                 //determine if the event source is bound to a focus event6                 if(typeofInput.onfocus = = = ' function '){7                     //Cache Event Source Original callback function8                     varOLDFOCUSFN =Input.onfocus;9                     //to define a new event for the event sourceTenInput.onfocus =function(){ One                         //Event Source Original callback function A OLDFOCUSFN (); -                         //New callback function - FOCUSFN (); the                     } -}Else{ -                     //Event Source Unbound event, add new callback function directly to event source -Input.onfocus =FOCUSFN; +                 } -                 //To determine if an event source is bound Blur event +                 if(typeofInput.onblur = = = ' function '){ A                     //Cache Event Source Original callback function at                     varOLDBLURFN =Input.onblur; -                     //to define a new event for the event source -Input.onblur =function(){ - OLDBLURFN (); - BLURFN (); -                     } in}Else{ -                     //Event Source Unbound event, add new callback function directly to event source toInput.onblur =BLURFN; +                 } -}

New callback function

1Decorator (' uname ',function(){2                 //new Focus callback function3Unamedemotext.style.display= "None";4},function(){5                 //new Blur callback function6Unamewarntext.style.color= "#f03";7             });8Decorator (' phone ',function(){9                 //new Focus callback functionTenPhonedemotext.style.display= "None"; One},function(){ A                 //new Blur callback function -Phonewarntext.style.color= "#f03"; -});

Code test:

javascript-Decorator Mode