JavaScript实现接口的三种经典方式
/*
接口:提供一种说明一个对象应该有哪些方法的手段
js中有三种方式实现接口:
1 注释描述接口
2 属性检测接口
3 鸭式辨型接口
*/ /*
1 注释描述接口: 不推荐
优点: 利用注解,给出参考
缺点:纯文档约束,是一个假接口,
程序不能检查实现接口对象是否实现所有接口方法
*/ /**
* interface Composite{
* function a();
* function b();
* }
*/
// CompositeImpl implements Composite
var CompositeImpl = function(){
//业务逻辑
};
CompositeImpl.prototype.a = function(){
//业务逻辑
};
CompositeImpl.prototype.b = function(){
//业务逻辑
}; /*
2 属性检测接口:
优点:能够检测实现哪些接口
缺点:没有完全脱离文档,
不能检测是否实现每个接口里的所有方法
*/
/**
* interface Composite{
* function a();
* }
*
* interface FormItem(){
* function b();
* }
*/
// CompositeImpl implements Composite,FormItem
var interfacesImpl = function(){
//在实现类内部用一个数组保存要实现的方法名
//通常这个属性名是团队中规定好的
this.implementsInterfaces = ["Composite","FormItem"];
};
CompositeImpl.prototype.a = function(){
//业务逻辑
};
CompositeImpl.prototype.b = function(){
//业务逻辑
}; //专门为这个实现对象写一个检测函数,传入实例对象,用于检查实力对象是否实现了所有接口
function checkImplements(obj){
//调用检查方法 obj是否实现两个接口,如果没有都实现则抛出异常
if(!isImplements(obj,"Composite","FormItem")){
throw new Error("接口没有全部实现!");
}
//接收一个参数obj是要检查的对象
function isImplements(obj){
//arguments对象能够获取实际传入函数的所有参数的数组
//传入的第0个参数是要检查的对象,所以从1开始检查
for(var i = 1; i < arguments.length ; i++){
//接收接口中每个接口的名字
var interfaceName = arguments[i];
//一个标记,是否实现这个接口,默认没有
var foundFlag = false;
//循环查询传入实例对象的实现接口数组 以检查是否全部实现
for(var j = 0 ;j <obj.implementsInterfaces.length;j++){
//如果 实现了这个接口 就修改标记跳出循环
if(obj.implementsInterfaces[j]==interfaceName){
foundFlag = true;
break;
}
}
//如果遍历实现接口数组之后没找到 就返回false
if(!foundFlag){
return false;
}
}
//如果都找到了 返回true
return true;
}
} //使用实力对象并检测
var o = new interfacesImpl();
checkImplements(o); //不会抛出异常 因为正确实现了两个接口
//如果在写interfacesImpl内的implementsInterfaces列表的时候少写了,那么就会在检查函数中抛出异常 /*
3 鸭式辨型法:(目前开发中使用的方式)
实现思想: */ //1 接口类 Class Interface
/**
* 接口类需要的参数:
* 1 接口的名字
* 2 要实现方法名称的数组
*/
var Interface = function( name , methods ){
//判断参数个数
if(arguments.length!=2){
throw new Error("接口构造器参数必须是两个!");
}
this.name = name;
this.methods = [];
for(var i = 0;i<methods.length;i++){
if( typeof methods[i] !== "string" ){
throw new Error("接口实现的函数名称必须是字符串!");
}
this.methods.push(methods[i]);
} };
//2 准备工作:
// 2.1 实例化接口对象 传入接口名 和 要实现的方法数组
var CompositeInterface = new Interface("CompositeInterface",["add","remove"]);
var FormItemInterface = new Interface("FormItemInterface",["update","select"]); // 2.2 实现接口的类
//CompositeImpl implementes CompositeInterface ,FormItemInterface
var CompositeImpl = function(){ };
// 2.3 实现接口的方法
CompositeImpl.prototype.add = function(obj){
alert("add...");
};
CompositeImpl.prototype.remove = function(obj){
alert("remove...");
};
CompositeImpl.prototype.select = function(obj){
alert("select...");
};
//在这里少实现一个方法 下面检测是否全部实现了接口方法
// CompositeImpl.prototype.update = function(obj){
// alert("update...");
// };
// 实例化 实现接口的对象
var c = new CompositeImpl(); //3 检验接口里的方法是否全部实现
// 如果检验通过 继续执行;如果不通过抛出异常;
Interface.ensureImplements = function(obj){
// 如果接收到参数小于2 说明 传参出错了,只传入一个参数,,没有传入实现的接口
if(arguments.length<2){
throw new Error("接口检查方法的参数必须多余两个!");
}
//获得要见测的接口实现对象之后的参数 各个接口
for(var i = 1,len = arguments.length;i<len;i++){
var instanceInterface = arguments[i]; //获取当前这个接口
//判断接收到的是不是接口的对象 如果不是 抛出异常
if( instanceInterface.constructor !== Interface){
throw new Error("接口检测函数必须传入接口对象!");
}
//检查实例化接口的对象是不是实现了接口里的所有方法
// 当前接口对象里的每一个方法
for(var j = 0 ; j<instanceInterface.methods.length;j++){
var methodName = instanceInterface.methods[j]; //接收到了字符串的方法名
//如果obj里面没有有methodName这个方法 或者有这个属性但是不是函数 就抛出异常
if(!obj[methodName] || typeof obj[methodName] !== "function"){
throw new Error("接口方法"+ methodName +"没有实现!");
}
}
} };
//传入要检查的类,和他要实现的所有接口对象
Interface.ensureImplements(c ,CompositeInterface ,FormItemInterface );
c.add();
JavaScript实现接口的三种经典方式的更多相关文章
- C#接口的三种实现方式
转自原文C#接口的三种实现方式 public interface MyInterface { /// 下面三个方法的签名都是 /// .method public hidebysig newslot ...
- 初见Ajax——javascript访问DOM的三种访问方式
最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台 ...
- JavaScript声明全局变量的三种方式
JavaScript声明全局变量的三种方式 JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...
- 【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...
- JavaScript 闭包的详细分享(三种创建方式)(附小实例)
JavaScript闭包的详细理解 一.原理:闭包函数--指有权访问私有函数里面的变量和对象还有方法等:通俗的讲就是突破私有函数的作用域,让函数外面能够使用函数里面的变量及方法. 1.第一种创建方式 ...
- javascript中构造函数的三种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- JavaScript新手学习笔记3——三种排序方式(冒泡排序、插入排序、快速排序)
每种编程语言学到数组的时候,都会讲到排序算法,当时学C语言的时候,卡在排序算法.今天来总结一下javascript中如何实现三种排序算法. 1.冒泡排序(默认升序排列哦) 原理: 冒泡排序的原理,顾名 ...
- python笔记-20 django进阶 (model与form、modelform对比,三种ajax方式的对比,随机验证码,kindeditor)
一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...
随机推荐
- Android开发——Fragment的简单使用总结
前言: 之前搞项目的时候,就使用了这个Fragment,中间遇到了许多坑,把坑都解决了,现在写一篇较为简单的Fragment使用总结 Fragment的简单介绍: 简单来说,Fragment其实可以理 ...
- [C#]基于命名管道的一对多进程间通讯
在工作中碰到了一个进程间通讯的问题,大概是这样的: 项目本身是.net Core做的,但是有部分功能Core中不方便实现,有的是依赖Framework,有的是因为权限和安全问题. 那基于这个问题,问了 ...
- Spring Security 源码解析(一)AbstractAuthenticationProcessingFilter
# 前言 最近在做 Spring OAuth2 登录,并在登录之后保存 Cookies.具体而言就是 Spring OAuth2 和 Spring Security 集成.Google一下竟然没有发现 ...
- selenium-01 搭建环境
很老套,但是不得不做的事. selenium的发展史,具体的虫师大大已经写得很具体了:http://www.cnblogs.com/fnng/p/3653793.html 1.第一种使用的姿势就是ID ...
- 兄弟连教育分享:用CSS实现鼠标悬停提示的方法
兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...
- 彻底弄懂CommonJS和AMD/CMD!
JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧, ...
- 模拟select选中option的效果
大致情况如下:网页上有一个表单,表单中有一个select类型的控件,我要选择option后,表单相对应的input部分会option自动填充选中数据. 我想要的是:实现一个网页上的效果,在这个页面被打 ...
- linux下安装Sublime Text3并将它的快捷方式放进启动器中
Sublime Text是一个代码编辑器,我主要是用它来编辑python.下面就来简单说明下它在linux的安装过程吧! 1.添加sublime text3的仓库 首先按下快捷键ctrl+alt+t打 ...
- Matlab绘图基础——绘制向量图,二维三维(绘制参数曲线图)
------------------------------------------- %绘制向量场图 %例一 clear all;clc; [X,Y] = meshgrid(-2:.2:2,-3:. ...
- Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧
Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...