JavaScript接口實(shí)現(xiàn)方法實(shí)例分析

更新時(shí)間：2020年05月16日 11:56:46 作者：WFaceBoss

這篇文章主要介紹了JavaScript接口實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript接口實(shí)現(xiàn)原理、操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript接口實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

JavaScript中實(shí)現(xiàn)接口的方法有三種：

第一種，使用注釋的方法實(shí)現(xiàn)接口

特點(diǎn)：

（1）最簡(jiǎn)單，但是功能最弱

（2）利用 interface和 implement"文字"

（3）把他們用注釋的方式表現(xiàn)出來

具體實(shí)現(xiàn)如下：

1，用注釋定義一個(gè)接口

 /*
  * interface PersonDao(){
  * function add(obj);
  * function remove(obj);
  * function find(id);
  * }
  * */

（2）用注釋來注明實(shí)現(xiàn)的接口

 /*
  * PersonDaoImp implement PersonDao （PersonDaoImp實(shí)現(xiàn)接口PersonDao） 
  * */
  var PersonDaoImp=function () {  };//定義實(shí)現(xiàn)類
   //實(shí)現(xiàn)
  PersonDaoImp.prototype.add=function(obj){
    //具體代碼
  }
  PersonDaoImp.prototype.remove=function(obj){
    //具體代碼
  }
  PersonDaoImp.prototype.find=function(id){
    //具體代碼
  }

總結(jié)：

（1）使用文字的形式告知是誰實(shí)現(xiàn)誰

（2）優(yōu)點(diǎn)，這樣是很有意義的，大型項(xiàng)目需要的就是規(guī)范和標(biāo)準(zhǔn)，可以在沒有寫實(shí)現(xiàn)之前充分考慮架構(gòu)和設(shè)計(jì)

（3）缺點(diǎn)：需要人為的遵守注釋中的說明

第二種，使用屬性檢驗(yàn)法實(shí)現(xiàn)接口。實(shí)質(zhì)為通過一個(gè)屬性判斷實(shí)現(xiàn)了誰

具體如下：

1，用注釋來定義一個(gè)接口

 /*
   * interface PersonDao(){
   * function add(obj);
   * function remove(obj);
   * function find(id);
   * }
   * */

2，用注釋來說明實(shí)現(xiàn)接口類+實(shí)現(xiàn)類中增加屬性

/*
   * PersonDaoImp implement PersonDao
   * */
  var PersonDaoImp=function () {
    this.implementInterface=["PersonDao"];//告知該類實(shí)現(xiàn)的接口是啥是一個(gè)數(shù)組，
}
  PersonDaoImp.prototype.add=function(obj){
       alert(obj);
  }
  PersonDaoImp.prototype.remove=function(obj){
    //具體實(shí)現(xiàn)
  }
  PersonDaoImp.prototype.find=function(id){
    //具體實(shí)現(xiàn)
  }

（3）檢驗(yàn)屬性的方法

 //接收一個(gè)不定參數(shù) 可能有多個(gè) 使用Object
    function imp1(Object) {
    //遍歷傳入對(duì)象的所用屬性 i=1：第一個(gè)是不定參數(shù)，從第二個(gè)參數(shù)開始遍歷接口，故i=1
      for(var i=1;i<arguments.length;i++){//arguments除Object外
        var interfaceName=arguments[i];
        var interfaceFind=false;
        for(var j=0;j<Object.implementInterface.length;j++){
           if(Object.implementInterface[j]==interfaceName){
             interfaceFind=true;
             break;
           }
        }
        if(!interfaceFind){
          return false;
        }
      }
      return true;
    }

（4）接口與實(shí)現(xiàn)類的配合實(shí)現(xiàn)

 function addObj(obj) {
    var PersonDao=new PersonDaoImp();
    //開始檢查 實(shí)現(xiàn)類是否實(shí)現(xiàn)接口
      if(!imp1(PersonDao,"PersonDao")){//某對(duì)象是否實(shí)現(xiàn)接口(對(duì)象，接口)  第一次參數(shù)是對(duì)象，第二個(gè)參數(shù)是不定參數(shù)
        throw new Error("PersonDaoImp沒有實(shí)現(xiàn)接口PersonDao");
      }else{//實(shí)現(xiàn)
        PersonDao.add(obj);
      }
  }

