Home > Developer > Web Develop
My understanding of design patterns is that it is an advance solution to the business code. It means that design patterns exist before there is no real business, and this is obvious. Design pattern is a long-term business summary of the general applicability of the solution.
Personally, writing too much imperative programming code, the so-called imperative code is how the business needs to write what kind of function, such as adding a click event, such as a validation and other technician. Writing is seldom to stand in the angle of design mode or the perspective of the previous to improve the code.
Not to find objective reasons, recently began to focus on design patterns, try to improve development from the perspective of design patterns.
Before starting the singleton design mode, we must first understand the role of apply and call in JS.
The direct effect of apply and call is to run the function first, followed by whether the object is changed, and the way of borrowing and using the method is generated. The difference between apply and call is that the former receives the array as the second parameter, and call takes over the parameter list. This distinction does not specifically say that their role
1) running function chestnut
1 // Run function 2 function Test () {3 alert (1); 4 }5 test.apply ();Functions can be run without apply, but in some cases the use of apply will appear tall.
2) The This in apply (this,arguments) does not change, that is, the direct use of the object method, there is no borrowing concept
1 var arr=[1,2,3]; 2 var max=math.max.apply (null, arr); 3 Alert (max);
3) This change, this time is the use of this object with the help of other object methods
1 /*Define a human*/2 function person (name, age) {3 This. Name =name;4 This. Age =Age ;5 }6 /*define a student class*/7 function Student (name, age, Grade) {8Person.apply ( This, arguments);9 This. grade =grade;Ten } One //Create a Student class A varStudent =NewStudent ("Qian", +,"First Grade"); - //Test -Alert"Name:"+ Student.name +"\ n"+"Age :"+ Student.age +"\ n"+"Grade:"+student.grade); the //test Results Name:qian age:21 Grade: First grade - //because the object of this is changed during execution, this is the method of the Persion object.
After the introduction of apply and this is a singleton design pattern interpretation.
In the case of a single design pattern, the core is to create and return only one object. There is a concept of caching because there is only one object. This article uses the other person's case, can say clearly the question is the good case;
1<! DOCTYPE html>2"en">3 45<meta charset="UTF-8">6<title> Simple Interest Mode applications </title>78 9<body>Ten<div> One<button id="openbtn"> A Create button -</button> -<script type="Text/javascript"> the //design mode core of the satay? - varGetsingle =function (FN) { - varresult; - returnfunction () { + - return(Result | | (Result = Fn.apply ( This, arguments))); + } A } at - //Create div code for the business code - varCreatediv =function () { - vardiv = document.createelement ("Div"); -div.innerhtml ="I am the object of creation"; -Console.warn (' One');//multiple clicks only output once in returnDiv; - } to + varCreatesinglediv =Getsingle (creatediv); - //triggering events for the business code thedocument.getElementById ("openbtn"). onclick =function () { * vardiv =Createsinglediv (); $document.getElementsByTagName ("Body")[0].appendchild (div);Panax Notoginseng } -</script> the +</div> A</body> the +The above | | There is a small trick, that is, the nearest calculation, if the result has a value of the back will not be calculated. And the above apply just works.
The singleton mode is said to be of much use, and I now know how to create a pop-up window, create a mask layer, and achieve the one function effect of jquery.
Finally, the design pattern core code uses closures, closures can save the scope chain, resulting in static variable changes. Therefore, the effect of caching is generated.
This article concludes.
A single example mode of JS design mode
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
