基于ajax的应用中,当程序交互的时候经常需要以提示的方式来告诉用户当前程序的状态,然后随着状态的变化也需要改变提示信息的样式,比如隐藏,显示,一定时间后消失,这样都是一样常见的需求,所以可以把这些封装在一个类中来简化编程的逻辑。 Notice这个类当前的设计思路是根据id来操作一个已有的element,然后可以改变它的状态,主要用法如下: g_notice = new Notice("notice"); //初始化 状态变化 g_notice.Show(); g_notice.setHTML("XXXXXXXX"); 交互结束,隐藏该类 g_notice.hideAfter(1000) //1秒中后隐藏该div也可以立即隐藏 g_notice.Hide() 下面是所有接口: Show(); setPosition(x,y); Hide(); showAfter(x); hiedAfter(x); setHTML(XX); 一个很简单的程序,可以在这个基础上加深,比如动态的创建元素等等,关键在于如何暴露需要的功能,只完成该对象应该做的事情,这些是才是面向对象程序设计的本质。
function Notice(objID) { //if(document.getElementById(objID)) this.obj = document.getElementById(objID); this.obj.style.display = "none"; ;}
Notice.prototype.setPosition = function(x,y){
this.obj.style.left = x; this.obj.style.top = y; }
Notice.prototype.Show = function(){
this.obj.style.display = "block"; }
Notice.prototype.Hide = function(){
this.obj.style.display = "none"; }
Notice.prototype.hideAfter = function(delayTime){ var oThis = this.obj; var hide = function(){oThis.style.display = "none";} window.setTimeout(hide,delayTime); }
Notice.prototype.showAfter = function(delayTime){ var oThis = this.obj; var show = function(){oThis.style.display = "block";} window.setTimeout(show,delayTime);
}
Notice.prototype.setHTML = function(text){
this.obj.innerHTML =text; }