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 相关文章推荐
两个Javascript小tip资料
Nov 23 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
Vue前端项目部署IIS的实现
Jan 06 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
2006/11/25 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Windows下安装python2.7及科学计算套装
2015/03/05 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
关于运动会广播稿300字
2014/10/05 职场文书
小学生作文评语集锦
2014/12/25 职场文书
教师工作表现自我评价
2015/03/05 职场文书
超强台风观后感
2015/06/09 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
Python实现打乒乓小游戏
2021/09/25 Python
SQL基础的查询语句
2021/11/11 MySQL