JavaScript接口实现方法实例分析_javascript技巧

来源:脚本之家  责任编辑:小易  

假设你有一个类function clazz {this.OnSendWeChatMsgReport=function(userId,sessionId,msgseq,code,des,timeStamp){}this.OnUploadFileToMMSReport=function(strFileName,status,strUrl){}this.OnDownloadFileToMMSReport=function(strUrl,status,strFileName){}this.OnWorkStaticInfoReport=function(staticInfo){}this.OnQueueReport=function(ServiceReportInfo){}}在其它地方这样调用var obj=new clazz();obj.OnSendWeCharMsgReport(userId,sessionId,msgseq,code,desc,timestamp);www.zgxue.com防采集请勿采集本网。

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

选A A、只能弹出提示 B、可接口方式操作确认、取消动作 C、可接口操作输入框提交操作 D、可接口操作新打开界面的路由、大小等。

JavaScript中实现接口的方法有三种:

同时由于Javascript是基于对象的语言,注意不是面向对象的语言,所以它在对对象的支持上有一定缺陷,大家所熟悉的诸如对象继承,多态等面向对象语言所具有的基本特性在Javascript中只能通过一些变通手段来

第一种,使用注释的方法实现接口

你可以使用CSS zoom属性 例如: body { zoom:3;moz-transform:scale(3);moz-transform-origin:0 0;} 把整个body放大三倍,缩小同理,改成比1小的数字即可

特点:

(1)最简单,但是功能最弱

一个完整的JavaScript 脚本实现应包含如下三部分: ECMAScript 核心:为不同的宿主环境提供核心的脚本能力;DOM(文档对象模型):规定了访问HTML 和XML 的应用程序接口;BOM(浏览器对象模型)

(2)利用 interface和 implement"文字"

1,属性是节点对象的属性吧。2,属性不是节点吧;就好比一个节点对象的属性,不算一个节点啊。3,火狐不支持outhtml,网上可以搜索到在火狐下也可以使用的outhtml方法;

(3)把他们用注释的方式表现出来

具体实现如下:

1,用注释定义一个接口

/* * interface PersonDao(){ * function add(obj); * function remove(obj); * function find(id); * } * */

(2)用注释来注明实现的接口

/* * PersonDaoImp implement PersonDao (PersonDaoImp实现接口PersonDao) * */ var PersonDaoImp=function () { };//定义实现类 //实现 PersonDaoImp.prototype.add=function(obj){ //具体代码 } PersonDaoImp.prototype.remove=function(obj){ //具体代码 } PersonDaoImp.prototype.find=function(id){ //具体代码 }

总结:

(1)使用文字的形式告知是谁实现谁

(2)优点,这样是很有意义的,大型项目需要的就是规范和标准,可以在没有写实现之前充分考虑架构和设计

(3)缺点:需要人为的遵守注释中的说明

第二种,使用属性检验法实现接口 。 实质为通过一个属性判断实现了谁

具体如下:

1,用注释来定义一个接口

/* * interface PersonDao(){ * function add(obj); * function remove(obj); * function find(id); * } * */

2,用注释来说明实现接口类+实现类中增加属性

