Until one day, I started to piece together DOM tags in js, and I needed to piece them together constantly. I found that my code became increasingly ugly, not only a problem with the concise code, but also sometimes even caused performance problems. If this continues, God will not know what I have written within three months. The purpose of this article is entirely to record the experience of using it.
First of all, let’s take a look at the junk code that prompted me to change my habit of writing JavaScript. In practice, testing, debugging, and even formal projects, there is a lot of the following code.
Function finduser(userId)
{
}
Function showmessage(msg)
{
Var message="Tip, something went wrong, the reason for the error"+msg;
Alert(message);
}
Function append(obj)
{
Var onclick=”createdom()”;
Var title="Hello";
$(obj).append(“<a href='javascript:void(0)' onclick='”+onclick+”' title='”+title+”'>”+title+”</a>”);
}
Don't tell me that you have never seen the above code. To be honest, the above code is indeed written quickly and is simple to call. If the first two functions are not enough to arouse your indignation, then the third function should make you feel a little urge to say hello to the creator of this code. Yes, the third function was directly touched and sent. I decided to use object-oriented.
In fact, I can completely transform the third function into the following.
function append(obj)
{
var a=(“a”);
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
How about this? Have progressed, OK, this is the code I want, but it's not concise enough. I hope to encapsulate the creation of DOM objects into a class and load the above three methods into an object; well, it is very simple to do it. This kind of work does not require searching for code and examples online, and can be completed directly by applying object-oriented thinking of C#.
First of all, encapsulate the above three methods into an object. Encapsulation is very simple. I don’t need to talk nonsense, just upload the code.
Three functions encapsulated
User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message="Tip, something went wrong, the reason for the error"+msg;
Alert(message);
},
Function append(obj)
{
Var a=(“a”);
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
}
You only need to declare a User variable to store the above three methods. Different methods are separated by commas. It should be noted that at this time, the User is a static class, without a constructor or a constructor private (I guessed), and it cannot be new anyway.
Secondly, I create a static class that encapsulates the creation of DOM objects, the code is as follows:
createElement={
element=function(targetName){return (targetName);},
a=document. createElement(“a”)
}
It's quite simple, so I can test whether the CreateElement object above works properly. This test is done in the append method. The append method is again transformed into the following code.
function append(obj)
{
Var a= createElement .a;
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
At the moment it seems that append works quite well, well, I need to make a little change, I need to create three a in the append function and add it to the obj object in sequence, the code is as follows:
Code
function append(obj)
{
For(i=0;i<3;i++)
{
Var a= createElement .a;
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
}
The final result is that only one a is obtained in the obj object. I don’t understand it very much. This a makes me feel that I am back in the arms of C#. How beautiful it is. After analysis, when I pass Var a= CreateElement .a;
When I get the object a for the first time, the ("a") in the a property has already resided the object a in memory. After that, no matter how I call it, I actually just get a reference to a in memory, and the changed object is actually the same object. This is the special thing about static classes. However, when I get the object by calling the function, every time I get a new object, and the method will not save the object reference. This is certain. The solution is to create a new object by calling the function, but this method is not object-oriented.
Another better solution is to use non-static classes, that is, entity classes, and the way to create non-static classes is also quite simple. The code is as follows:
createElement=function(){
element=function(targetName){return (targetName);};
a=document. createElement(“a”);
}
Directly declare the createElement object and have a constructor, and separate the members by semicolons. Of course, if you like, you can write it directly like this, and there is no same effect.
function createElement (){
element=function(targetName){return (targetName);};
a=document. createElement(“a”);
}
After the above statement, we can use the createElement class in the append function like C# to create DOM objects.
function
function append(obj)
{
for(i=0;i<3;i++)
{
var ele=new createElement();
var a=;
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
}
In this way, every time new createElement() is a new object, and there is no reference problem.
In fact, the above mentioned is the difference between static classes and non-static classes in Javascript; of course, it is also known from this that there are still some differences in efficiency in using static classes and non-static classes, and it is definitely more convenient when calling static classes. If you don’t care about reference conflict issues, I think static classes should be the first choice.
First of all, let’s take a look at the junk code that prompted me to change my habit of writing JavaScript. In practice, testing, debugging, and even formal projects, there is a lot of the following code.
Copy the codeThe code is as follows:
Function finduser(userId)
{
}
Function showmessage(msg)
{
Var message="Tip, something went wrong, the reason for the error"+msg;
Alert(message);
}
Function append(obj)
{
Var onclick=”createdom()”;
Var title="Hello";
$(obj).append(“<a href='javascript:void(0)' onclick='”+onclick+”' title='”+title+”'>”+title+”</a>”);
}
Don't tell me that you have never seen the above code. To be honest, the above code is indeed written quickly and is simple to call. If the first two functions are not enough to arouse your indignation, then the third function should make you feel a little urge to say hello to the creator of this code. Yes, the third function was directly touched and sent. I decided to use object-oriented.
In fact, I can completely transform the third function into the following.
Copy the codeThe code is as follows:
function append(obj)
{
var a=(“a”);
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
How about this? Have progressed, OK, this is the code I want, but it's not concise enough. I hope to encapsulate the creation of DOM objects into a class and load the above three methods into an object; well, it is very simple to do it. This kind of work does not require searching for code and examples online, and can be completed directly by applying object-oriented thinking of C#.
First of all, encapsulate the above three methods into an object. Encapsulation is very simple. I don’t need to talk nonsense, just upload the code.
Three functions encapsulated
Copy the codeThe code is as follows:
User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message="Tip, something went wrong, the reason for the error"+msg;
Alert(message);
},
Function append(obj)
{
Var a=(“a”);
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
}
You only need to declare a User variable to store the above three methods. Different methods are separated by commas. It should be noted that at this time, the User is a static class, without a constructor or a constructor private (I guessed), and it cannot be new anyway.
Secondly, I create a static class that encapsulates the creation of DOM objects, the code is as follows:
Copy the codeThe code is as follows:
createElement={
element=function(targetName){return (targetName);},
a=document. createElement(“a”)
}
It's quite simple, so I can test whether the CreateElement object above works properly. This test is done in the append method. The append method is again transformed into the following code.
Copy the codeThe code is as follows:
function append(obj)
{
Var a= createElement .a;
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
At the moment it seems that append works quite well, well, I need to make a little change, I need to create three a in the append function and add it to the obj object in sequence, the code is as follows:
Code
Copy the codeThe code is as follows:
function append(obj)
{
For(i=0;i<3;i++)
{
Var a= createElement .a;
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
}
The final result is that only one a is obtained in the obj object. I don’t understand it very much. This a makes me feel that I am back in the arms of C#. How beautiful it is. After analysis, when I pass Var a= CreateElement .a;
When I get the object a for the first time, the ("a") in the a property has already resided the object a in memory. After that, no matter how I call it, I actually just get a reference to a in memory, and the changed object is actually the same object. This is the special thing about static classes. However, when I get the object by calling the function, every time I get a new object, and the method will not save the object reference. This is certain. The solution is to create a new object by calling the function, but this method is not object-oriented.
Another better solution is to use non-static classes, that is, entity classes, and the way to create non-static classes is also quite simple. The code is as follows:
Copy the codeThe code is as follows:
createElement=function(){
element=function(targetName){return (targetName);};
a=document. createElement(“a”);
}
Directly declare the createElement object and have a constructor, and separate the members by semicolons. Of course, if you like, you can write it directly like this, and there is no same effect.
Copy the codeThe code is as follows:
function createElement (){
element=function(targetName){return (targetName);};
a=document. createElement(“a”);
}
After the above statement, we can use the createElement class in the append function like C# to create DOM objects.
function
Copy the codeThe code is as follows:
function append(obj)
{
for(i=0;i<3;i++)
{
var ele=new createElement();
var a=;
= "Hello";
=”javascript:void(0);”;
=;
=function(){createdom();};
$(obj).append(a);
}
}
In this way, every time new createElement() is a new object, and there is no reference problem.
In fact, the above mentioned is the difference between static classes and non-static classes in Javascript; of course, it is also known from this that there are still some differences in efficiency in using static classes and non-static classes, and it is definitely more convenient when calling static classes. If you don’t care about reference conflict issues, I think static classes should be the first choice.