JavaScript 接口原理與用法實(shí)例詳解

更新時(shí)間：2020年05月12日 11:06:11 作者：alogy

這篇文章主要介紹了JavaScript 接口原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript 接口原理、優(yōu)缺點(diǎn)、用法及操作注意事項(xiàng),需要的朋友可以參考下

js接口

意義：

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

接口的利弊：

對(duì)于一些中小型程序來(lái)說(shuō) 使用接口很顯然是不明智的，對(duì)項(xiàng)目來(lái)說(shuō)接口的好處也不明顯，只是徒增其復(fù)雜度而已。
對(duì)于接口的好處，那么顯而易見(jiàn) 首先促進(jìn)代碼的重用，對(duì)于開(kāi)發(fā)來(lái)講，還可以告訴程序員那些類(lèi)都使用了什么方法，如果你事先知道接口那么就減少了你在編碼的時(shí)候?qū)︻?lèi)與類(lèi)之間沖突，實(shí)現(xiàn)解耦。對(duì)于測(cè)試和調(diào)試也會(huì)變得輕松，用于javascript的弱類(lèi)型語(yǔ)言，類(lèi)型不匹配經(jīng)常出現(xiàn)，那么使用接口，這一點(diǎn)會(huì)變得容易一些。

注釋接口描述

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

interface Composite{
    
 function add (obj) ;
 function remove (obj) ;
 function update ( obj ) ;

}
 
//CompositeImp1 implements Composite
var 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 , FormItem
var CompositeImpl = function () {
 //顯式在類(lèi)的內(nèi)部， 接受所實(shí)現(xiàn)的接口
 //一般來(lái)說(shuō)， 在類(lèi)的內(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 類(lèi) 的對(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 boolean
function IsImplements ( obj ) { //判斷實(shí)例對(duì)象，有沒(méi)有實(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è)類(lèi)實(shí)現(xiàn)接口的主要目的：把接口里的方法都實(shí)現(xiàn)。(檢測(cè)實(shí)現(xiàn)方法)
完全面向?qū)ο?，代碼實(shí)現(xiàn)統(tǒng)一，也解耦

//1 ，接口類(lèi)。 //定義一個(gè)類(lèi)，作為借口的基類(lèi)，通過(guò)類(lèi)實(shí)例化N多個(gè)接口實(shí)例。// Class Interface 

接口類(lèi)所需要的2個(gè)參數(shù)
參數(shù)1：接口的名字 (string)
參數(shù)2：接收方法名稱(chēng)的集合 methods, 是一個(gè)數(shù)組 (array)
//實(shí)現(xiàn)抽象方法 
var Interface=function( name,methods ){ //methods 的名字必須是String類(lèi)型的可以.
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)類(lèi)
//①實(shí)例化接口對(duì)象.
var CompositeInterface=new Interface('CompositeInteface',['add','remove']);
var FormIntemInterface=new Interface('FormIntemInterface',['update','select']);
//CompositeImpl implements CompositeInterface,FormIntemInterface.
//②具體的實(shí)現(xiàn)類(lèi)
var CompositeImpl=function(){ }
//③實(shí)現(xiàn)接口的方法
//implements methods
CompositeImpl.prototype.add=function(){ alert('add'); }
CompositeImpl.prototype.remove=function(){ alert('remove'); }
CompositeImpl.prototype.update=function(){}
//   CompositeImpl.prototype.select=function(){}
//3: 檢驗(yàn)接口里的方法.
//檢驗(yàn)通過(guò)， 不做任何操作， 代碼繼續(xù)執(zhí)行. 不通過(guò)，拋出異常， 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ì)象，通過(guò)接口實(shí)例對(duì)象， 得到接口實(shí)例對(duì)象里的方法.
for( var i=1; i<arguments.length; ++i ){
 var instanceInterface=arguments[i];
 //判斷參數(shù) 是否是接口類(lèi)的 類(lèi)型. 是否是 接口類(lèi)的構(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ì)象沒(méi)有這個(gè)方法.
   throw new Error('the method name "' + methodName + '" is not found!');
  };
 };
}
}
var c1=new CompositeImpl();
Interface.ensureImplements( c1,CompositeInterface,FormIntemInterface );
c1.add();