Until one day, I started piecing together Dom tags in js, and I needed to keep piecing together, and I found that my code was getting ugly, not only about the simplicity of the code, but sometimes the performance problems. Over the longer term, in less than three months, God will not know what I have written, the purpose of this article is entirely out of record use experience.
First, let's take a look at the junk code that prompted me to change my writing JavaScript habits, and in practice, testing, debugging, and even formal projects, a lot of the following code is rife.
Copy Code code as follows:
Function Finduser (userId)
{
}
Function ShowMessage (msg)
{
Var message= "hint, error, error reason" +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 you haven't seen the code, to be honest, the code above is really fast, the call is simple, if the first two functions are not enough to provoke your indignation, then the third function should give you a bit of a desire to greet the creator of the code. Yes, the third function directly triggers my decision to use object oriented.
In fact, I can completely transform the third function into the following.
Copy Code code 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? Make progress, OK, that's the code I want, but it's not simple enough. I want to encapsulate the creation of a DOM object in a class, and the above three methods are loaded into an object; Well, it's easy to do it, this kind of work does not need to search the code and the example of the Internet, the direct application of C # object-oriented thinking can be done.
The first is to encapsulate the above three methods to an object, the encapsulation is very simple, should not have my nonsense, directly on the code.
Three functions after encapsulation
Copy Code code as follows:
user={
Function Finduser (userId)
{
},
Function ShowMessage (msg)
{
Var message= "hint, error, error reason" +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);
}
}
Just declare a user variable to store the top three methods, and use commas between different methods, and note that the user at this time is a static class, no constructors or constructors are private (I guess), and it's not going to be new anyway.
Second, I create a static class that encapsulates the creation of a DOM object, as follows:
Copy Code code as follows:
createelement={
Element=function (targetName) {return document.createelement (targetName);},
A=document. CreateElement ("a")
}
It's fairly simple, so I can test if the CreateElement object is working properly, and this test is tested in the Append method. The Append method is again transformed into the following code.
Copy Code code 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);
}
At the moment, append works pretty well, well, I need to make a little bit of a change, I need to create three aces in the Append function and add it to the Obj object in turn, the code reads as follows:
Code
Copy Code code 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 is that the Obj object only gets a a I do not understand, this a let me feel that I am back to the embrace of C #, how beautiful, after analysis, when I passed Var a= createelement. A;
When the first call is made to get a object in Createelement.a, the Document.createelement ("a") in the A property already resides in memory with the A object. After that, no matter how I call createelement.a, I actually just get a reference to a in-memory, the change is all the same object, which is the special place of static class, but when I get the object by calling the Createelement.element function, every time I get a new Object, the method does not save the object's reference, which is affirmative, by calling the Createelement.element function to create a new object, but this method is not object-oriented.
Another good solution is to use non-static classes, the way the entity classes are, and the way in which non-static classes are created is fairly simple, as is the code:
Copy Code code as follows:
Createelement=function () {
Element=function (targetName) {return document.createelement (targetName);};
A=document. CreateElement ("a");
}
Declare the CreateElement object directly, and make it a constructor, separated by semicolons, of course, if you like, you can write it directly, and it doesn't have the same effect.
Copy Code code as follows:
function createelement () {
Element=function (targetName) {return document.createelement (targetName);};
A=document. CreateElement ("a");
}
With the above declaration, we can use the CreateElement class to create a DOM object in the Append function like C #.
Function
Copy Code code 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);
}
}
So that each time new createelement () is a new object, there is no reference problem.
In fact, the above mentioned is the difference between static and non-static classes in JavaScript; Of course, it is also learned that the use of static class Non-static class efficiency is still somewhat different, and the call is certainly static class convenient, if not to dispute the reference conflict, I think the static class should be preferred.
