JavaScript object-oriented is totally accidental, because most of the time I work in a non-graphic environment, sometimes when I write JavaScript and ajax, even when I get involved in the work of the web Client, the most important thing is writing a function. I have never considered using the advanced JavaScript object-oriented skills. One day, I began to piece together DOM labels in js, and I had to keep piecing together. I found that my code had become increasingly ugly, not only the problem of concise code, sometimes it also causes performance problems. In the long run, in less than three months, God will not know what I have written. The purpose of this article is to record the usage experience.
First, let's take a look at the spam code that prompted me to change my JavaScript writing habits. In practice, testing, debugging, and even formal projects, a lot of the following code is filled.
The Code is as follows:
Function finduser (userId)
{
}
Function showmessage (msg)
{
Var message = "Prompt, error, error cause" + msg;
Alert (message );
}
Function append (obj)
{
Var onclick = "createdom ()";
Var title = "hello ";
$ (Obj). append ("" + title + "");
}
Don't tell me that you have never seen the above Code. To be honest, the above Code is indeed fast and simple to call. If the first two functions are not enough to trigger your indignation, so the third function should make you feel a little eager to greet the creator of the Code. Yes, the third function directly triggers my decision to use object-oriented.
In fact, I can transform the third function into the following.
The Code is as follows:
Function append (obj)
{
Var a = document. craeteElement ("");
A. title = "hello ";
A. href = "javascript: void (0 );";
A. innerHTML = a. title;
A. click = function () {createdom ();};
$ (Obj). append ();
}
So how? Make progress. Well, this is the code I want, but it is not concise enough. I hope that I can encapsulate the created DOM object into a class and install the above three methods into an object. Well, it is very easy to do it, this kind of work does not need to search for code and examples online. You can simply apply the object-oriented thinking of C.
The first step is to encapsulate the above three methods into an object. The encapsulation is very simple. You should directly use the code without making too much nonsense.
Three encapsulated Functions
The Code is as follows:
User = {
Function finduser (userId)
{
},
Function showmessage (msg)
{
Var message = "Prompt, error, error cause" + msg;
Alert (message );
},
Function append (obj)
{
Var a = document. craeteElement ("");
A. title = "hello ";
A. href = "javascript: void (0 );";
A. innerHTML = a. title;
A. click = function () {createdom ();};
$ (Obj). append ();
}
}
You only need to declare a User variable to store the preceding three methods. Different methods are separated by commas. Note that the User is a static class at this time, no constructor or constructor private (I guess). It cannot be new anyway.
Next, I create a static class that encapsulates and creates DOM objects. The Code is as follows:
The Code is as follows:
CreateElement = {
Element = function (targetName) {return document. createElement (targetName );},
A = document. createElement ("")
}
This is quite simple, so I can test whether the above CreateElement object works normally. This test is conducted in the append method. The append method is transformed into the following code.
The Code is as follows:
Function append (obj)
{
Var a = createElement.;
A. title = "hello ";
A. href = "javascript: void (0 );";
A. innerHTML = a. title;
A. click = function () {createdom ();};
$ (Obj). append ();
}
At present, append works quite well. Well, I need to make a little change. I need to create three a s in the append function and add them to the obj object in sequence, the Code is as follows:
Code
The Code is as follows:
Function append (obj)
{
For (I = 0; I <3; I ++)
{
Var a = createElement.;
A. title = "hello ";
A. href = "javascript: void (0 );";
A. innerHTML = a. title;
A. click = function () {createdom ();};
$ (Obj). append ();
}
}
The final result is that the obj object has only one a that I don't understand. This a makes me feel that I have returned to the embrace of C #. What a wonderful thing. After analysis, when I use Var a = CreateElement. a;
The first call is in CreateElement. when a is used to obtain object a, the document. createElement ("a") has already resident object a in the memory, no matter how I call CreateElement. a actually only gets a reference of a in the memory, and all changes are actually the same object. This is the special feature of the static class. However, when I call CreateElement. when the element function is used to obtain an object, each time I get a new object, the method does not save the object reference. This is positive. The solution is to call CreateElement. element function to create new objects, but this method is not recommended for object-oriented methods.
Another better solution is to use non-static classes, that is, the entity class method. The method for creating non-static classes is also quite simple. The Code is as follows:
The Code is as follows:
CreateElement = function (){
Element = function (targetName) {return document. createElement (targetName );};
A = document. createElement ("");
}
Directly declare the createElement object and make it a constructor. The members are separated by semicolons. Of course, if you like it, you can directly write it like this, which does not have the same effect.
The Code is as follows:
Function createElement (){
Element = function (targetName) {return document. createElement (targetName );};
A = document. createElement ("");
}
After the above declaration, we can use the createElement class in the append function like C # To create a DOM object.
Function
The Code is as follows:
Function append (obj)
{
For (I = 0; I <3; I ++)
{
Var ele = new createElement ();
Var a = ele.;
A. title = "hello ";
A. href = "javascript: void (0 );";
A. innerHTML = a. title;
A. click = function () {createdom ();};
$ (Obj). append ();
}
}
In this way, each time new createElement () is a new object, there is no reference problem.
In fact, what we mentioned above is the difference between static and non-static classes in Javascript. Of course, we also know that there are still some differences in the efficiency of using static and non-static classes, in addition, it is certainly more convenient to call static classes. If you do not care about the reference conflicts, I think static classes should be the first choice.
