Eine kurze Diskussion zur detaillierten Erläuterung des Schnittstellencodes in JavaScript

1. Was ist eine Schnittstelle

Schnittstelle ist eines der nützlichsten Werkzeuge im objektorientierten JavaScript-Werkzeugkasten für Programmierer . Eines der in Design Patterns vorgeschlagenen Prinzipien des wiederverwendbaren objektorientierten Designs ist „Programmierung für Schnittstellen statt Implementierungsprogrammierung“, was wir als schnittstellenorientierte Programmierung bezeichnen. Die Bedeutung dieses Konzepts ist offensichtlich. Das Problem besteht jedoch darin, dass es in der Welt von JavaScript keine integrierten Methoden zum Erstellen oder Implementieren von Schnittstellen gibt und es keinen Methodensatz gibt, der feststellen kann, ob ein Objekt dasselbe implementiert wie ein anderes Objekt, was die Verwendung erschwert Glücklicherweise verfügt JavaScript über eine hervorragende Flexibilität, die es einfach macht, herkömmliche objektorientierte Schnittstellen zu simulieren und diese Funktionen hinzuzufügen. Eine Schnittstelle bietet eine Möglichkeit, zu beschreiben, welche Methoden ein Objekt haben sollte. Sie kann zwar die Bedeutung dieser Methoden angeben, enthält jedoch keine spezifischen Implementierungen. Mit diesem Tool können Objekte nach den von ihnen bereitgestellten Eigenschaften gruppiert werden. Wenn beispielsweise A und B und die Schnittstelle I vorhanden sind, können A und B in der A.I(B)-Methode austauschbar verwendet werden, auch wenn das A-Objekt und das B-Objekt sehr unterschiedlich sind, solange beide die I-Schnittstelle implementieren. wie B.I(A). Sie können Schnittstellen auch verwenden, um Gemeinsamkeiten zwischen verschiedenen Klassen zu entwickeln. Wenn eine Funktion, die ursprünglich eine bestimmte Klasse als Parameter erfordert, in eine Funktion geändert wird, die eine bestimmte Schnittstelle als Parameter erfordert, können ihr alle Objekte, die die Schnittstelle implementieren, als Parameter übergeben werden. Auf diese Weise können alle Objekte, die dies nicht sind, an sie übergeben werden Aufeinander bezogene Objekte können ihm auch als Parameter übergeben werden.

2. Vor- und Nachteile von Schnittstellen

Die etablierte Schnittstelle ist selbstbeschreibend und kann die Wiederverwendbarkeit von Code fördern. Die Schnittstelle kann eine Art Information bereitstellen, um der externen Klasse mitzuteilen, welche Methoden benötigt werden umgesetzt. Es hilft auch, die Kommunikationsmethode zwischen verschiedenen Klassen zu stabilisieren und Probleme zu reduzieren, die beim Erben zweier Objekte auftreten. Dies ist auch beim Debuggen hilfreich. In einer schwach typisierten Sprache wie JavaScript sind Typkonflikte schwierig zu verfolgen. Wenn bei der Verwendung der Schnittstelle ein Problem auftritt, wird eine klarere Fehlermeldung angezeigt. Natürlich sind Schnittstellen nicht ganz ohne Mängel. Der umfangreiche Einsatz von Schnittstellen wird ihre Flexibilität als schwach typisierte Sprache in gewissem Maße schwächen. Andererseits verfügt JavaScript nicht über eine integrierte Unterstützung für Schnittstellen, sondern simuliert nur traditionelle Objekt-Schnittstellen. Dies macht JavaScript, das von Natur aus flexibel ist, schwieriger zu steuern. Darüber hinaus wirkt sich jede Art und Weise, wie Sie eine Schnittstelle implementieren, auf die Leistung aus, was teilweise auf den Mehraufwand durch zusätzliche Methodenaufrufe zurückzuführen ist. Das größte Problem bei der Verwendung von Schnittstellen besteht darin, dass JavaScript im Gegensatz zu anderen stark typisierten Sprachen nicht kompiliert werden kann, wenn es sich nicht an die Schnittstellenkonventionen hält. Seine Flexibilität kann die oben genannten Probleme effektiv vermeiden, wenn es sich in einer kollaborativen Entwicklungsumgebung befindet Es ist sehr wahrscheinlich, dass es beschädigt wird, ohne Fehler zu verursachen, was unkontrollierbar ist.

In objektorientierten Sprachen werden Schnittstellen im Allgemeinen auf ähnliche Weise verwendet. Die in der Schnittstelle enthaltenen Informationen beschreiben die Methoden, die die Klasse implementieren muss, sowie die Signaturen dieser Methoden. Klassendefinitionen müssen explizit angeben, dass sie diese Schnittstellen implementieren, andernfalls werden sie nicht kompiliert. Offensichtlich können wir in JavaScript nicht dasselbe tun, da es keine Schnittstellen- und Implementierungsschlüsselwörter gibt und zur Laufzeit keine Überprüfung erfolgt, ob die Schnittstelle dem Vertrag folgt, aber wir können die meisten ihrer Funktionen durch Hilfsmethoden und explizite Prüfungen imitieren.

3. Nachahmung von Schnittstellen in JavaScript

Es gibt drei Hauptmethoden, um Schnittstellen in JavaScript zu imitieren: durch Kommentare, Attributprüfung und Debatte im Entenstil erzeugt einen schnittstellenähnlichen Effekt.

Kommentare sind eine relativ intuitive Möglichkeit, schnittstellenbezogene Schlüsselwörter (z. B. Schnittstelle, Implementierung usw.) zusammen mit JavaScript-Code in Kommentaren einzufügen, um Schnittstellen zu simulieren. Dies ist die einfachste Methode, hat jedoch die schlechteste Wirkung. . Der Code lautet wie folgt:

//以注释的形式模仿描述接口
/*
interface Composite{
    function add(child);
    function remove(child);
    function getName(index);
}

interface FormItem{
    function save();
}
*/

//以注释的形式模仿使用接口关键字
var CompositeForm =function(id , method,action) { //implements Composite , FormItem
    // do something
}
//模拟实现具体的接口方法 此处实现Composite接口
CompositeForm.prototype.Add=function(){
    // do something
}

CompositeForm.prototype.remove=function(){
    // do something
}

CompositeForm.prototype.getName=function(){
    // do something
}

//模拟实现具体的接口方法 此处实现FormItem接口
Composite.prototype.save=function(){
    // do something
}

Diese Methode ist eigentlich nicht sehr gut, da diese Art der Nachahmung nur im Rahmen der Dokumentspezifikationen bleibt, bleibt abzuwarten. Die Einhaltung der Schnittstelle hängt vollständig vom Bewusstsein der Entwickler ab. Darüber hinaus prüft diese Methode nicht, ob eine Funktion tatsächlich die von uns vereinbarte „Schnittstelle“ implementiert. Dennoch hat dieser Ansatz auch Vorteile: Er ist einfach zu implementieren, ohne dass zusätzliche Klassen oder Funktionen erforderlich sind, und er kann die Wiederverwendbarkeit des Codes verbessern, da die von den Klassen implementierten Schnittstellen mit Anmerkungen versehen sind. Dieser Ansatz hat keinen Einfluss auf den von der Datei belegten Speicherplatz oder die Ausführungsgeschwindigkeit, da der kommentierte Code während der Bereitstellung problemlos entfernt werden kann. Da jedoch keine Fehlermeldung bereitgestellt wird, hilft es beim Testen und Debuggen nicht viel. Die folgende Methode prüft, ob die Schnittstelle implementiert ist. Der Code lautet wie folgt:

//以注释的形式模仿使用接口关键字
var CompositeForm =function(id , method,action) { //implements Composite , FormItem
    // do something
    this.implementsinterfaces=['Composite','FormItem']; //显式地把接口放在implementsinterfaces中
}

//检查接口是否实现
function implements(Object){
    for(var i=0 ;i< arguments.length;i++){
        var interfaceName=arguments[i];
        var interfaceFound=false;
        for(var j=0;j<Object.implementsinterfaces.length;j++){
            if(Object.implementsinterfaces[j]==interfaceName){
                interfaceFound=true;
                break;
            }
        }
        if(!interfaceFound){
            return false;
        }else{
            return true;
        }
    }
}

function AddForm(formInstance){
    if(!implements(formInstance,&#39;Composite&#39;,&#39;FormItem&#39;)){ 
        throw new Error(&#39;Object does not implements required interface!&#39;);
    }
}

上述代码是在方式一的基础上进行完善，在这个例子中，CompositeForm宣称自己实现了Composite和FormItem这两个接口，其做法是把这两个接口的名称加入一个implementsinterfaces的数组。显式地声明自己支持什么接口。任何一个要求其参数属性为特定类型的函数都可以对这个属性进行检查，并在所需要的接口未在声明之中时抛出错误。这种方式相对于上一种方式，多了一个强制性的类型检查。但是这种方法的缺点在于它并未保证类真正地实现了自称实现的接口，只是知道它声明自己实现了这些接口。其实类是否声明自己支持哪些接口并不重要，只要它具有这些接口中的方法就行。鸭式辩型（像鸭子一样走路并且嘎嘎叫的就是鸭子）正是基于这样的认识，它把对象实现的方法集作为判断它是不是某个类的实例的唯一标准。这种技术在检查一个类是否实现了某个接口时也可以大显身手。这种方法的背后观点很简单：如果对象具有与接口定义的方法同名的所有方法，那么就可以认为它实现了这个接口。可以使用一个辅助函数来确保对象具有所有必需的方法，代码如下：

//interface
var Composite =new Interface('Composite',['add','remove','getName']);
var FormItem=new Interface('FormItem',['save']);

//class
var Composite=function(id,method,action){

}

//Common Method
function AddForm(formInstance){
    ensureImplements(formInstance,Composite,FormItem);
    //如果该函数没有实现指定的接口，这个函数将会报错
}

与另外两种方式不同，这种方式无需注释，其余的各个方面都是可以强制实施的。EnsureImplements函数需要至少两个参数。第一个参数是想要检查的对象，其余的参数是被检查对象的接口。该函数检查器第一个参数代表的对象是否实现了那些接口所声明的方法，如果漏掉了任何一个，就会抛错，其中会包含被遗漏的方法的有效信息。这种方式不具备自我描述性，需要一个辅助类和辅助函数来帮助实现接口检查，而且它只关心方法名称，并不检查参数的名称、数目或类型。

四、Interface类

在下面的代码中，对Interface类的所有方法的参数都进行了严格的控制，如果参数没有验证通过，那么就会抛出异常。加入这种检查的目的就是，如果在执行过程中没有抛出异常，那么就可以肯定接口得到了正确的声明和实现。

var Interface = function(name ,methods){
    if(arguments.length!=2){
        throw new Error('2 arguments required!');
    }
    this.name=name;
    this.methods=[];
    for(var i=0;len=methods.length;i<len;i++){
        if(typeof(methods[i]!==&#39;String&#39;)){
            throw new Error(&#39;method name must be String!&#39;);
        }
        this.methods.push(methods[i]);
    }
}

Interface.ensureImplements=function(object){
    if(arguments.length<2){
        throw new Error(&#39;2 arguments required at least!&#39;);
    }
    for(var i=0;len=arguments.length;i<len;i++){
        var interface=arguments[i];
        if(interface.constructor!==Interface){
            throw new Error(&#39;instance must be Interface!&#39;);
        }
        for(var j=0;methodLength=interface.methods.length;j<methodLength;j++){
            var method=interface.methods[j];
            if(!object[method]||typeof(object[method])==&#39;function&#39;)){
                throw new Error(&#39;object does not implements method!&#39;);
            }    
        }
    }
}

其实多数情况下，接口并不是经常被使用的，严格的类型检查并不总是明智的。但是在设计复杂的系统的时候，接口的作用就体现出来了，这看似降低了灵活性，却同时也降低了耦合性，提高了代码的重用性。这在大型系统中是比较有优势的。在下面的例子中，声明了一个displayRoute方法，要求其参数具有三个特定的方法，通过Interface对象和ensureImplements方法来保证这三个方法的实现，否则将会抛出错误。

//声明一个接口，描述该接口包含的方法
 var DynamicMap=new Interface{'DynamicMap',['centerOnPoint','zoom','draw']};

 //声明一个displayRoute方法
 function displayRoute(mapInstance){
    //检验该方法的map
    //检验该方法的mapInsstance是否实现了DynamicMap接口，如果未实现则会抛出
    Interface.ensureImplements(mapInstance,DynamicMap);
    //如果实现了则正常执行
    mapInstance.centerOnPoint(12,22);
    mapInstance.zoom(5);
    mapInstance.draw();
 }

下面的例子会将一些数据以网页的形式展现出来，这个类的构造器以一个TestResult的实例作为参数。该类会对TestResult对象所包含的数据进行格式化（Format）后输出，代码如下：

var ResultFormatter=function(resultObject){
     //对resultObject进行检查，保证是TestResult的实例
     if(!(resultObject instanceof TestResult)){
         throw new Error('arguments error!');
     }
     this.resultObject=resultObject;
 }

 ResultFormatter.prototype.renderResult=function(){
     var dateOfTest=this.resultObject.getData();
     var resultArray=this.resultObject.getResults();
     var resultContainer=document.createElement('p');
     var resultHeader=document.createElement('h3');
     resultHeader.innerHTML='Test Result from '+dateOfTest.toUTCString();
     resultContainer.appendChild(resultHeader);

     var resultList=document.createElement('ul');
     resultContainer.appendChild(resultList);

     for(var i=0;len=resultArray.length;i<len;i++){
         var listItem=document.createElement(&#39;li&#39;);
         listItem.innerHTML=resultArray[i];
         resultList.appendChild(&#39;listItem&#39;);
     }
     return resultContainer;
 }

该类的构造器会对参数进行检查，以确保其的确为TestResult的类的实例。如果参数达不到要求，构造器将会抛出一个错误。有了这样的保证，在编写renderResult方法的时候，就可以认定有getData和getResult两个方法。但是，构造函数中，只对参数的类型进行了检查，实际上这并不能保证所需要的方法都得到了实现。TestResult类会被修改，致使其失去这两个方法，但是构造器中的检查依旧会通过，只是renderResult方法不再有效。

此外，构造器中的这个检查施加了一些不必要的限制。它不允许使用其他的类的实例作为参数，否则会直接抛错，但是问题来了，如果有另一个类也包含并实现了getData和getResult方法，它本来可以被ResultFormatter使用，却因为这个限制而无用武之地。

解决问题的办法就是删除构造器中的校验，并使用接口代替。我们采用这个方案对代码进行优化：

//接口的声明
var resultSet =new Interface('ResultSet',['getData','getResult']);

//修改后的方案
 var ResultFormatter =function(resultObject){
     Interface.ensureImplements(resultObject,resultSet);
     this.resultObject=resultObject;
 }

上述代码中，renderResult方法保持不变，而构造器却采用的ensureImplements方法，而不是typeof运算符。现在的这个构造器可以接受任何符合接口的类的实例了。

五、依赖于接口的设计模式

f35d6e602fd7d0f0edfa6f7d103c1b57工厂模式：对象工厂所创建的具体对象会因具体情况而不同。使用接口可以确保所创建的这些对象可以互换使用，也就是说对象工厂可以保证其生产出来的对象都实现了必需的方法；

2cc198a1d5eb0d3eb508d858c9f5cbdb组合模式：如果不使用接口就不可能使用这个模式，其中心思想是可以将对象群体与其组成对象同等对待。这是通过接口来做到的。如果不进行鸭式辩型或类型检查，那么组合模式就会失去大部分意义;

5bdf4c78156c7953567bb5a0aef2fc53Decorator-Muster: Decorators arbeiten, indem sie transparent eine Hülle für ein anderes Objekt bereitstellen. Dies wird durch die Implementierung einer Schnittstelle erreicht, die genau mit der des anderen Objekts übereinstimmt. Für die Außenwelt gibt es keinen Unterschied zwischen einem Dekorator und dem Objekt, das er umhüllt. Verwenden Sie daher die Schnittstelle, um sicherzustellen, dass der erstellte Dekorator die erforderlichen Methoden implementiert;

23889872c2e8594e0f446a471a78ec4c Befehlsmodus: Alle Befehlsobjekte im Code implementieren denselben Methodenstapel (z. B. run, ecxute, do usw.). Durch die Verwendung von Schnittstellen müssen Klassen, die ohne die Ausführung dieser Befehlsobjekte erstellt wurden, nicht wissen, um welche Objekte es sich handelt Sie müssen nur wissen, dass alle die Schnittstelle korrekt implementieren. Dadurch können Sie APIs mit einem hohen Maß an Modularität und geringer Kopplung erstellen.

Das Obige ist eine kurze Diskussion des Schnittstellencodes in JavaScript. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).