/* * PersonDaoImp implement PersonDao * */ var PersonDaoImp=function () { this.implementInterface=["PersonDao"];//告知该类实现的接口是啥是一个数组,} PersonDaoImp.prototype.add=function(obj){ alert(obj); } PersonDaoImp.prototype.remove=function(obj){ //具体实现 } PersonDaoImp.prototype.find=function(id){ //具体实现 }

(3)检验属性的方法

//接收一个不定参数 可能有多个 使用Object function imp1(Object) { //遍历传入对象的所用属性 i=1:第一个是不定参数,从第二个参数开始遍历接口,故i=1 for(var i=1;i<arguments.length;i++){//arguments除Object外 var interfaceName=arguments[i]; var interfaceFind=false; for(var j=0;j<Object.implementInterface.length;j++){ if(Object.implementInterface[j]==interfaceName){ interfaceFind=true; break; } } if(!interfaceFind){ return false; } } return true; }

(4)接口与实现类的配合实现

function addObj(obj) { var PersonDao=new PersonDaoImp(); //开始检查 实现类是否实现接口 if(!imp1(PersonDao,"PersonDao")){//某对象是否实现接口(对象,接口) 第一次参数是对象,第二个参数是不定参数 throw new Error("PersonDaoImp没有实现接口PersonDao"); }else{//实现 PersonDao.add(obj); } }

(5)使用

addObj("实现");

 总结一下,该种方式只是简单判断了在实现时有没有传递与属性中相同的接口名称,而对于方法是否实现没有做验证。

 于是有了第三种的鸭式变形法--检验接口中的方法是否实现。

第三种,鸭式变形法 一种形似的命名方式,从实现角度来理解为:如果对象中具有的方法与接口中定义的方法同名 则认为是实现了本接口

具体如下:

1,定义一个接口类 注意这里与上面两种不一样了,不用写注释说明了

var Interface=function (name,methods) {//name:接口名字 if(arguments.length<2){ alert("必须是两个参数") } this.name=name; this.methods=[];//定义一个空数组装载函数名 for(var i=0;i<methods.length;i++){ if(typeof methods[i]!="string"){ alert("函数名必须是字符串类型"); }else { this.methods.push( methods[i]); } } }

2,定义一个静态方法来实现接口与实现类的 直接检验

注意,静态方法不要写成Interface.prototype ,因为这是写到接口的原型链上的,我们要把静态的函数直接写到类层次上。

Interface.ensureImplement=function (object) { if(arguments.length<2){ throw new Error("参数必须不少于2个") return false; } for(var i=1;i<arguments.length;i++){ var inter=arguments[i]; //如果是接口就必须是Interface类型 if(inter.constructor!=Interface){ throw new Error("如果是接口类的话,就必须是Interface类型"); } //判断接口中的方法是否全部实现 //遍历函数集合 for(var j=0;j<inter.methods.length;j++){ var method=inter.methods[j];//接口中所有函数 //object[method]是传入的函数 if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同 throw new Error("实现类中没有完全实现接口中的所有方法") } } } }

3,应用

3.1定义自己的接口    

         例如:此处定义两个接口

var FirstInterface=new Interface("FirstInterface",["add","remove","search"]);//第一个接口 var SecondInterface=new Interface("SecondInterface",["save"]);//第二个接口

3.2,定义实现类

function commManager() {//实现两个类 //先实现方法 this.add=function () { alert("ok--实现"); } this.remove=function () { } this.search=function () { } this.save=function () { } //检验 Interface.ensureImplement(this,GridManager,formManager); }

3.3,实现类的实例化

var comm=new commManager(); comm.add();//调用

 总结:三种方式都有自己的优势与缺点,每种的选择需要根据自己的需要进行选择。但是在设计的时候实现类间低耦合的相当重要的。

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

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

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

在javascript中并没有原生的创建或者实现接口的方式,或者判定一个类型是否实现了某个接口,我们只能利用js的灵活性的特点,模拟接口。在javascript中实现接口有三种方式:注释描述、属性验证、鸭子模型。note:因为我看的是英文书,翻译水平有限,不知道有些词汇如何翻译,大家只能领会精神了。1.注释描述(Describing Interfaces with Comments)例子:复制代码 代码如下:interface Composite {function add(child);function remove(child);function getChild(index);}interface FormItem {function save();}var CompositeForm=function(id,method,action){/implements Composite,FormItem};Implement the Composite interface.CompositeForm.prototype.add=function(child){};CompositeForm.prototype.remove=function(child){};CompositeForm.prototype.getChild=function(index){};Implement the FormItem interface.CompositeForm.prototype.save=function(){};模拟其他7a64e4b893e5b19e31333339653737面向对象语言,使用interface 和 implements关键字,但是需要将他们注释起来,这样就不会有语法错误。这样做的目的,只是为了告诉其他编程人员,这些类需要实现什么方法,需要在编程的时候加以注意。但是没有提供一种验证方式,这些类是否正确实现了这些接口中的方法,这种方式就是一种文档化的作法。2.属性验证(Emulating Interfaces with Attribute Checking)例子:复制代码 代码如下:interfaceComposite {function add(child);function remove(child);function getChild(index);}interface FormItem {function save();}var CompositeForm=function(id,method,action){this.implementsInterfaces=['Composite','FormItem'];};function addForm(formInstance){if!implements(formInstance,'Composite','FormItem')){throw new Error("Object does not implement a required interface.");}}The implements function,which checks to see if an object declares that itimplements the required interfaces.function implements(object){for(var i=1;i;i+){Looping through all argumentsafter the first one.var interfaceName=arguments[i];var interfaceFound=false;for(var j=0;j;j+){if(object.implementsInterfaces[j]=interfaceName){interfaceFound=true;break;}}if!interfaceFound){return false;An interface was not found.}}return true;All interfaces were found.}这种方式比第一种方式有所改进,接口的定义仍然以注释的方式实现,但是添加了验证方法,判断一个类型是否实现了某个接口。3.鸭子类型(Emulating Interfaces with Duck Typing)复制代码 代码如下:Interfaces.var Composite=new Interface('Composite',['add','remove','getChild']);var FormItem=new Interface('FormItem',['save']);CompositeForm classvar CompositeForm=function(id,method,action){};function addForm(formInstance){ensureImplements(formInstance,Composite,FormItem);This function will throw an error if a required method is not implemented.}Constructor.var Interface=function(name,methods){if(arguments.length!2){throw new Error("Interface constructor called witharguments.length+"arguments,but expected exactly 2.");}this.name=name;this.methods=[];for(var i=0,len=methods.length;i;i+){if(typeof methods[i]!'string'){throw new Error("Interface constructor expects method names to bepassed in as a string.");}this.methods.push(methods[i]);}};Static class method.Interface.ensureImplements=function(object){if(arguments.length){throw new Error("Function Interface.ensureImplements called witharguments.length+"arguments,but expected at least 2.");}for(var i=1,len=arguments.length;i;i+){var interface=arguments[i];if(interface.constructor!Interface){throw new Error("Function Interface.ensureImplements expects argumentstwo and above to be instances of Interface.");}for(var j=0,methodsLen=interface.methods.length;j;j+){var method=interface.methods[j];if!object[method]|typeof object[method]!'function'){throw new Error("Function Interface.ensureImplements:objectdoes not implement the"+interface.name+"interface.Method"+method+"was not found.");}}}};何时使用接口?一直使用严格的类型验证并不适合,因为大多数javascript程序员已经在没有接口和接口验证的情况下编程多年。当你用设计模式开始设计一个很复杂的系统的时候,使用接口更有益处。看起来使用接口好像限制了javascript的灵活性,但实际上他让你的代码变得更加的松耦合。他使你的代码变得更加灵活,你可以传送任何类型的变量,并且保证他有你想要的方法。有很多场景接口非常适合使用。在一个大型系统里,很多程序员一起参与开发项目,接口就变得非常必要了。程序员经常要访问一个还没有实现的api,或者为其他程序员提供别人依赖的一个方法存根,在这种情况下,接口变得相当的有价值。他们可以文档化api,并作为编程的契约。当存根被实现的api替换的时候你能立即知道,如果在开发过程中api有所变动,他能被另一个实现该接口的方法无缝替换。如何使用接口?首先要解决的问题是,在你的代码中是否适合使用接口。如果是小项目,使用接口会增加代码的复杂度。所以你要确定使用接口的情况下,是否是益处大于弊端。如果要使用接口,下面有几条建议:1.引用Interface 类到你的页面文件。interface的源文件你可以再如下站点找到:http://jsdesignpatterns.com/.2.检查你的代码,确定哪些方法需要抽象到接口里面。3.创建接口对象,没个接口对象里面包含一组相关的方法。4.移除所有构造器验证,我们将使用第三种接口实现方式,也就是鸭子类型。5.用Interface.ensureImplements替代构造器验证。您可能感兴趣的文章:小议javascript 设计模式 推荐JavaScript 设计模式之组合模式解析javascript 设计模式之单体模式 面向对象学习基础JavaScript 设计模式 安全沙箱模式JavaScript设计模式之观察者模式(发布者-订阅者模式)JavaScript设计模式之原型模式(Object.create与prototype)介绍JavaScript设计模式之工厂方法模式介绍javascript设计模式之中介者模式Mediator学习JavaScript设计模式之责任链模式内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript面向对象中接口实现方法详解
  • javascript之面向对象--接口
  • javascript 面向对象(三)接口代码
  • 面向对象的javascript之二(接口实现介绍)
  • javascript 接口原理与用法实例详解
  • javascript接口实现代码 (interfaces in javascript)
  • javascript设计模式 接口介绍
  • js实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
  • javascript判断对象和数组的两种方法
  • javascript uploadify文件上传实例
  • requirejs多页面应用实例分析
  • js实现千分符和保留几位小数的简单实例
  • javascript支持firefox,ie7页面布局拖拽效果代码
  • 微信小程序实现上拉加载功能
  • react 路由懒加载的几种实现方案
  • 怎么清空javascript数组
  • 针对bootstrap中tabs控件的美化和完善(推荐)
  • Javascript如何实现接口?
  • javascript 接口怎么用
  • javascript 实现get接口调用,非Ajax方式
  • javascript如何实现定时几秒换图片
  • 请教大神:哪个方法不是用作JavaScript的接口元素?
  • 如何设计javascript客户端调用接口
  • 如何实现HTML整体进行缩放 用css或javascript代码都可以
  • 一个完整的JavaScript 脚本实现应包含那些部分?
  • 急,javascript的接口和outerhtml问题?
  • javascript可以用继承,可以用接口吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript面向对象入门教程javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript数学运算用法总结javascript面向对象中接口实现方法详解javascript之面向对象--接口javascript 面向对象(三)接口代码面向对象的javascript之二(接口实现介绍)javascript 接口原理与用法实例详解javascript接口实现代码 (interfaces in javascript)javascript设计模式 接口介绍js实现的定时器展示简单秒表、页面弹框及跳转操作完整示例javascript判断对象和数组的两种方法javascript uploadify文件上传实例requirejs多页面应用实例分析js实现千分符和保留几位小数的简单实例javascript支持firefox,ie7页面布局拖拽效果代码微信小程序实现上拉加载功能react 路由懒加载的几种实现方案怎么清空javascript数组针对bootstrap中tabs控件的美化和完善(推荐)js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包rgb颜色值转html十六进制(hex)代码的js函es6新特性七:数组的扩充详解javascript原型链与继承操作实例总结深入理解javascript中的 “this”jquery.extend()的实现方式详解及实例一个js随机颜色脚本(用于标签页面,也可微信小程序 扭蛋抽奖机css3动画实现详解javascript跟随鼠标x,y坐标移动的字效果javascript中的function.prototye.bindiframe的onreadystatechange事件在firefo
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved