js的对象继承有不少方法,在网上能够随便搜索到。我做了一下比较,以前我主要使用下面的方法:
lib.System.Element=function(id){
var obj,Screen,thsEvent
var mID=id
this.id=function(value){if(value!=null){mID=value;this.__Init__();}else return mID};
this.__Init__=function(){
if(mID!=null)obj=document.getElementById(mID)
else obj=document.body
};
//执行初始化操作
this.__Init__();
this.innerHTML=function(value){try{if(value!=null)obj.innerHTML=value;else return obj.innerHTML;}catch(e){return ""}}
this.hWnd=obj;
};
var webui.prototype=new lib.System.Element
在调用webui对象时,就能完全继承lib.System.Element了。不过在实际使用时,我需要建立不同的对象,并继承到一个对象上,比如:
//html标签对象的基本定义
lib.System.Element=function(id){
var obj,Screen,thsEvent
var mID=id
this.id=function(value){if(value!=null){mID=value;this.__Init__();}else return mID};
this.__Init__=function(){
if(mID!=null)obj=document.getElementById(mID)
else obj=document.body
};
//执行初始化操作
this.__Init__();
this.innerHTML=function(value){try{if(value!=null)obj.innerHTML=value;else return obj.innerHTML;}catch(e){return ""}}
this.hWnd=obj;
};
//定义事件
lib.System.Element.Event=function(oEle){
var obj=oEle
var fnclick
this.click=function(value){if(value!=null){fnclick=value;System.AddEvent(obj,"click",fnclick);}else return fnclick}
}
//定义下层对象的管理
lib.System.Element.Items=function(obj){
this.Add=function(tagname,classname){
var o =document.createElement(tagname);
o.className=classname;
o.id=System.getid()
obj.appendChild(o)
return new lib.webui(o.id)
}
this.Remove=function(id){}
this.AddCSS=function(href){
var style=document.createElement("link");
style.rel="stylesheet";
style.type="text/css";
style.href=href;
obj.appendChild(style);
return style;
}
}
//定义位置
lib.System.Element.position=function(obj){
var Screen=new lib.System.Browser()
var mleft=0,mtop=0,mheight=Screen.width(),mwidth=Screen.height()
this.left=function(value){if(value!=null){mleft=value;obj.style.left=value+"px";}else return mleft;}
this.top=function(value){if(value!=null){mtop=value;obj.style.top=value+"px";}else return mtop;}
this.width=function(value){if(value!=null){mwidth=value;obj.style.width=value+"px";}else return mwidth;}
this.height=function(value){if(value!=null){mheight=value;obj.style.height=value+"px";}else return mheight;}
this.move=function(left,top,width,height){this.left(left);this.top(top);this.width(width);this.height(height);}
this.classname=function(value){if(value!=null){if(ths_class!=value){ths_class=value;obj.className=value;}}else return ths_class;}
}
//定义外观
lib.System.Element.ui=function(obj){
var apperance=1;
var visible=true;
var transparent=false;
var picture;var backcolor;
obj.style.position = "absolute";
obj.className="caption"
var multiline=true;
//multiline是否允许显示多行,TRUE允许,FALSE不允许
this.multiline=function(value){if(value!=null){if(value)obj.style.overflow="auto";else obj.style.overflow="hidden";}else return multiline;}
//apperance表示外观,值为0和1,0-Flat,1-3D-down,2-3D-UP
this.apperance=function(value){if(value!=null){if(value==1){obj.className="down";posoffset=3;}else if(value==0){obj.className="";posoffset=0;}else if(value==2){obj.className="up";posoffset=3;}apperance=value;}else return apperance;}
//transparent表示背景是否透明,值为True和False,True代表透明,False代表不透明
this.transparent=function(value){if(value!=null){transparent=value;if(value)obj.style.background="";else obj.style.background=backcolor;}else return transparent;}
//visible表示是否显示,值为True和False,True为显示,False代表不显示
this.visible=function(value){if(value!=null){visible=value;if(visible==true)obj.style.display="block";else obj.style.display="none";}else return visible;}
//设置背景图片,
this.picture=function(value){if(value!=null){picutre=value;if(value=="") obj.style.backgroundImage="";else obj.style.backgroundImage="url("+value+")"}else return picture;}
this.backcolor=function(value){if(value!=null){obj.style.background=value;backcolor=value;}else return backcolor;}
this.text=function(value){if(value!=null){obj.innerHTML=value;}else return obj.innerHTML}
}
这样设计对象的好处是我能够单独维护每一种元素和场景,坏处是,这样我就不能使用prototype来继承了。所以,我采用了这样的方式:
lib.webui=function(webid){
lib.System.Element.call(this,webid);
lib.System.Element.Event.call(this,this.hWnd);
lib.System.Element.Items.call(this,this.hWnd);
lib.System.Element.position.call(this,this.hWnd);
lib.System.Element.ui.call(this,this.hWnd);
}
这样,我就实现了多对象接口的继承。