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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 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
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
Python with的用法
2014/08/22 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
一套软件测试笔试题
2014/07/25 面试题
秋游活动策划方案
2014/02/16 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
婚纱店策划方案
2014/05/22 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
投诉书范文
2015/07/02 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis