OO不是(.)(.)
惭愧，惭愧，JavaScript一直是俺的软肋。特别是对Javascript模拟面向对象编程这块，一看到javascript代码中含有什么prototype,"=function()"这样的代码，就敬如神明，心想定是高手所为。这段时间一直在看《Javascript高级程序设计》这本书，其中有些章节，就专门讲道了这个方面，看后，不敢说了然于胸，但是倒是也能够写个小程序，体验了一把。嘿嘿……JavaScript，今天咱也OO一把。
这个例子很简单，也很实用，就是在博客园的博客上方，显示一篇随机推荐的文章。这样，有时候，碰巧，能粘住浏览者一会。呵呵～
小打小闹，高人回避～
先说一下，实现思想
1：每篇推荐文章都是一个对象
这个对象有2个属性（URL和Title），分别是文章的URL地址和文章标题，和一个方法（commendMe），用于将自己添加到top导航栏后面。
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=" <img style=\"position:relative;top:3px;\" src=\"http://www.cnblogs.com/images/likecs_com/justinyoung/2007/broadcast.gif\" alt=\"推荐阅读文章\" /> 推荐阅读：" + "<a title=\"" + comArticleTitle + "\" href=\"" + comArticleURL + "\">" + comArticleTitle + "</a>";;
var mylinks=document.getElementById("mylinks");
var commendatoryArticle=document.createElement('span');
commendatoryArticle.innerHTML=commendatoryArticleHTML;
mylinks.appendChild(commendatoryArticle);
}
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=" <img style=\"position:relative;top:3px;\" src=\"http://www.cnblogs.com/images/likecs_com/justinyoung/2007/broadcast.gif\" alt=\"推荐阅读文章\" /> 推荐阅读：" + "<a title=\"" + comArticleTitle + "\" href=\"" + comArticleURL + "\">" + comArticleTitle + "</a>";;
var mylinks=document.getElementById("mylinks");
var commendatoryArticle=document.createElement('span');
commendatoryArticle.innerHTML=commendatoryArticleHTML;
mylinks.appendChild(commendatoryArticle);
}
2：定义一个数组，数组里面包含很多的文章对象
var articleList=new Array();
articleList[0]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/10/31/dead-of-typer.html","利用《死亡打字员》提高程序员的命根子技能");
articleList[1]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/11/08/952833.html","【CSS翻转门】技术实例讲解（附源码下载）");
articleList[2]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html","如何提高网页的效率（上篇）");
articleList[3]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html","如何提高网页的效率（下篇）");
articleList[0]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/10/31/dead-of-typer.html","利用《死亡打字员》提高程序员的命根子技能");
articleList[1]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/11/08/952833.html","【CSS翻转门】技术实例讲解（附源码下载）");
articleList[2]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/11/20/speeding-up-web-site-14rule.html","如何提高网页的效率（上篇）");
articleList[3]=new article("http://www.cnblogs.com/JustinYoung/archive/2007/11/28/speeding-up-web-site-yslow.html","如何提高网页的效率（下篇）");
3：调用对象方法，完成添加
完成的效果图
在window.onload的时候，从数组里面随机选出一个元素，然后调用这个元素（对象）的commendMe方法，从而完成添加。
window.onload=function(){
var randomNum = parseInt(articleList.length*Math.random());
articleList[randomNum].commendMe();
articleList=null;//释放资源
}
var randomNum = parseInt(articleList.length*Math.random());
articleList[randomNum].commendMe();
articleList=null;//释放资源
}
你可以通过，查看本页的源代码清楚的看到这些代码片断。
另记：
周末，花了一些时间，修正了一下，博客的侧边栏代码和底部代码，在Firefox里面终于没有脚本错误了(主要就是Firefox对insertAdjacentElement支持的不好惹得祸,换成appendChild就好了)。这下，在Firefox下也能完美的浏览了。嘿嘿～（窃喜中……）
Tag标签:javascript 面向对象,面向对象的javascript,javascript 对象,javascript的对象,javascript中的对象,javascript对象详解,javascript缺少对象,javascript面向对象程序设计,javascript prototype,firefox insertAdjacentElement,appendChild