JavaScript接口实现方法实例分析


Posted in Javascript onMay 16, 2020

本文实例讲述了JavaScript接口实现方法。分享给大家供大家参考,具体如下:

JavaScript中实现接口的方法有三种:

第一种,使用注释的方法实现接口

特点:

(1)最简单,但是功能最弱

(2)利用 interface和 implement"文字"

(3)把他们用注释的方式表现出来

具体实现如下:

1,用注释定义一个接口

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

(2)用注释来注明实现的接口

/*
  * PersonDaoImp implement PersonDao (PersonDaoImp实现接口PersonDao) 
  * */
  var PersonDaoImp=function () {  };//定义实现类
   //实现
  PersonDaoImp.prototype.add=function(obj){
    //具体代码
  }
  PersonDaoImp.prototype.remove=function(obj){
    //具体代码
  }
  PersonDaoImp.prototype.find=function(id){
    //具体代码
  }

总结:

(1)使用文字的形式告知是谁实现谁

(2)优点,这样是很有意义的,大型项目需要的就是规范和标准,可以在没有写实现之前充分考虑架构和设计

(3)缺点:需要人为的遵守注释中的说明

第二种,使用属性检验法实现接口 。 实质为通过一个属性判断实现了谁

具体如下:

1,用注释来定义一个接口

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

2,用注释来说明实现接口类+实现类中增加属性

/*
   * PersonDaoImp implement PersonDao
   * */
  var PersonDaoImp=function () {
    this.implementInterface=["PersonDao"];//告知该类实现的接口是啥是一个数组,
}
  PersonDaoImp.prototype.add=function(obj){
       alert(obj);
  }
  PersonDaoImp.prototype.remove=function(obj){
    //具体实现
  }
  PersonDaoImp.prototype.find=function(id){
    //具体实现
  }

(3)检验属性的方法

//接收一个不定参数 可能有多个 使用Object
    function imp1(Object) {
    //遍历传入对象的所用属性 i=1:第一个是不定参数,从第二个参数开始遍历接口,故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)接口与实现类的配合实现

function addObj(obj) {
    var PersonDao=new PersonDaoImp();
    //开始检查 实现类是否实现接口
      if(!imp1(PersonDao,"PersonDao")){//某对象是否实现接口(对象,接口)  第一次参数是对象,第二个参数是不定参数
        throw new Error("PersonDaoImp没有实现接口PersonDao");
      }else{//实现
        PersonDao.add(obj);
      }
  }

(5)使用

addObj("实现");

 总结一下,该种方式只是简单判断了在实现时有没有传递与属性中相同的接口名称,而对于方法是否实现没有做验证。

 于是有了第三种的鸭式变形法--检验接口中的方法是否实现。

第三种,鸭式变形法 一种形似的命名方式,从实现角度来理解为:如果对象中具有的方法与接口中定义的方法同名 则认为是实现了本接口

具体如下:

1,定义一个接口类 注意这里与上面两种不一样了,不用写注释说明了

var Interface=function (name,methods) {//name:接口名字
    if(arguments.length<2){
      alert("必须是两个参数")
    }
    this.name=name;
    this.methods=[];//定义一个空数组装载函数名
    for(var i=0;i<methods.length;i++){
      if(typeof methods[i]!="string"){
        alert("函数名必须是字符串类型");
      }else {
        this.methods.push( methods[i]);
      }
    }
  }

2,定义一个静态方法来实现接口与实现类的 直接检验

注意,静态方法不要写成Interface.prototype ,因为这是写到接口的原型链上的,我们要把静态的函数直接写到类层次上。

Interface.ensureImplement=function (object) {
   if(arguments.length<2){
     throw new Error("参数必须不少于2个")
     return false;
   }
   for(var i=1;i<arguments.length;i++){
     var inter=arguments[i];
     //如果是接口就必须是Interface类型
     if(inter.constructor!=Interface){
        throw new Error("如果是接口类的话,就必须是Interface类型");
     }
      //判断接口中的方法是否全部实现
      //遍历函数集合
     for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

       //object[method]是传入的函数
       if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
           throw new Error("实现类中没有完全实现接口中的所有方法")
            }
          }
   }
 }

3,应用

3.1定义自己的接口    

         例如:此处定义两个接口

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

3.2,定义实现类

function commManager() {//实现两个类
    //先实现方法
    this.add=function () {
      alert("ok--实现");
    }
    this.remove=function () {
    }
    this.search=function () {
    }
    this.save=function () {
    }
    //检验
    Interface.ensureImplement(this,GridManager,formManager);
  }

3.3,实现类的实例化

var comm=new commManager();
  comm.add();//调用

 总结:三种方式都有自己的优势与缺点,每种的选择需要根据自己的需要进行选择。但是在设计的时候实现类间低耦合的相当重要的。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
JavaScript 类的封装操作示例详解
May 16 #Javascript
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
js抽奖转盘实现方法分析
May 16 #Javascript
JSONP 的原理、理解 与 实例分析
May 16 #Javascript
JavaScript随机数的组合问题案例分析
May 16 #Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 #Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 #Javascript
You might like
php 生成WML页面方法详解
2009/08/09 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
jquery实现数字输入框
2017/02/22 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python人脸识别初探
2017/12/21 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python实现趣味图片字符化
2019/04/30 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
我有一个梦想演讲稿
2014/05/05 职场文书
应届大专生求职信
2014/06/26 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
创业计划书之干洗店
2019/09/10 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
goland 设置project gopath的操作
2021/05/06 Golang
Python基础之进程详解
2021/05/21 Python