Javascript, too.

Oo is not (.)(.)

Shame, shame, JavaScript has always been a weakness. Especially for simulating Object-Oriented Programming in Javascript, we can see that JavaScriptCodeThe prototype, "= function ()" and other code are as good as the gods. I have been reading JavaScript advancedProgramDesign, this book, some of which have devoted itself to this aspect. After reading it, I did not dare to talk about it, but I was able to write a small program and experience it. Hey hey ...... Javascript. Today we are also oo.

This example is very simple and practical, that is, a random recommendation is displayed on the top of the blog in the blog Park.Article. In this way, sometimes, it happens that you can stick the browser for a while. Haha ~

Easy to fight, easy to avoid ~ First, implement Idea 1: Every recommendation article is an object

This object has two attributes (URL and title): the URL address and title of the article, and a method (commendme) to add itself to the back of the top navigation bar.

Function Article (Surl, stitle ){
This . Url = Surl;
This . Title = Stitle;
}
Article. Prototype. url = Function (){
Return ( This . Url );
}
Article. Prototype. Title = Function (){
Return ( This . Title );
}
Article. Prototype. commendme = Function (){
VaR Comarticleurl = This . Url;
VaR Comarticletitle = This . Title;
VaR Commendatoryarticlehtml = " & Nbsp; " Position: relative; top: 3px ;\ " Src = \ " HTTP: // Www.cnblogs.com/images/cnblogs_com/justinyoung/2007/broadcast.gif\ "alt = \" Recommended reading articles \ "/> recommended reading: "+" <a Title = \ "" + comarticletitle + "\" href = \ "" + comarticleurl + "\"> "+ comarticletitle +" </a> ";;
VaR Mylinks = Document. getelementbyid ( " Mylinks " );
VaR Commendatoryarticle = Document. createelement ('span ');
Commendatoryarticle. innerhtml = Commendatoryarticlehtml;
Mylinks. appendchild (commendatoryarticle );
}

2: Define an array that contains many article objects.

VaR Articlelist = New Array ();
Articlelist [ 0 ] = New Article ( " Http://www.cnblogs.com/JustinYoung/archive/2007/10/31/dead-of-typer.html " , " Improve the programmer's lifeblood skills with "Death Typist" " );
Articlelist [ 1 ] = New Article ( " Http://www.cnblogs.com/JustinYoung/archive/2007/11/08/952833.html " , " [CSS flip] technical example (with source code download) " );
Articlelist [ 2 ] = New Article ( " Http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html " , " How to improve the efficiency of web pages (Part 1) " );
Articlelist [ 3 ] = New Article ( " Http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html " , " How to improve the efficiency of web pages (Part 2) " ); 3: Call the object method to finish adding
Completed

During window. onload, an element is randomly selected from the array, and the commendme method of this element (object) is called to complete the addition.

Window. onload = Function (){
VaR Randomnum = Parseint (articlelist. Length * Math. Random ());
Articlelist [randomnum]. commendme ();
Articlelist = Null ; // Release resources
}

You can viewSource codeClearly see these code snippets.

Note:

Over the weekend, it took some time to correct the code in the sidebar and the code at the bottom of the blog. There was finally no Script Error in Firefox (mainly because Firefox is not good at insertadjacentelement support, changed to appendchild ). Now, you can browse it perfectly in Firefox. Hey hey ~ (Stealing ......)

Tag: JavaScript object-oriented, object-oriented JavaScript, and JavaScript objects, javaScript Object details: javascript lacks objects, JavaScript object-oriented programming, JavaScript prototype, Firefox insertadjacentelement, and appendchild