1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Untitled Document</title>
  6.         <script type=text/javascript charset=utf-8>
  7.         //javascript没有定义接口的概念，我们通过模拟高级程序语言的方式来创建javascript中的接口。实现要重写接口所有的方法。
  8.         /* javascript定义接口有三种方式
  9.         1 注释描述接口
  10.         2 属性检测接口
  11.         3 鸭式辩型接口
  12.         */
  13.  
  14.         // 1 注解描述的方式（注释方式，假的）
  15.         /**
  16.         interface Composite {
  17.             function add(obj);
  18.               function remove(obj);
  19.              function uopdate(obj);
  20.         }
  21.  
  22.         var CompositeImpl = function(){
  23.             this.add = function(){},
  24.             this.remove = function(){},
  25.             this.upload = function(){}
  26.         };
  27.         var c1 = new CompositeImpl();
  28.         var c2 = new CompositeImpl();
  29.         alert(c1.add == c2.add); //false,每次都有一个add,所以写到原型里面
  30.         */
  31.  
  32.         // CompositeImpl implements Composite
  33.         var CompositeImpl = function(){
  34.         };
  35.  
  36.         CompositeImpl.prototype.add = function(obj){
  37.         }
  38.         CompositeImpl.prototype.remove = function(obj){
  39.         }
  40.         CompositeImpl.prototype.update = function(obj){
  41.         }
  42.  
  43.         var c1 = new CompositeImpl();
  44.         var c2 = new CompositeImpl();
  45.         alert(c1.add == c2.add);
  46.         </script>
  47.     </head>
  48.     <body>
  49.     </body>
  50. </html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Untitled Document</title>
  6.         <script type=text/javascript charset=utf-8>
  7.         // 第二种实现接口的方式 属性检测的方式（继承接口，就要实现所有方法。）
  8.         /**
  9.          *     interface Composite {
  10.          *         function add(obj);
  11.          *         function remove(obj);
  12.          *        function uopdate(obj);
  13.          *  }
  14.          *
  15.          *  interface FormItem {
  16.          *      function select(obj);
  17.          *  }
  18.          *
  19.          */        
  20.  
  21.          // CompositeImpl implements Composite , FormItem
  22.          var CompositeImpl = function(){
  23.             // 显示的再类的内部 接受所实现的接口
  24.             // 一般来说是一个规范 我们项目经理:在类的内部定义一个数组(名字要固定)
  25.             this.implementsInterfaces = ['Composite' ,'FormItem' ];//this是这个类的当前对象
  26.          }    
  27.  
  28.         CompositeImpl.prototype.add = function(obj){
  29.             alert('add...');
  30.         }
  31.         CompositeImpl.prototype.remove = function(obj){
  32.         }
  33.         CompositeImpl.prototype.update = function(obj){
  34.         }
  35.         CompositeImpl.prototype.select = function(obj){
  36.         }        
  37.  
  38.         // 检测CompositeImpl类的对象的
  39.         function CheckCompositeImpl(instance){
  40.             //判断当前对象是否实现了所有的接口
  41.             if(!IsImplements(instance,'Composite','FormItem')){
  42.                 throw new Error('Object does not implement a required interface!');
  43.             }
  44.         }
  45.  
  46.         function IsImplements(object){//实参多个，形参一个，这个形参就是实参的第一个，
  47.             // arguments 对象 获得函数的实际参数
  48.             for(var i = 1 ; i < arguments.length;i++){
  49.                 //接受所实现的每一个接口的名字
  50.                 var interfaceName = arguments[i];//arguments[i]在不在object.implementsInterfaces里面
  51.                 var interfaceFound = false ;
  52.                 for(var j = 0 ; j <object.implementsInterfaces.length;j++){
  53.                         if(object.implementsInterfaces[j] == interfaceName)    {
  54.                             interfaceFound = true ;
  55.                             break;//跳出for循环
  56.                         }
  57.                 }
  58.                 if(!interfaceFound){
  59.                     return false ;
  60.                 }
  61.             }
  62.             return true ;
  63.         }
  64.  
  65.         var c1 = new CompositeImpl();
  66.         CheckCompositeImpl(c1);
  67.         c1.add();
  68.         </script>
  69.     </head>
  70.     <body>
  71.     </body>
  72. </html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Untitled Document</title>
  6.         <script type=text/javascript charset=utf-8>
  7.         // 实现接口的第三种方式：鸭式辨型法实现接口(最完美的javascript实现接口方式)
  8.         // 鸭式辨型法实现的核心：一个类实现接口的主要目的：把接口里的方法都实现（检测方法）
  9.         // 完全面向对象 代码也实现统一  也解耦了
  10.  
  11.         // 一： 接口类 Class Interface ==>实例化N多个接口
  12.  
  13.         /**
  14.          * 接口类需要2个参数
  15.          * 参数1: 接口的名字 (string)
  16.          * 参数2: 接受方法名称的集合(数组) (array)
  17.          */
  18.         var Interface = function(name,methods){
  19.             //判断接口的参数个数
  20.             if(arguments.length != 2){
  21.                 throw new Error('this instance interface constructor arguments must be 2 length!');
  22.             }
  23.             this.name = name ;
  24.             this.methods = [] ; //定义一个内置的空数组对象 等待接受methods里的元素(方法名字)
  25.             for(var i = 0,len = methods.length ; i <len ; i++){
  26.                  if( typeof methods[i] !== 'string'){
  27.                         throw new Error('the Interface method name is error!');
  28.                  }
  29.                  this.methods.push(methods[i]);
  30.             }
  31.         }
  32.  
  33.         // 1 实例化接口对象
  34.         var CompositeInterface = new Interface('CompositeInterface' , ['add' , 'remove']);//CompositeInterface对象有属性name为CompositeInterface，数组['add' , 'remove']
  35.         var FormItemInterface  = new Interface('FormItemInterface' , ['update','select']);
  36.         //  CompositeImpl implements CompositeInterface , FormItemInterface
  37.         var CompositeImpl = function(){
  38.         }
  39.         // 3 实现接口的方法implements methods
  40.         CompositeImpl.prototype.add = function(obj){
  41.             alert('add');
  42.         }
  43.         CompositeImpl.prototype.remove = function(obj){
  44.             alert('remove');
  45.         }
  46.         CompositeImpl.prototype.update = function(obj){
  47.             alert('update');
  48.         }
  49.         /*
  50.         CompositeImpl.prototype.select = function(obj){
  51.             alert('select');
  52.         }
  53.         */
  54.  
  55.         // 三：检验接口里的方法
  56.         Interface.ensureImplements = function(object){
  57.             // 如果检测方法接受的参数小于2个 参数传递失败!
  58.             if(arguments.length < 2 ){
  59.                 throw new Error('Interface.ensureImplements method constructor arguments must be  >= 2!');
  60.             }
  61.  
  62.             for(var i = 1 , len = arguments.length; i<len; i++ ){
  63.                 var instanceInterface = arguments[i];
  64.                 // 判断对象是不是一个类的实例，判断对象的构造器是不是类名字
  65.                 if(instanceInterface.constructor !== Interface){
  66.                     throw new Error('the arguments constructor not be Interface Class');
  67.                 }
  68.                 // 循环接口实例对象里面的每一个方法
  69.                 for(var j = 0 ; j < instanceInterface.methods.length; j++){
  70.                     // 用一个临时变量 接受每一个方法的名字(注意是字符串)
  71.                     var methodName = instanceInterface.methods[j];
  72.                     if( !object[methodName] || typeof object[methodName] !== 'function' ){
  73.                         throw new Error("the method name '" + methodName + "' is not found !");
  74.                     }
  75.                 }
  76.             }
  77.         }
  78.  
  79.         var c1 = new CompositeImpl();
  80.         Interface.ensureImplements(c1,CompositeInterface,FormItemInterface);
  81.         c1.add();
  82.         </script>
  83.     </head>
  84.     <body>
  85.     </body>
  86. </html>
  1. var CompositeImpl = function(){}
  2. CompositeImpl.prototype.add = function(obj){
  3.     alert('add');
  4. }
  5.  
  6. var c1 = new CompositeImpl();
  7. alert(c1['add']);//function(obj){alert('add');}
  8. alert(c1['ssadd']);//undefined
  9. alert(c1['sss']);//undefined,
  10. alert(c1.ssadd());//ssadd is not a function
  11. alert(c1.sss);//undefined,  没有属性,方法，通过中括号返回未定义，就是假
  12. c1['add'];//什么都没有
  13. alert(typeof c1['add']);//function
  14.  
  15. if( !c1[methodName] || typeof c1[methodName] !== 'function' ){
  16.     throw new Error("the method name '" + methodName + "' is not found !");
  17. }// c1[methodName]有可能是一个属性，不是方法。  !==
  18.  
  19. // 判断对象是不是一个类的实例，判断对象的构造器是不是类名字
  20. instanceInterface.constructor !== Interface

