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