（5）使用

addObj("實(shí)現(xiàn)");

總結(jié)一下，該種方式只是簡(jiǎn)單判斷了在實(shí)現(xiàn)時(shí)有沒有傳遞與屬性中相同的接口名稱，而對(duì)于方法是否實(shí)現(xiàn)沒有做驗(yàn)證。

于是有了第三種的鴨式變形法--檢驗(yàn)接口中的方法是否實(shí)現(xiàn)。

第三種，鴨式變形法一種形似的命名方式，從實(shí)現(xiàn)角度來理解為：如果對(duì)象中具有的方法與接口中定義的方法同名則認(rèn)為是實(shí)現(xiàn)了本接口。

具體如下：

1，定義一個(gè)接口類注意這里與上面兩種不一樣了，不用寫注釋說明了

var Interface=function (name,methods) {//name：接口名字
    if(arguments.length<2){
      alert("必須是兩個(gè)參數(shù)")
    }
    this.name=name;
    this.methods=[];//定義一個(gè)空數(shù)組裝載函數(shù)名
    for(var i=0;i<methods.length;i++){
      if(typeof methods[i]!="string"){
        alert("函數(shù)名必須是字符串類型");
      }else {
        this.methods.push( methods[i]);
      }
    }
  }

2，定義一個(gè)靜態(tài)方法來實(shí)現(xiàn)接口與實(shí)現(xiàn)類的直接檢驗(yàn)

注意，靜態(tài)方法不要寫成Interface.prototype ,因?yàn)檫@是寫到接口的原型鏈上的，我們要把靜態(tài)的函數(shù)直接寫到類層次上。

Interface.ensureImplement=function (object) {
   if(arguments.length<2){
     throw new Error("參數(shù)必須不少于2個(gè)")
     return false;
   }
   for(var i=1;i<arguments.length;i++){
     var inter=arguments[i];
     //如果是接口就必須是Interface類型
     if(inter.constructor!=Interface){
        throw new Error("如果是接口類的話，就必須是Interface類型");
     }
      //判斷接口中的方法是否全部實(shí)現(xiàn)
      //遍歷函數(shù)集合
     for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函數(shù)

       //object[method]是傳入的函數(shù)
       if(!object[method]||typeof object[method]!="function" ){//實(shí)現(xiàn)類中必須有方法名字與接口中所用方法名相同
           throw new Error("實(shí)現(xiàn)類中沒有完全實(shí)現(xiàn)接口中的所有方法")
            }
          }
   }
 }

3，應(yīng)用

3.1定義自己的接口

例如：此處定義兩個(gè)接口

 var FirstInterface=new Interface("FirstInterface",["add","remove","search"]);//第一個(gè)接口
 var SecondInterface=new Interface("SecondInterface",["save"]);//第二個(gè)接口

3.2，定義實(shí)現(xiàn)類

 function commManager() {//實(shí)現(xiàn)兩個(gè)類
    //先實(shí)現(xiàn)方法
    this.add=function () {
      alert("ok--實(shí)現(xiàn)");
    }
    this.remove=function () {
    }
    this.search=function () {
    }
    this.save=function () {
    }
    //檢驗(yàn)
    Interface.ensureImplement(this,GridManager,formManager);
  }

3.3，實(shí)現(xiàn)類的實(shí)例化

var comm=new commManager();
  comm.add();//調(diào)用

總結(jié)：三種方式都有自己的優(yōu)勢(shì)與缺點(diǎn)，每種的選擇需要根據(jù)自己的需要進(jìn)行選擇。但是在設(shè)計(jì)的時(shí)候?qū)崿F(xiàn)類間低耦合的相當(dāng)重要的。

感興趣的朋友可以使用在線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ì)有所幫助。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript接口實(shí)現(xiàn)方法實(shí)例分析

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具