JavaScript，咱也OO一把

saybody

浏览: 911326 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

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

分享到：