Javascript模拟实现接口、多继承.doc
文本预览下载声明
在Javascript模拟实现接口、多继承[模式]
2007-01-25 17:56
?
在其他语言中比如C#、Java，接口方法在定义的时候都是未实现的，而我这里模拟的JS接口则是可以在定义的时候实现的。
定义接口：
var IClassManager = {
hasClass:function(className){},
addClass:function(className){}
};
定义菜单类：
var Menu = function(options){
this._element = null;
this.setXY = function(x,y){
if (x) this._element.style.left = x + px;
if (y) this._element.style.top = y + px;
}
};
定义菜单项类：
var MenuItem = function(){
this.setText = function(){
};
}
其实菜单类和菜单项类都是基于HTMLElement的抽象，因此如果要让他们可以灵活的定义HTMLElement样式，那么都需要一组管理className的方法。因此Menu和MenuItem都需要实现IClassManager。辅助实现接口的方法：
var extend = function(dest, source){ //实现接口
dest = self || {};
for (property in source) {
if (!dest[property]) //如果dest也就是类没有同名的方法，则用接口默认实现方法。
dest[property] = dest[property];
}
return dest;
}
extend(Menu.prototype, IClassManager);
extend(MenuItem.prototype, IClassManager);
这样Menu和MenuItem都具有了Class的管理能力。
?
通过extend，Menu和MenuItem可以实现任意的接口，并且同时实现多个接口。
在实现接口之前Menu和MenuItem还可以有一次继承的机会：
Menu.prototype = new BaseClass(); //最简单的继承方式
然后再实现接口：extend(Menu.prototype, IClassManager);
?
这样就类似单根继承+多接口实现，很像C#或者Java吧
下面是完整的代码：
?(function(){
var Event = joyeach.util.Event;
var extend = function(dest, source){ //实现接口
dest = self || {};
for (property in source) {
if (!dest[property])
dest[property] = dest[property];
}
return dest;
}
//Class Manager Interface
var IClassManager= {
hasClass:function(className){
var reg = new RegExp((?:^|\\s+) + className + (?:\\s+|$));
return reg.test(this._element[className]);
},
addClass:function(className){
if (this.hasClass(el, className))? return;?
this._element[className] = [this._element[className], className].join( );
}}
/**
* 菜单类
*/
joyeach.controls.Menu = function(options){
this._element = null;
this.setXY = function(x,y){
if (x) this._element.style.left = x + px;
if (y) this._element.style.top = y + px;
};
this.getXY = function(){
return [parseInt(this._element.style.left),
parseInt(this._element.style.top)];
};
this.addItem = function(item){
this._element.appendChild(item._element);
E
显示全部