js20---接口3种方式的更多相关文章

  1. C# 调用HTTP接口两种方式

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  2. HBase读写的几种方式（三）flink篇

    1. HBase连接的方式概况 主要分为: 纯Java API读写HBase的方式: Spark读写HBase的方式: Flink读写HBase的方式: HBase通过Phoenix读写的方式: 第一 ...

  3. C#动态调用WCF接口，两种方式任你选。

    写在前面 接触WCF还是它在最初诞生之处,一个分布式应用的巨作. 从开始接触到现在断断续续,真正使用的项目少之又少,更谈不上深入WCF内部实现机制和原理去研究,最近自己做一个项目时用到了WCF. 从这 ...

  4. Java创建线程的第二种方式：实现runable接口

    /*需求:简单的卖票程序多个窗口买票 创建线程的第二种方式:实现runable接口 *//*步骤1.定义类实现Runable接口2.覆盖Runable接口中的run方法    将线程要运行的代码存放在 ...

  5. 创建线程的两种方式：继承Thread类和实现Runnable接口

    第一种方式:继承Thread类 步骤:1.定义类继承Thread 2.覆写Threa类的run方法. 自定义代码放在run方法中,让线程运行 3.调用线程的star方法, 该线程有两个作用:启动线程, ...

  6. java 的对象拷贝（有深浅拷贝两种方式，深拷贝实现的两种方式（逐层实现cloneable接口，序列化的方式来实现））

    Java提高篇--对象克隆(复制)(转自:http://www.cnblogs.com/Qian123/p/5710533.html#_label0)   阅读目录 为什么要克隆? 如何实现克隆 浅克 ...

  7. java中创建多线程两种方式以及实现接口的优点

    多线程创建方式有两种 创建线程的第一种方式.继承Thread类 1.继承Thread类 2.重写Thread类中的run方法--目的将自定义代码存储在run方法.让线程执行3.调用线程的start() ...

  8. 8.13.2 TreeSet实现Comparable接口的两种方式

    推荐使用第二种方式,编写比较器可以使数据类的程序耦合度降低,同时比较器也可以重复利用! 第一种方式:数据类实现Comparable接口,实现其中的compareTo方法 创建对象时,使用TreeSet ...

  9. 从后端接口下载文件的2种方式：get方式、post方式

    从后端接口下载文件的2种方式 一.get方式 直接使用: location.href='http://www.xxx.com/getFile?params1=xxx&params2=xxxx' ...

  10. 51、多线程创建的三种方式之实现Callable接口

    实现Callable接口创建线程 Callable接口是在jdk5版本中加入的,这个接口在java.util.concurrent包下面,与其他两种方式不同的地方在于使用Callable接口创建的线程 ...

随机推荐

  1. jquery中$.get()提交和$.post()提交有区别

    jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...

  2. struts2登录后返回登录前的页面

    在Action中添加 String getUrl() { return ServletActionContext.getRequest().getHeader("referer") ...

  3. 炜煌E30 E31微型热敏打印机 STM32 串口驱动

    设置为汉字模式 十六进制 命令:1C    26 USART_SendData(USART2,0x1C); while(USART_GetFlagStatus(USART2,USART_FLAG_TC ...

  4. MAC 文件加密

    MAC 文件加密 (2011-10-08 00:08:52) 标签: 杂谈 分类: MAC技巧篇 我们都有一些私密的文件需要保存,在苹果操作系统下,如何为这些文件或文件夹设置密码呢? 利用系统自带的创 ...

  5. java-proxool 异常

    使用 proxool,JDBC连接池,进行批量运行的时候遇到异常: The Thread responsible was named 'Thread-32′, but the last SQL it ...

  6. HDU 1730 Northcott Game

    简单的尼姆博弈.想到了非常easy! 就拿一行举例.怎么赢.? 就是死劲挨着对方移,当然假设本身就是挨着的,又轮到你移动了,那么对于这一行来讲.你就是输的!! 由此可见每一行的棋子起始距离就显得尤为重 ...

  7. 在Linux终端使用W3M浏览器下载文件

    在Linux终端使用W3M浏览器下载文件 W3M 是3个基于Linux系统命令行的WEB网站浏览工具(w3m/Links/Lynx) 对于需要验证cookie 和来源的页面,比如163的超大附件,直接 ...

  8. FPGA设计中的电源管理(转载）

    过去,FPGA设计者主要关心时序和面积使用率问题.但随着FPGA不断取代ASSP和ASIC器件,设计者们现正期望能够开发低功耗设计,在设计流程早期就能对功耗进行正确估算,以及管理和对与FPGA相关的各 ...

  9. JNI学习积累之二 ---- 数据类型映射、域描述符说明

    本文原创,转载请注明出处:http://blog.csdn.NET/qinjuning 在Java存在两种数据类型: 基本类型 和 引用类型 ,大家都懂的 . 在JNI的世界里也存在类似的数据类型,与 ...

  10. poj--1459--Power Network（最大流，超级源超级汇）

    Power Network Time Limit: 2000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Submit ...