JavaScript 接口实现：从注释到鸭式辨型的三种方案

JavaScript 接口概述与重要性

这足以体现接口在面向对象设计中的核心地位。然而，与 C#、Java 或 C++ 等高级面向对象语言不同，JavaScript 并未内置接口机制来强制规定一组对象具备相似特性。幸运的是，JavaScript 具备极高的灵活性（前文已探讨过），这使得模拟接口行为变得相对容易。那么，究竟什么是接口？

接口旨在为具有相似行为的一组类（无论是否属于同一类型）提供统一的方法定义，从而促进这些类之间的有效通信。

使用接口的主要优势在于提升系统中相似模块的复用性，并增强不同类之间通信的稳定性。一旦类实现了接口，就必须实现接口中定义的所有方法。在大型 Web 项目中，这意味着多个复杂模块只需提供接口即可实现功能，且彼此互不干扰。但需明确，接口并非万能药。由于 JavaScript 是弱类型语言，无法强制团队成员严格遵守接口规范，尽管可以通过代码规范和辅助类来缓解这一问题。此外，接口实现可能对系统性能产生一定影响，具体取决于系统的复杂程度。鉴于 JavaScript 没有内置的 interface 和 implements 关键字，接下来我们将探讨 JavaScript 如何模拟实现接口。

接口实现的三种方案

1. 最简单但效果最差的接口实现方式是使用注释。即在代码注释中使用 interface 关键字来表明接口的意图。

 
/* 
interface Composite {
function add(child);
function remove(child);
function getChild(index);
} 
interface FormItem {
funtion save();
} 
*/ 
var CompositeForm = function(id, name, action) {
// implements Composite, FormItem
} 
CompositeForm.prototype = {
// implements Composite interface
add: function(child) {
//... 
}, 
remove: function(child) {
//... 
}, 
getChild: function(index) {
//... 
} 
// implements FormItem interface
save: function() {
//... 
} 
} 

这种方式未能有效模拟接口的功能，也无法确保 Composite 类确实实现了所需的方法集合，且不会抛出错误提示程序员潜在问题。除了提供说明外，它没有任何实际作用，所有的一致性都依赖程序员的自觉。尽管实现简单，无需额外类或函数，不影响文档大小和执行速度，且注释易于剥离，从而在一定程度上提高了复用性（通过提供类说明，使其能与实现相同接口的其他类通信）。

2. 通过属性检查来模拟接口。类显式声明其要实现的接口，并通过检查属性来确认是否实现了相应的接口。

 
/* 
interface Composite {
function add(child);
function remove(child);
function getChild(index);
} 
interface FormItem {
funtion save();
} 
*/ 
var CompositeForm = function(id, name, action) {
this.implementsInterfaces = ["Composite", "FormItem"];
//... 
} 
function checkInterfaces(formInstance) {
if(!implements(formInstance, "Composite", "FormItem")) {
throw new Error("Object doesn't implement required interface.");
} 
//... 
} 
//check to see if an instance object declares that it implements the required interface
function implements(instance) {
for(var i = 1; i < arguments.length; i++) {
var interfaceName = arguments[i];
var isFound = false;
for(var j = 0; j < instance.implementsInterfaces.length; j++) {
if(interfaceName == instance.implementsInterfaces[j]) {
isFound = true;
break;
} 
} 
if(!isFound) return false;// An interface was not found.
} 
return true;// All interfaces were found.
} 

在此方案中，虽然仍添加了注释来说明接口，但在 Composite 类中增加了一个 implementsInterfaces 属性，用于声明该类必须实现的接口。通过检查该属性来判断是否实现了相应接口，若未实现则抛出错误。然而，其缺点在于仍无法判断是否真正实现了接口中定义的方法，仅仅只是“声称”实现了接口，同时也增加了相应的工作量。

3. 利用“鸭式辨型”来实现接口。从属性检查方案中发现，判断一个类是否支持所实现的接口并不重要，只要接口中定义的所有方法出现在类中即可，这表明接口已实现。正如“如果走路像鸭子，叫声像鸭子，无论它是否贴有‘我是鸭子’的标签，我们都认为它就是鸭子”。利用辅助类来判断一个类是否存在（实现）了相应接口中的所有方法，若不存在则代表未实现。

 
// Interfaces
var Composite = new Interface("Composite", ["add", "remove", "getChild"]);
var FormItem = new Interface("FormItem", ["save"]);
var CompositeForm = function(id, name, action) {
// implements Composite, FormItem interfaces
} 
function checkInterfaces(formInstance) {
Interface.ensureImplements(formInstance, "Composite", "FormItem");
//... 
} 

