JavaScript之接口和面向接口编程

参考资料

• 曾探《JavaScript设计模式与开发实践》；
• 《javaScript设计模式与开发实践》笔记

什么是接口？

1. 字面意义上的api接口，供外部使用，不需关注内部实现；
2. 静态语言提供的关键字 interface，为编写类提供一种契约，方便编译器检查；
3. 面向接口编程的接口。

静态语言-面向接口编程

• 抽象类abstract

示例：鸭子类型中，鸭子和鸡类继承往上一层的抽象类 animal，实现了契约和多态，在编写过程中能被类型检查到

面向接口编程在过程上看更像“面向超类型编程”，对象的具体类型隐藏在超类型背后，对象就可以相互替换使用。

• 接口interface

interface实际上也是继承的一种方式，叫接口继承

抽象类和interface的作用

• 通过向上转型来隐藏对象的真正类型，以表现对象的多态性；
• 约定类与类之间的一些契约行为。

动态语言-面向接口编程

javaScript语言中与生俱来就具有多态性，无需手动向上转型，更多的是需要类型检查，比如：

• 利用鸭子类型进行接口检查：

	var setCommand = function( command ){
		document.getElementById( 'exeCommand' ).onclick = function(){
			if ( typeof command.execute !== 'function' ){
				throw new Error( "command 对象必须实现execute 方法" );
			}
			command.execute();
		}
	};

• 使用TypeScript进行接口检查。

  	interface Command{
  		execute: Function;
  	}
  
  	class RefreshMenuBarCommand implements Command{
  		constructor (){
  		}
  		execute(){
  			console.log( '刷新菜单界面' );
  
  		}
  	}
  	class AddSubMenuCommand implements Command{
  		constructor (){
  		}
  		execute(){
  			console.log( '增加子菜单' );
  		}
  	}
  	class DelSubMenuCommand implements Command{
  		constructor (){
  		}
  			// 忘记重写execute 方法
  	}
  
  	var refreshMenuBarCommand = new RefreshMenuBarCommand(),
  	addSubMenuCommand = new AddSubMenuCommand(),
  	delSubMenuCommand = new DelSubMenuCommand();
  	refreshMenuBarCommand.execute(); // 输出：刷新菜单界面
  	addSubMenuCommand.execute(); // 输出：增加子菜单
  	delSubMenuCommand.execute(); // 输出：Uncaught TypeError: undefined is not a function