在Javascript模拟实现接口、多继承[模式]

在其他语言中比如 C# 、 Java ，接口方法在定义的时候都是未实现的，而我这里模拟的 JS 接口则是可以在定义的时候实现的。

定义接口：

var IC lass Manager = {

hasClass:function(className){},

addClass:function(className){}

} ;

定义菜单类：

var Men u = 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 Men uItem = 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, I Class Manager);

extend(MenuItem.prototype, I Class Manager);

这样 Menu 和 MenuItem 都具有了 Class 的管理能力。

 

通过 extend ， Menu 和 MenuItem 可以实现任意的接口，并且同时实现多个接口。

在实现接口之前 Menu 和 MenuItem 还可以有一次继承的机会：

Menu.prototype = new BaseClass(); // 最简单的继承方式

然后再实现接口：extend(Menu.prototype, I Class Manager);

 

这样就类似单根继承 + 多接口实现，很像 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;

}

//C lass Manager Interface

var I Class Manager= {

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);

Event.fireEvent(this, 'onadditem', {sender:this, item:item});

};

this.getItemAt = function(index){

return this._element.childNodes[index]._control;

};

this.removeItemAt = function(index){

var element = this._element.childNodes[i];

this._element.removeChild(element);

Event.fireEvent(this, 'onremoveitem', {sender:this, item:element._control});

 

 

 

};

this.removeItem = function(item){

item._element.parentNode.removeChild(item._element);

Event.fireEvent(this, 'onremoveitem', {sender:this, item:item});

 

 

 

};

this.show = function(x,y){

if (x || y) this.setXY(x,y);

this._element.style.display = 'block';

Event.fireEvent(this, 'onshow', {sender:this});

};

this.hide = function(){

this._element.style.display = 'none';

Event.fireEvent(this, 'onhide', {sender:this});

 

 

 

};

this.close = function(){

this._element.parentNode.removeChild(this._element);

Event.fireEvent(this, 'onclose', {sender:this});

};

this._init = function(options){

this._element = document.createElement('div');

options = options || {};

if (options.css) this._element.className = options.css;

this.setXY(options.x,options.y);

//fire event onpopup

Event.fireEvent(this, 'onpopup', {sender:this});

document.body.appendChild(this._element);

};

//initialize menu

this._init(options);

};

 

/**

* 菜单项类.

*/

joyeach.controls.MenuItem = function(){

this.setText = function(){

};

this.getText = function(){

};

this.setTitle = function(){

};

this.getTitle = function(){

};

this._init = function(){

};

this._init();

};

//菜单类和菜单相类分别实现ICSSManager接口

extend(joyeach.controls.Menu.prototype, I Class Manager);

extend(joyeach.controls.MenuItem.prototype, I Class Manager);

})();

 

其中 IClassManager 接口方法实现里面的 this._element 可以在抽象成方法 this.getElement 。

 

此方案源于 prototype.js 和 yahoo ui library 。