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