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

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

(0)

相关推荐

  • 从面试题学习Javascript 面向对象(创建对象)

    题目: 复制代码 代码如下: try{ var me = Man({ fullname: "小红" }); var she = new Man({ fullname: "小红" }); console.group(); console.info("我的名字是:" + me.attr("fullname") + "\n我的性别是:" + me.attr("gender")); consol

  • Javascript之面向对象--接口

    接口:对实现某一种任务.功能,目的等,所规定的一些原则. 程序中的接口:规定好有几个方法,方法名是什么.(因程序中要完成任务,都是通过函数或者说方法去实现的.) javascript中的接口:把实例出来的某"类型对象".和实例出来的"接口对象",进行一个比较,符合规则,就可以说:这个对象实现了规定的接口: (接口类:通过这个类,来实例出不同的接口.即不同的接口实例,也就是不同的方法个数和方法名称) (进行比较:其实质就是判断子类型实例出来的对象,是否有接口对象中所保

  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

  • 面向对象的Javascript之二(接口实现介绍)

    就足以说明接口在面向对象的领域中有多重要.但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一组对象包含相似的的特性.所幸的是JS拥有强大的灵活性(我在上文已谈过),这使得模仿接口特性又变得非常简单.那么到底是接口呢? 接口,为一些具有相似行为的类之间(可能为同一种类型,也可能为不同类型)提供统一的方法定义,使这些类之间能够很好的实现通信. 那使用接口到底有哪些好处呢?简单地说,可提高系统相似模块的重用性,使得不同类的通信更加稳固.一旦实现接口,

  • JavaScript面向对象中接口实现方法详解

    本文实例讲述了JavaScript面向对象中接口实现方法.分享给大家供大家参考,具体如下: 接口是面向对象编程的基础,它是一组包含了函数型方法的数据结构,与类一样,都是编程语言中比较抽象的概念.比如生活中的接口,机顶盒,人们利用它来实现收看不同频道和信号的节目,它犹如对不同类型的信息进行集合和封装的设备,最后把各种不同类型的信息转换为电视能够识别的信息.在编程语言中的接口,实际上是不同类的封装并提供统一的外部联系通道,这样其他对象就可以利用接口来调用不同类的成员了. --整理自<jQuery开发

  • JavaScript接口实现代码 (Interfaces In JavaScript)

    在实际中,我们可以在注释中定义好接口,在实际的代码中予以实现 比如: 复制代码 代码如下: /* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function save(); } */ var CompositeForm = function(id, method, action) { // implement

  • JavaScript接口的实现三种方式(推荐)

    Javascript模仿接口可以有三种方式:1.注释法 2.检查属性法 3.鸭式辨形法 1.注释法:此方法属于程序文档范畴,对接口的继承实现完全依靠程序员自觉 /* interface People{ function createHead(); function createBody(); } */ var woman = function(name){ //implements People interface this.name = name; } woman.prototype.show

  • 浅谈Javascript面向对象编程

    在JS中充分使用面向对象设计思想,可以极大限度的提升代码重用.降低模块间的偶合.更好的逻辑分层与并行开发.下面分几个步骤简单谈下我的理解. 一.数据类型与包装类 包装类 -- 类型名 -- 常见值 -- 分类 Number -- number -- 123.123 -- 基本数据类型 Boolean -- Boolean -- true.false -- 基本数据类型 String -- string -- "hello world!" -- 基本数据类型 Object -- obje

  • Javascript 面向对象(二)封装代码

    写个小例子: 第一步:做一个"手机的类" 复制代码 代码如下: var MobilePhone = (function(){ ---- })() 第二步:考虑这个类,里需要那些类的私有属性,这里我想定义的是实例出来手机的数量 复制代码 代码如下: var MobilePhone = (function(){ //私有属性 var count = 0; //代表手机的数量 })() 第三步:创建一个构造函数,即实例时候,对产生的新象的一个初始化,例如属性,方法的初始化;在这个例子中,每一

  • Javascript 面向对象(三)接口代码

    程序中的接口:规定好有几个方法,方法名是什么.(因程序中要完成任务,都是通过函数或者说方法去实现的.) javascript中的接口:把实例出来的某"类型对象".和实例出来的"接口对象",进行一个比较,符合规则,就可以说:这个对象实现了规定的接口: (接口类:通过这个类,来实例出不同的接口.即不同的接口实例,也就是不同的方法个数和方法名称) (进行比较:其实质就是判断子类型实例出来的对象,是否有接口对象中所保存的方法名,还有个数.) 小实例: 电话类,下面可以有&q

  • javascript面向对象入门基础详细介绍

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

  • Javascript 面向对象(一)(共有方法,私有方法,特权方法)

    私有方法:私有方法本身是可以访问类内部的所有属性的,即私有属性和公有属性.但是私有方法是不可以在类的外部被调用. 私有方法写法: 复制代码 代码如下: function myClass () { var private_attribute = initial_value; function private_method () { } var private_method2 = function () { } } 实例showpet()就是一个私有方法 复制代码 代码如下: var pet=fun

随机推荐