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(视频与PPT)
Dec 27 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
JavaScript实现更换背景图片
Oct 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 checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php保存信息到当前Session的方法
2015/03/16 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
js使用心得分享
2015/01/13 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Python获取当前时间的方法
2014/01/14 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python正则表达式常用函数总结
2017/06/24 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python range实例用法分享
2020/02/06 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
优秀班干部事迹材料
2014/01/26 职场文书
一年级数学教学反思
2014/02/01 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014年残联工作总结
2014/11/21 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android