JavaScript，咱也OO一把

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="&nbsp;<img style=\"position:relative;top:3px;\"   src=\"http://www.cnblogs.com/images/cnblogs_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","如何提高网页的效率（下篇）");

3：调用对象方法，完成添加

完成的效果图

在window.onload的时候，从数组里面随机选出一个元素，然后调用这个元素（对象）的commendMe方法，从而完成添加。

window.onload=function(){
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