本文實(shí)例講述了JavaScript 接口原理與用法。分享給大家供大家參考，具體如下：

意義：

提供一種以說明一個(gè)對(duì)象應(yīng)該有哪些方法的手段。接口是面向?qū)ο骿avascript程序員的工具箱中最有用的工具之一

接口的利弊：

對(duì)于一些中小型程序來說 使用接口很顯然是不明智的，對(duì)項(xiàng)目來說接口的好處也不明顯，只是徒增其復(fù)雜度而已。

對(duì)于接口的好處，那么顯而易見 首先促進(jìn)代碼的重用，對(duì)于開發(fā)來講，還可以告訴程序員那些類都使用了什么方法，如果你事先知道接口那么就減少了你在編碼的時(shí)候?qū)︻惻c類之間沖突，實(shí)現(xiàn)解耦。對(duì)于測(cè)試和調(diào)試也會(huì)變得輕松，用于javascript的弱類型語言，類型不匹配經(jīng)常出現(xiàn)，那么使用接口，這一點(diǎn)會(huì)變得容易一些。

優(yōu)點(diǎn)：程序員可以有一個(gè)參考缺點(diǎn)：屬于文檔的范疇 ，這種方式過于松散， 沒有檢查接口的方法是否完全被實(shí)現(xiàn)

interface Composite{ function add (obj) ; function remove (obj) ; function update ( obj ) ;} //CompositeImp1 implements Compositevar CompositeImp1 = function () { }CompositeImp1.prototype.remove = function ( obj ) { }CompositeImp1.prototype.update = function ( obj ) { }CompositeImp1.prototype.add = function (obj) { }var c1 = new CompositeImp1();屬性檢測(cè)

判斷接口是否存在

/*interface Composite{ function add (obj) ; function remove (obj) ; function update ( obj ) ;}interface FormItem { function select (obj) ; }*///CompositeImp1 implements Composite , FormItemvar CompositeImpl = function () { //顯式在類的內(nèi)部， 接受所實(shí)現(xiàn)的接口 //一般來說， 在類的內(nèi)部，定義一個(gè)數(shù)組(數(shù)組變量名字固定) this.implementsInterfaces = [’Composite’, ’FormItem’]; //利用 implementsInterfaces 后續(xù)的判斷使用 }CompositeImpl.prototype.remove = function ( obj ) { // do something ...}CompositeImpl.prototype.update = function ( obj ) {}CompositeImpl.prototype.add = function (obj) { alert(’add’);}CompositeImpl.prototype.select = function (obj) {}//檢測(cè) CompositeImpl 類 的對(duì)象function CheckCompositeImpl ( instance ) {//實(shí)例對(duì)象作為參數(shù)，檢測(cè)是否存在 //判斷當(dāng)前對(duì)象是否實(shí)現(xiàn)了所有的接口。 if ( !IsImplements(instance,’Composite’,’FormItem’) ) { throw new Error(’Object does not implement a requried interface’); } }//公用的具體的檢測(cè)方法(核心方法) //return booleanfunction IsImplements ( obj ) { //判斷實(shí)例對(duì)象，有沒有實(shí)現(xiàn)相關(guān)的接口. //arguments 對(duì)象 獲得函數(shù)的實(shí)際參數(shù) for ( var i=1; i<arguments.length; i++ ) { //接收所實(shí)現(xiàn)接口的名字 var interfaceName = arguments[i]; //判斷此方法， 是 成功，還是失敗。 var interfaceFound = false; for ( var j=0; j<obj.implementsInterfaces.length; j++ ) { if ( obj.implementsInterfaces[j] == interfaceName ) {interfaceFound = true;break; } } if ( !interfaceFound ) { return false; } } return true; }鴨式辯型法

核心: 一個(gè)類實(shí)現(xiàn)接口的主要目的：把接口里的方法都實(shí)現(xiàn)。(檢測(cè)實(shí)現(xiàn)方法)完全面向?qū)ο螅a實(shí)現(xiàn)統(tǒng)一， 也解耦

//1 ，接口類。 //定義一個(gè)類，作為借口的基類，通過類實(shí)例化N多個(gè)接口實(shí)例。// Class Interface 接口類所需要的2個(gè)參數(shù)參數(shù)1：接口的名字 (string)參數(shù)2：接收方法名稱的集合 methods, 是一個(gè)數(shù)組 (array)//實(shí)現(xiàn)抽象方法 var Interface=function( name,methods ){ //methods 的名字必須是String類型的可以.if( arguments.length != 2 ){ throw new Error(’the instance Interface constructor arguments must be 2 length!’);};this.name=name;this.methods=[]; //定義一個(gè)內(nèi)置的空數(shù)組對(duì)象，等待接受methods里的元素 (方法名字);for( var i=0; i<methods.length; ++i ){ if( typeof methods[i] !== ’string’ ){ throw new Error(’ths Interface method name is error’); }; this.methods.push( methods[i] );};};//2 準(zhǔn)備工作: 具體的實(shí)現(xiàn)類//①實(shí)例化接口對(duì)象.var CompositeInterface=new Interface(’CompositeInteface’,[’add’,’remove’]);var FormIntemInterface=new Interface(’FormIntemInterface’,[’update’,’select’]);//CompositeImpl implements CompositeInterface,FormIntemInterface.//②具體的實(shí)現(xiàn)類var CompositeImpl=function(){ }//③實(shí)現(xiàn)接口的方法//implements methodsCompositeImpl.prototype.add=function(){ alert(’add’); }CompositeImpl.prototype.remove=function(){ alert(’remove’); }CompositeImpl.prototype.update=function(){}// CompositeImpl.prototype.select=function(){}//3: 檢驗(yàn)接口里的方法.//檢驗(yàn)通過， 不做任何操作， 代碼繼續(xù)執(zhí)行. 不通過，拋出異常， Error. //這個(gè)方法的目的，就是檢測(cè)方法的 .Interface.ensureImplements=function( obj ){ //核心檢驗(yàn)方法.if( arguments.length < 2 ){ //如果檢測(cè)的方法接受的參數(shù)小于2個(gè)， 參數(shù)傳遞失敗. throw new Error(’Interface.ensureImplements method constructor arguments must be >= 2!’);};//獲得接口實(shí)例對(duì)象，通過接口實(shí)例對(duì)象， 得到接口實(shí)例對(duì)象里的方法.for( var i=1; i<arguments.length; ++i ){ var instanceInterface=arguments[i]; //判斷參數(shù) 是否是接口類的 類型. 是否是 接口類的構(gòu)造函數(shù). if( instanceInterface.constructor != Interface ){ throw new Error(’the arguments constructor not be Interface Class’); }; //循環(huán)接口實(shí)例對(duì)象的每一個(gè)方法 . for( var j=0; j<instanceInterface.methods.length; ++j ){ //用一個(gè)臨時(shí)變量接收每一個(gè)方法的名字，注意是字符，并不是函數(shù). var methodName=instanceInterface.methods[j]; //object[key]; if( !obj[methodName] || typeof obj[methodName] !== ’function’ ){ //對(duì)象沒有這個(gè)方法. throw new Error(’the method name '’ + methodName + ’' is not found!’); }; };}}var c1=new CompositeImpl();Interface.ensureImplements( c1,CompositeInterface,FormIntemInterface );c1.add();

總結(jié)：接口是實(shí)現(xiàn)解耦。避免類和類之間，調(diào)用方法的沖突。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。