JavaScript之接口和面向接口编程-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript之接口和面向接口编程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

参考资料

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

什么是接口？

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

静态语言-面向接口编程

抽象类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进行接口检查。文章来源地址https://www.toymoban.com/news/detail-537579.html

	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

到了这里，关于JavaScript之接口和面向接口编程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！