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 相关文章推荐
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
vue 组件简介
Jul 31 Javascript
vue中template的三种写法示例
Oct 21 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实现加减法验证码代码
2014/02/14 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python实现解数独程序代码
2017/04/12 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python中常见错误及解决方法
2020/06/21 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
艺术设计专业个人求职信
2014/04/10 职场文书
作文评语集锦大全
2014/04/23 职场文书
毕业设计说明书
2014/05/07 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2015年检验科工作总结
2015/04/27 职场文书
董事长年会致辞
2015/07/29 职场文书
初中英语教学反思范文
2016/02/15 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
python3 hdf5文件 遍历代码
2021/05/19 Python