JavaScript 接口原理与用法实例详解


Posted in Javascript onMay 12, 2020

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

js接口

意义:

提供一种以说明一个对象应该有哪些方法的手段。
接口是面向对象javascript程序员的工具箱中最有用的工具之一

接口的利弊:

  • 对于一些中小型程序来说 使用接口很显然是不明智的,对项目来说接口的好处也不明显,只是徒增其复杂度而已。

  • 对于接口的好处,那么显而易见 首先促进代码的重用,对于开发来讲,还可以告诉程序员那些类都使用了什么方法,如果你事先知道接口那么就减少了你在编码的时候对类与类之间冲突,实现解耦。对于测试和调试也会变得轻松,用于javascript的弱类型语言,类型不匹配经常出现,那么使用接口,这一点会变得容易一些。

注释接口描述

优点:程序员可以有一个参考
缺点:属于文档的范畴 ,这种方式过于松散, 没有检查接口的方法是否完全被实现

interface Composite{
    
 function add (obj) ;
 function remove (obj) ;
 function update ( obj ) ;

}
 
//CompositeImp1 implements Composite
var CompositeImp1 = function () {
 
}
CompositeImp1.prototype.remove = function ( obj ) {
 
}
CompositeImp1.prototype.update = function ( obj ) {
 
}
CompositeImp1.prototype.add = function (obj) {
 
}

var c1 = new CompositeImp1();

属性检测

判断接口是否存在

/*interface Composite{

 function add (obj) ;
 function remove (obj) ;
 function update ( obj ) ;

}

interface FormItem {
 
 function select (obj) ;
 
}
*/

//CompositeImp1 implements Composite , FormItem
var CompositeImpl = function () {
 //显式在类的内部, 接受所实现的接口
 //一般来说, 在类的内部,定义一个数组(数组变量名字固定)
 this.implementsInterfaces = ['Composite', 'FormItem']; //利用 implementsInterfaces 后续的判断使用
 
}

CompositeImpl.prototype.remove = function ( obj ) {
 // do something ...
}
CompositeImpl.prototype.update = function ( obj ) {
}
CompositeImpl.prototype.add = function (obj) {
 alert('add');
}
CompositeImpl.prototype.select = function (obj) {
}

//检测 CompositeImpl 类 的对象
function CheckCompositeImpl ( instance ) {//实例对象作为参数,检测是否存在
 
 //判断当前对象是否实现了所有的接口。
 if ( !IsImplements(instance,'Composite','FormItem') ) {
  throw new Error('Object does not implement a requried interface');
 }
 
}

//公用的具体的检测方法(核心方法) //return boolean
function IsImplements ( obj ) { //判断实例对象,有没有实现相关的接口.
 
 //arguments 对象 获得函数的实际参数
 for ( var i=1; i<arguments.length; i++ ) {
  
  //接收所实现接口的名字
  var interfaceName = arguments[i];
  
  //判断此方法, 是 成功,还是失败。 
  var interfaceFound = false;
  
  for ( var j=0; j<obj.implementsInterfaces.length; j++ ) {
   
   if ( obj.implementsInterfaces[j] == interfaceName ) {
    
    interfaceFound = true;
    
    break;
    
   }
   
  }
  
  if ( !interfaceFound ) {
   
   return false;
   
  }
  
 }
 
 return true;
 
}

鸭式辩型法

核心: 一个类实现接口的主要目的:把接口里的方法都实现。(检测实现方法)
完全面向对象,代码实现统一, 也解耦

//1 ,接口类。 //定义一个类,作为借口的基类,通过类实例化N多个接口实例。// Class Interface 

接口类所需要的2个参数
参数1:接口的名字 (string)
参数2:接收方法名称的集合 methods, 是一个数组 (array)
//实现抽象方法 
var Interface=function( name,methods ){ //methods 的名字必须是String类型的可以.
if( arguments.length != 2 ){
 throw new Error('the instance Interface constructor arguments must be 2 length!');
};
this.name=name;
this.methods=[]; //定义一个内置的空数组对象,等待接受methods里的元素 (方法名字);
for( var i=0; i<methods.length; ++i ){
 if( typeof methods[i] !== 'string' ){
  throw new Error('ths Interface method name is error');
 };
 this.methods.push( methods[i] );
};
};

//2 准备工作: 具体的实现类
//①实例化接口对象.
var CompositeInterface=new Interface('CompositeInteface',['add','remove']);
var FormIntemInterface=new Interface('FormIntemInterface',['update','select']);
//CompositeImpl implements CompositeInterface,FormIntemInterface.
//②具体的实现类
var CompositeImpl=function(){ }
//③实现接口的方法
//implements methods
CompositeImpl.prototype.add=function(){ alert('add'); }
CompositeImpl.prototype.remove=function(){ alert('remove'); }
CompositeImpl.prototype.update=function(){}
//   CompositeImpl.prototype.select=function(){}
//3: 检验接口里的方法.
//检验通过, 不做任何操作, 代码继续执行. 不通过,抛出异常, Error. //这个方法的目的,就是检测方法的 .
Interface.ensureImplements=function( obj ){ //核心检验方法.
if( arguments.length < 2 ){ //如果检测的方法接受的参数小于2个, 参数传递失败.
 throw new Error('Interface.ensureImplements method constructor arguments must be >= 2!');
};
//获得接口实例对象,通过接口实例对象, 得到接口实例对象里的方法.
for( var i=1; i<arguments.length; ++i ){
 var instanceInterface=arguments[i];
 //判断参数 是否是接口类的 类型. 是否是 接口类的构造函数.
 if( instanceInterface.constructor != Interface ){ 
  throw new Error('the arguments constructor not be Interface Class');
 };
 //循环接口实例对象的每一个方法 .
 for( var j=0; j<instanceInterface.methods.length; ++j ){
  //用一个临时变量接收每一个方法的名字,注意是字符,并不是函数.
  var methodName=instanceInterface.methods[j];
  //object[key];
  if( !obj[methodName] || typeof obj[methodName] !== 'function' ){
   //对象没有这个方法.
   throw new Error('the method name "' + methodName + '" is not found!');
  };
 };
}
}
var c1=new CompositeImpl();
Interface.ensureImplements( c1,CompositeInterface,FormIntemInterface );
c1.add();

总结:接口是实现解耦。避免类和类之间,调用方法的冲突。

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

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

Javascript 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
ES5新增数组的实现方法
May 12 #Javascript
JavaScript内置对象之Array的使用小结
May 12 #Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 #Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 #Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 #Javascript
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
You might like
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP实现微信退款功能
2018/10/02 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
python元组操作实例解析
2014/09/23 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
前台文员的岗位职责
2013/11/14 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
运动会口号8字
2014/06/07 职场文书
音乐教师求职信
2014/06/28 职场文书
考研经验交流会策划书
2015/11/02 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis