Javascript模擬實(shí)現(xiàn)接口、多繼承

1、.;在Javascript模擬實(shí)現(xiàn)接口、多繼承模式2007-01-25 17:56在其他語言中比如C#、Java，接口方法在定義的時(shí)候都是未實(shí)現(xiàn)的，而我這里模擬的JS接口則是可以在定義的時(shí)候?qū)崿F(xiàn)的。定義接口：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 +

2、 px;if (y) this._element.style.top = y + px;定義菜單項(xiàng)類：var MenuItem = function()this.setText = function();其實(shí)菜單類和菜單項(xiàng)類都是基于HTMLElement的抽象，因此如果要讓他們可以靈活的定義HTMLElement樣式，那么都需要一組管理className的方法。因此Menu和MenuItem都需要實(shí)現(xiàn)IClassManager。輔助實(shí)現(xiàn)接口的方法：var extend = function(dest, source) /實(shí)現(xiàn)接口dest = self | ;for (property in s

3、ource) if (!destproperty) /如果dest也就是類沒有同名的方法，則用接口默認(rèn)實(shí)現(xiàn)方法。destproperty = destproperty;return dest;extend(Mtotype, IClassManager);extend(MenuItotype, IClassManager);這樣Menu和MenuItem都具有了Class的管理能力。通過extend，Menu和MenuItem可以實(shí)現(xiàn)任意的接口，并且同時(shí)實(shí)現(xiàn)多個(gè)接口。在實(shí)現(xiàn)接口之前Menu和MenuItem還可以有一次繼承的機(jī)會(huì)：Mtotype = new BaseClass(); /最簡(jiǎn)單的繼

4、承方式然后再實(shí)現(xiàn)接口：extend(Mtotype, IClassManager);這樣就類似單根繼承+多接口實(shí)現(xiàn)，很像C#或者Java吧下面是完整的代碼：(function()var Event = joyeach.util.Event;var extend = function(dest, source) /實(shí)現(xiàn)接口dest = self | ;for (property in source) if (!destproperty)destproperty = destproperty;return dest;/Class Manager Interfacevar IClassManager

5、= hasClass:function(className)var reg = new RegExp(?:|s+) + className + (?: HYPERLINK /s+|$) ) s+|$);return reg.test(this._elementclassName); ,addClass:function(className)if (this.hasClass(el, className) return; this._elementclassName = this._elementclassName, className.join( );/* 菜單類*/joyeach.contr

6、ols.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.ap

7、pendChild(item._element);Event.fireEvent(this, onadditem, sender:this, item:item);this.getItemAt = function(index)return this._element.childNodesindex._control;this.removeItemAt = function(index)var element = this._element.childNodesi;this._element.removeChild(element);Event.fireEvent(this, onremove

8、item, 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, onsh

9、ow, 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.createEle

10、ment(div);options = options | ;if (options.css) this._element.className = options.css;this.setXY(options.x,options.y);/fire event onpopupEvent.fireEvent(this, onpopup, sender:this);document.body.appendChild(this._element);/initialize menuthis._init(options);/* 菜單項(xiàng)類.*/joyeach.controls.MenuItem = func

11、tion()this.setText = function();this.getText = function();this.setTitle = function();this.getTitle = function();this._init = function();this._init();/菜單類和菜單相類分別實(shí)現(xiàn)ICSSManager接口extend(joyeach.controls.Mtotype, IClassManager);extend(joyeach.controls.MenuItotype, IClassManager);)();其中IClassManager接口方法實(shí)現(xiàn)

12、里面的this._element可以在抽象成方法 this.getElement。此方案源于prototype.js和yahoo ui library。在Javascript模擬實(shí)現(xiàn)接口、多繼承模式-續(xù)-運(yùn)行時(shí)類型信息2007-02-05 09:48 在上次 HYPERLINK http:/ 在Javascript模擬實(shí)現(xiàn)接口、多繼承模式提到的用Javascript模擬的接口及實(shí)現(xiàn)的方式中是基于對(duì)象屬性拷貝的實(shí)現(xiàn)方式，這種實(shí)現(xiàn)方式的一個(gè)不足就是：當(dāng)Javascript對(duì)象創(chuàng)建出來之后就沒辦法知道它的類實(shí)現(xiàn)了哪些接口，它不同于類的prototype繼承，還可以用instanceof來獲取一些類型

13、信息。這次在上次實(shí)現(xiàn)的基礎(chǔ)上加上運(yùn)行時(shí)類型識(shí)別功能，并提供as函數(shù)來轉(zhuǎn)換對(duì)象到接口。提供這種能力需要重寫接口實(shí)現(xiàn)方式：implements函數(shù)：varimplements=function(subc)if(!subc&typeof(subc)!=function)return;for(vari=1;iarguments.length;i+)/可以一次實(shí)現(xiàn)多個(gè)不同的接口varsuperc=argumentsi;if(!superc)continue;varsuperObj=newsuperc();/真正的用一個(gè)類來模擬接口，而不是上次的用Object來模擬接口/保存接口類型信息，這個(gè)是實(shí)現(xiàn)運(yùn)行時(shí)

14、發(fā)現(xiàn)類型信息的關(guān)鍵if(!totype._interface_)totype._interface_=;totype._interface_.push(superc);for(propertyinsuperObj)if(!totypeproperty)totypeproperty=superObjproperty;returnsubc;提供的as轉(zhuǎn)換函數(shù)：function(subObj,interfaceC)if(!subObj|!interfaceC|typeof(interfaceC)!=function)returnnull;if(!subObj._interface_)returnnull;for(vari=0;isubObj._interface_.length;i+)/檢查是否實(shí)現(xiàn)了interfaceCif(subObj._interface_i=interfaceC)returnsubObj;returnnull;subObj是一個(gè)對(duì)象，而interfaceC是接口類型，如果subObject的類實(shí)現(xiàn)了接口interfaceC，則轉(zhuǎn)換函數(shù)返回一個(gè)對(duì)象，否則返回null。完整示例代碼：varBas