接口类

 
// Interface class is for checking if an instance object implements all methods of required interface
var Interface = function(name, methods) {
if(arguments.length != 2) {
throw new Error("Interface constructor expects 2 arguments, but exactly provided for " + arguments.length + " arguments.");
} 
this.name = name;
this.methods = [];
for(var i = 0;i < methods.length; i++) {
if(typeof methods[i] != "string") {
throw new Error("Interface constructor expects to pass a string method name.");
} 
this.methods.push(methods[i]);
} 
} 
//static class method
Interface.ensureImplements = function(instance) {
if(arguments.length < 2) {
throw new Error("Function Interface.ensureImplements expects at least 2 arguments, but exactly passed for " + arguments.length + " arguments.");
} 
for(var i = 1, len = arguments.length; i < len; i++) {
var interface = arguments[i];
if(interface.constructor != Interface) {
throw new Error("Function Interface.ensureImplements expects at least 2 arguments to be instances of Interface.");
} 
for(var j = 0, mLen = interface.methods.length; j < mLen; j++) {
var method = interface.methods[j];
if(!instance[method] || typeof instance[method] != "function") {
throw new Error("Function Interface.ensureImplements: object doesn't implements " + interface.name + ". Method " + method + " wasn't found.");
} 
} 
} 
} 

接口在实际项目中的应用示例

严格的类型检查并非总是必需的，在日常 Web 前端开发中较少使用上述接口机制。但当面对复杂且拥有众多相似模块的系统时，面向接口编程将变得至关重要。这看似降低了 JavaScript 的灵活性，实则提高了类的灵活性，降低了类之间的耦合度，因为传入任何实现相同接口的对象都能被正确解析。那么何时使用接口较为合适？对于大型项目，通常涉及多名团队成员，且项目会被拆分为更细粒度的功能模块。为保证进度，需提前利用“占位程序”（接口）来说明模块功能或与已开发完成的模块进行通信，此时提供统一的接口（API）显得尤为必要。随着项目推进，需求可能不断变化，各模块功能也会随之调整，但彼此之间的通信及提供给上层模块的 API 保持不变，从而确保整个架构的稳定性和持久性。下面通过一个具体示例说明接口的实际应用。假设设计一个类自动检测结果对象（TestResult 类）并格式化输出网页视图，未使用接口的实现方式如下：

 
var ResultFormatter = function(resultObject) {
if(!(resultObject instanceof TestResult)) {
throw new Error("ResultFormatter constructor expects a instance of TestResult.");
} 
this.resultObject = resultObject;
} 
ResultFormatter.prototype.render = function() {
var date = this.resultObject.getDate();
var items = this.resultObject.getResults();
var container = document.createElement("div");
var header = document.createElement("h3");
header.innerHTML = "Test Result from " + date.toUTCString();
container.appendChild(header);
var list = document.createElement("ul");
container.appendChild(list);
for(var i = 0, len = items.length; i++) {
var item = document.createElement("li");
item.innerHTML = items[i];
list.appendChild(item);
} 
return container;
} 

首先，ResultFormatter 类的构造函数仅检查了是否为 TestResult 实例，却无法保证一定实现了 render 方法中的 getDate() 和 getResults() 方法。此外，随着需求变化，若有一个 Weather 类包含了 getDate() 和 getResults() 方法，却因只能检查是否为 TestResult 实例而无法运行 render 方法，这显然不够灵活。解决办法是移除 instanceof 检查并以接口替代。

 
//create the ResultSet interface
var ResultSet = new Interface("ResultSet", ["getDate", "getResults"]);
var ResultFormatter = function(resultObject) {
// using Interface.ensureImplements to check the resultObject
Interface.ensureImplements(resultObject, ResultSet);
this.resultObject = resultObject;
} 
ResultFormatter.prototype.render = function() {
// keep the same as former
var date = this.resultObject.getDate();
var items = this.resultObject.getResults();
var container = document.createElement("div");
var header = document.createElement("h3");
header.innerHTML = "Test Result from " + date.toUTCString();
container.appendChild(header);
var list = document.createElement("ul");
container.appendChild(list);
for(var i = 0, len = items.length; i++) {
var item = document.createElement("li");
item.innerHTML = items[i];
list.appendChild(item);
} 
return container;
} 

可以看出，render 方法未发生任何改变。改变的仅仅是添加了一个接口并使用接口进行类型检查。现在可以传递 Weather 类的实例进行调用，当然也能传递实现了 ResultSet 接口的任何类的实例，使检查更加精确且宽容。随着后续对 JavaScript 设计模式的推出，接口将在工厂模式、组合模式、装饰模式和命令模式中得到广泛应用。希望大家可以细细品味接口给我们的 JavaScript 模块化设计带来的益处。