面向对象在JavaScript中的接口实现
接口是面向对象编程的基础。它是一组包括了函数型方法的数据结构,与类一样。都是编程语言中比較抽象的概念。比方生活中的接口。机顶盒。人们利用它来实现收看不同频道和信号的节目,它宛如对不同类型的信息进行集合和封装的设备。最后把各种不同类型的信息转换为电视可以识别的信息。在编程语言中的接口,实际上是不同类的封装并提供统一的外部联系通道,这样其它对象就行利用接口来调用不同类的成员了。
——整理自《jQuery开发从入门到精通》
接口的概念
API接口(应用程序接口)、人机交互接口、电源接口、USB接口等尽管用途不同,功能各异。可是都包括一个共同的特性:约定、规范。
能够说,接口就是一张契约和合同,它约定了设计者和使用者都必须遵循的要求。
interface Base{
void function1();
void function2();
void function3();
}
Base接口承诺了3个基本功能:function1()、function2()、function3()。
这个接口就像是一份合同。在甲方(调用类的用户)和乙方(定义类的开发者)之间约定。
class App implements Base // 定义一个App类,用这个类来实现接口Base
专业来说就是。应用类App继承Base接口类。
class App implements Base{
void function1(){
System.out.println("I am fun1");
}
void function2(){
System.out.println("I am fun2");
}
void function3(){
System.out.println("I am fun3");
}
}
这样。乙方实现了这个接口,而甲方也应该来依照接口的约定去使用类App即可了。
可是对于JavaScript弱类型语言来说,严格的类型检查会束缚JavaScript的灵活性。非常多前端开发者根本不用接口,但不会影响脚本的设计。
项目越大。这样的开销越大。
所以,用不用接口能够遵循两个条件:
假设是简单的应用,就不必使用接口了。
防止它被频繁运行。影响性能。
接口的实现
在输入前分别检測每一个參数类型是否符合规定。
同一时候检查參数是否存在残缺,并即时以0补齐參数。
function Interface(name,methods){ // 接口辅助类,參数包含接口实例的名称和方法集
if(arguments.length!=2){ // 假设參数个数不等于2,抛出异常。
throw new Error('标准接口约定。须要两个參数');
}
this.name = name; // 存储第一个參数值,实例化后就是接口实例的名称
this.methods = []; // 接口实例的方法存储器
if(methods.length < 1){ // 假设第二个參数的元素个数为0,说明是空数组。抛出异常。
throw new Error('接口的第二个參数不能为空');
}
for(var i = 0; i < methods.length; i++){ // 開始对第2个參数的元素进行遍历检測
var item = methods[i];
if(typeof item[0] !== 'string') { // 假设第二个參数的第一个元素不是string类型,抛出异常
throw new Error("接口约定的第一个參数应为字符串");
}
if(item[1]&&typeof item[1] !== 'number'){ // 假设第二个參数有第二个元素,且第二个元素不是number类型,抛出异常
throw new Error('接口约定的第个參数应为数值');
}
if(item.length == 1){ // 假设第二个參数仅仅有一个元素。那么手动给它加入第二个元素 0
item[1] = 0;
}
this.methods.push(item); // 把符合规定的方法存储到数组存储器中。
}
}
(2) 为接口辅助类 Interface 定义一个方法 implements,该方法将检測实现类是否符合接口实例的约定。
它至少包含两个參数,第1个參数o表示实现类。第2个參数及其后面的參数表示该类将要实现的接口标准。也就是说,能够为一个类指定多个接口约定,这样就能够更灵活的分类设计接口实例。然后遍历第二个及其后面的全部參数,在循环结构中,先洁厕接口是否为接口标准的实例,否则就会抛出异常。
再从接口实例的方法存储器中逐一读取方法名,填入类中来验证类的方法是否符合接口实例设置的标准,验证包含方法名、function类型和參数个数。假设有问题,马上抛出异常。
Interface.implements = function(o){ // 用于检測类方法是否符合接口实例的约定 。此处的o,将来会是类中的this
if(arguments.length<2){ // 检測该方法传递的数值是否符合规定
throw new Error("接口约定类应包括至少两个參数。");
}
for(var i=1;i<arguments.length; i++){ // 遍历检測类所遵循的实例是否合法
var interface = arguments[i]; // 这里interface表示接口的实例对象。
if(interface.constructor !== Interface){
throw new Error('从第2个以上的參数必须为接口实例');
}
for(var j=0;j<interface.methods.length;j++){ // 检測类方法是否符合接口实例的约定
var method = interface.methods[j][0];
if(!o[method] || typeof o[method] !== 'function' || o[method].length!==interface.methods[j][1]) {
throw new Error("该实现类没能履行" + interface.name + "接口方法" + method + "约定");
}
}
}
}
(3) 实例化接口标准,Interface 接口不过个构造函数,也就是个框架协议,还没有制定类应该遵循的详细标准。框架协议中。已经设计好了监測逻辑,一旦实例化接口。并指明类应遵守的约定,那么应用该标准的实例的类就必须准守。
// 设置接口的不同实现实例
var Get = new Interface("Get",[["get",0]]);
var Set = new Interface("Set",[["set",1]]);
var Saying = new Interface("Saying",[["saying",1]]);
var Base = new Interface("Base",[["get",0],["set",1]]);
var Base1 = new Interface("Base1",[["set",1],["get",0]]);
var Base2 = new Interface("Base2",[["get",0],["set",1],["saying",1]]);
(4) 在类中定义应该实现的标准,即类应该遵循的接口约定。
// 创建一个木驴类
function Neddy(){
this.name = '';
Interface.implements(this,Base,Get,Set); // 让木驴类实现接口的实例,能够指定多个。也能够仅仅有一个。
}
// 依照接口实例来定义 两个方法get,set
Neddy.prototype.get = function(){
return this.name;
}
Neddy.prototype.set = function(name){
this.name = name;
}
(5) 在类中设置了多个接口实例。我们来进行检測
// 检測接口实现
var neddy = new Neddy();
neddy.set("Testing");
console.log(neddy.get()); // Testing
成功完毕接口的应用,这里,假设在Neddy类中,我们让它实现的接口实例和 Neddy.prototype中给类定义的方法不统一,或者接口与接口之间有冲突,就会抛出异常。比方我们能够改动Neddy中的接口实现。再给它加入一个接口实例Base2,就会报异常。由于我们没有依照接口的协议,给Neddy加入saying()方法。

