In-depth analysis of JavaScript design patterns (1)

I have been thinking about what is the best thing to share with you this month. The original plan was to write some JS content or AJAX content in HTML5. However, due to the expressive ability and time, I also have personal work problems. Please wait for the next month to share it.

Old Rules: You should write the text before you begin.The purpose and precautions of this Article:

1. First of all, I have been engaged in front-end development, so I do not know much about other JavaScript languages. Therefore, the article will only demonstrate this in the perspective of the JavaScript language;

2. in fact, I have not used many models in my project, and my understanding of the concepts of models is not so abstract. Therefore, if the interviewer recently asked questions related to models, I felt very depressed during the Q & A process, and many things were unclear, so I found some relevant information to share this article;

3. the JavaScript mode is inseparable from front-end work and growth, because it is indeed not a simple topic, so I can only try my best to illustrate it with simple expressions and examples, and there are many masters in the garden, therefore, I hope you can speak enthusiastically (for a limited level, please give me more advice and hope you can speak with your own words );

4. since this article only reminds me of the role of an introduction and explanation, and does not intend to conduct detailed analysis on each mode, each mode uses only one or two examples, the expression of this example may not be optimal or not comprehensive enough. If you are not satisfied, you can search for relevant information;

5. you need to stick to everything you do. The same is true for writing a blog. Hey hey, there is at least one article every month (the article is really long and I hope it will be helpful to my friends. The important part is described in the preface, you can select an in-depth mode of interest ).

6. You are welcome to reprint it, but please indicate the source. Thank you.

To learn about the JavaScript design pattern, we need to know some necessary knowledge points: (the content is relatively basic. skip this step)

JavaScript Closure

1. The most common method of closure is to return an inline function (what is an inline function? Is the function declared inside the function );

2. There is a scope and execution environment issue in JavaScript. variables inside the function cannot be accessed outside the function, but global variables can be obtained inside the function. For various reasons, we sometimes need to get the internal variables of the function, but we cannot get them using the conventional method. In this case, we can create a closure to access the variable externally.

3. The closure is mainly used to read the internal variables of the function mentioned above. It can also be used to keep these variables in the memory.

4. Use closures. Because the variables are stored in the memory, the memory will be consumed, so the closures cannot be abused. The solution is to delete all unused local variables before exiting the function.

Finally, let's use the code of the previous closure, which is more intuitive.

 
 

  
  
function f(){  
  
  
 var n = 999;  
  
  
 function f1(){  
  
  
   alert(n+=1);  
  
  
  }  
  
  
 return f1;  
  
  
}  
  
  
var result = f();  
  
  
result(); // 1000  
  
  
result(); // 1001  
  
  
result(); // 1002 
 
 

Encapsulation:By declaring a method or attribute as private, you can keep the implementation details of the object confidential to other objects to reduce the coupling between objects, data integrity can be maintained and the modification methods can be restricted. This makes the code more reliable and easier to debug. Encapsulation is the cornerstone of object-oriented design.

Although JavaScript is an object-oriented language, it does not have any internal mechanism to declare members as public or private, so we can only implement this feature on our own.The following describes what private attributes and methods are, what are privileged attributes and methods, what are public attributes and methods, and what are public static attributes and methods through a complete set of code.

Private attributes and methods:A function has a scope. variables declared using the var keyword in a function cannot be accessed from outside. Private attributes and methods are essentially variables that you want to be inaccessible from outside the object.

Privileged attributes and methods:This keyword is used to create attributes and Methods. Because these methods are defined in the scope of the constructor, they can access private attributes and methods; only methods that require direct access to private members should be designed as privileged methods.

Common attributes and methods:Directly link properties and methods on prototype. Private Members in the constructor cannot be accessed. privileged members can be accessed. Subclass inherits all common methods.

Static attributes and methods:The best way to understand it is to think of it as a namespace, which is actually equivalent to using the constructor as a namespace.

 
 

  
  
/* -- Encapsulate --*/
  
  
Var _ packaging = function (){
  
  
// Private attributes and Methods
  
  
Var name = 'darren ';
  
  
Var method1 = function (){
  
  
//...
  
  
}
  
  
// Privileged attributes and Methods
  
  
This. title = 'javascript Design patterns ';
  
  
This. getName = function (){
  
  
Return name;
  
  
}
  
  
}
  
  
// A total of static attributes and Methods
  
  
_ Packaging. _ name = 'darren Code ';
  
  
_ Packaging. alertName = function (){
  
  
Alert (_ packaging. _ name );
  
  
}
  
  
// Common attributes and Methods
  
  
_ Packaging. prototype = {
  
  
Init: function (){
  
  
//...
  
  
}
  
  
}