JavaScript object-oriented static and non-static classes_js object-oriented

Until one day, I started to piece together DOM tags in js, and I needed to keep piecing them together. I found that my code became increasingly ugly, which was not only a problem of code simplicity, but also sometimes caused performance problems. If things continue like this, within three months, God will not know what I have written. The purpose of this article is entirely to record my experience.
First of all, let’s take a look at the garbage code that prompted me to change my habit of writing JavaScript. In exercises, tests, debugging, and even formal projects, a large amount of the following code is filled with it.

Copy code The code is as follows:

Function finduser(userId)
{
}
Function showmessage(msg)
{
Var message="Prompt, something went wrong, error reason" msg;
Alert(message);
}
Function append(obj)
{
Var onclick="createdom()";
Var title="Hello";
$(obj).append("” title ””);
}

Don’t tell me you haven’t seen the above Code, to be honest, the above code is really fast to write and easy to call. If the first two functions are not enough to arouse your indignation, then the third function should make you want to greet the creator of this code. Yes, the third function directly triggered my decision to use object orientation.
Actually, I can completely transform the third function into the following.

Copy code The code is as follows:

function append(obj)
{
var a=document.craeteElement(“a”);
a.title=”Hello”;
a.href=”javascript:void(0);”;
a.innerHTML=a. title;
a.click=function(){createdom();};
$(obj).append(a);
}

How about this? Is there any progress? OK, this is the code I want, but it's not concise enough. I hope that I can encapsulate the creation of DOM objects into a class, and install the above three methods into one object. Well, it is very simple to do it. This kind of work does not require searching for codes and examples on the Internet. , it can be completed by directly applying the object-oriented thinking of C#.
The first is to encapsulate the above three methods into an object. The encapsulation is very simple. I shouldn’t need to talk nonsense, just write the code directly.

Three encapsulated functions

Copy code The code is as follows:

User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message="Prompt, something went wrong, reason for the error" msg;
Alert(message);
},
Function append(obj)
{
Var a=document.craeteElement(“a”);
a.title=”Hello” ;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$ (obj).append(a);
}
}

You only need to declare a User variable to store the above three methods, and use it between different methods Separated by commas, it should be noted that User at this time is a static class with no constructor or private constructor (I guess), 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 code Code As follows:

createElement={
element=function(targetName){return document.createElement(targetName);},
a=document.createElement("a")
}

Quite simple, so that I can test whether the CreateElement object above works properly. This time the test is done in the append method. The append method is again transformed into the following code.

Copy code The code is as follows:

function append(obj)
{
Var a= createElement .a;
a.title=”Hello”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}

So far, append is working Pretty good, okay, I need to make a small change. I need to create three a's in the append function and add them to the obj object in turn. The code is as follows:

Code

Copy code The code is as follows:

function append(obj)
{
For(i=0;i<3;i )
{
Var a= createElement .a;
a.title =”Hello”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();} ;
$(obj).append(a);
}
}

The final result displayed is that only one a is obtained in the obj object. I don’t understand it very much. An a makes me feel like I am back in the embrace of C#. How wonderful it is. After analysis, when I call CreateElement.a for the first time to get the a object through Var a= CreateElement.a;
, in the a attribute document.createElement("a") has already resident the a object in the memory. After that, no matter how I call CreateElement.a, I actually just get a reference to a in the memory, and the changes are the same. An object, that's what's special about static classes, however, when I get the object by calling the CreateElement.element function, all I get is a new object every time, the method doesn't save a reference to the object, that's for sure Yes, the solution is to create a new object by calling the CreateElement.element function, but this method is not object-oriented and recommended.
Another better solution is to use non-static classes, that is, entity classes. The way to create non-static classes is also quite simple. The code is as follows:

Copy code The code is as follows:

createElement=function(){
element=function(targetName){return document.createElement(targetName );};
a=document. createElement(“a”);
}

Declare the createElement object directly and make it have a constructor, and the members are separated by semicolons , of course, if you like, you can write it directly like this, but it will not have the same effect.

Copy code The code is as follows:

function createElement (){
element =function(targetName){return document.createElement(targetName);};
a=document.createElement(“a”);
}

After the above statement, we You can use the createElement class in the append function like C# to create DOM objects.

Function

Copy code The code is as follows:

function append(obj)
{
for(i=0;i<3;i )
{
var ele=new createElement();
var a=ele.a;
a.title =”Hello”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();} ;
$(obj).append(a);
}
}

In this way, every time new createElement() is a new object, there is no reference problem .
Actually, what is mentioned above is the difference between static classes and non-static classes in Javascript; of course, we also know from it that there are still some differences in the efficiency of using static classes and non-static classes, and they must be static classes when they are called. It's more convenient. If you don't care about reference conflicts, I think static classes should be the first choice.