① arguments.callee.length
② 函数名.length
③ arguments.length
当中 ① 和 ② 是一样的,③ 视详细情况而定。
一般函数声明式的定义有个默认属性name继承自Object ,举比例如以下:
function fn(x,y){
console.log(fn.name); // fn
console.log(arguments.callee.name); // fn
console.log(fn.length); // 2
console.log(arguments.callee.length); // 2
console.log(arguments.length); // 视详细情况而定
}
fn(1,2,3); // 分别输出 fn fn 2 2 3
为了说明上面接口检測參数长度 o[method].length 的问题 ,举比例如以下:
function A(){}
A.prototype.say = function (x,y,z,o) {}
var a = new A();
console.log(a['say'].length); // 4
面向对象在JavaScript中的接口实现的更多相关文章
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 前端开发:面向对象与javascript中的面向对象实现(一)
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- 【总结】浅谈JavaScript中的接口
一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...
- javascript中天气接口案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端开发:javascript中的面向对象
前端开发:面向对象与javascript中的面向对象实现(一) 面向对象理解: 面向对象是一种对现实世界理解和抽象的方法,是一种先进的程序设计理念,是一种比较抽象的,多形态的设计模式.我们可以这么理解 ...
- 如何理解并学习javascript中的面向对象(OOP) [转]
如果你想让你的javascript代码变得更加优美,性能更加卓越.或者,你想像jQuery的作者一样,写出属于自己优秀的类库(哪怕是基于 jquery的插件).那么,你请务必要学习javascript ...
- 『JavaScript』模仿接口
JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...
- typescript中的接口
说到接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心 ...
- JAVAFX 2.0 javascript中调用java代码
现在你已经知道如何在JavaFX中调用JavaScript.在本章中,你将了解到相反的功能——在web页面中调用JavaFX. 大体上的理念是在JavaFX程序中创建一个接口对象,并通过调用JSObj ...
随机推荐
- BZOJ 1010: [HNOI2008]玩具装箱toy(DP+斜率优化)
[HNOI2008]玩具装箱toy Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊 ...
- [NOI2010][bzoj2006] 超级钢琴 [主席树/ST表+堆]
题面: 传送门 思路: 首先容易想到用堆维护的O(n2logn)暴力 那么肯定就是在这个基础上套数据结构了[愉快] 然而我因为过于蒟蒻......只想得到主席树暴力***过去的方法 大概就是把前缀和算 ...
- BZOJ2123 [Sdoi2013]森林 【主席树 + 启发式合并】
题目 输入格式 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负 ...
- 排列计数(permutation)
排列计数(permutation) 题目描述 求有多少种长度为n的序列A,满足以下条件: 1) 1~n这n个数在序列中各出现了一次 2) 若第i个数A[i]的值为i,则称i是稳定的.序列恰好有m个数是 ...
- 【VBA】利用Range声明Array(一维/二维)
[说明] B2开始到B?(中间不能有空格),定义一维数组Arr_approver() Dim R_sh As Worksheet Set R_sh = ThisWorkbook.Sheets(&quo ...
- HTML+CSS之iframe
碎碎:这两天在实践中,用到了 iframe,之前对其不甚了解,了解之中遇到好多奇葩问题,今天记录下这两天遇到的相关的内容. 嵌入的 iframe 页面的边框 嵌入的 iframe 页面的背景 嵌入的 ...
- vue项目上传文件以及进度条
最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把 ...
- 【09】react 之 表单组件
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- jQuery 拖动排序
原文发布时间为:2010-04-11 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html><html lang="en">< ...
- .net web api ioc unity usage
1.use nuget to install unity.webapi 2.add configurations in application_start folder using Microsoft ...