Heim > Web-Frontend > Front-End-Fragen und Antworten > Was ist eine Schnittstelle in Javascript?

Was ist eine Schnittstelle in Javascript?

青灯夜游
Freigeben: 2022-02-16 11:21:38
Original
2897 Leute haben es durchsucht

In JavaScript ist eine Schnittstelle eine Deklaration einer Reihe abstrakter Methoden und einer Sammlung von Methodenmerkmalen. Sie bietet eine Möglichkeit, zu beschreiben, welche Methoden ein Objekt haben sollte. Schnittstellen können die Wiederverwendbarkeit von Code fördern, zur Stabilisierung der Kommunikationsmethode zwischen verschiedenen Klassen beitragen und Probleme reduzieren, die bei der Vererbung zweier Objekte auftreten.

Was ist eine Schnittstelle in Javascript?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist eine Schnittstelle? Eine Schnittstelle ist eine Deklaration einer Reihe abstrakter Methoden und einer Sammlung von Methodenmerkmalen. Diese Methoden sollten abstrakt sein und müssen von bestimmten Klassen implementiert werden Gruppieren Sie abstrakte Methodenaufrufe, damit bestimmte Klassen bestimmte Methoden ausführen können. Schnittstellen sind eines der nützlichsten Werkzeuge in der Toolbox des objektorientierten JavaScript-Programmierers. Eines der in Entwurfsmustern 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.

Aber das Problem besteht darin, dass es in der Welt von JavaScript keine integrierte Methode zum Erstellen oder Implementieren einer Schnittstelle gibt und es keinen Satz von Methoden gibt, die bestimmen können, ob ein Objekt dasselbe implementiert wie ein anderes Objekt, wodurch es entsteht Der Austausch zwischen Objekten ist schwierig. 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.

Interface bietet eine Möglichkeit, anzugeben, welche Methoden ein Objekt haben soll. Es 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.

Zum Beispiel, wenn A und B und die Schnittstelle I, auch wenn das A-Objekt und das B-Objekt sehr unterschiedlich sind, A und B austauschbar in der A.I(B) verwendet werden können, solange beide die I-Schnittstelle implementieren. Methode 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 benötigt, in eine Funktion geändert wird, die eine bestimmte Schnittstelle als Parameter benötigt, 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.

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 implementiert werden müssen. 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 ein Problem auftritt, wird es eine klarere Fehlermeldung geben. Natürlich sind Schnittstellen nicht ganz ohne Mängel. Eine umfassende Verwendung 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 hat jede Art der Implementierung einer Schnittstelle Auswirkungen auf die Leistung, teilweise aufgrund des zusätzlichen Aufwands für Methodenaufrufe. 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 den Schnittstellenkonventionen nicht entspricht. Wenn es sich in einer kollaborativen Entwicklungsumgebung befindet, kann seine Flexibilität die oben genannten Probleme effektiv vermeiden Es ist sehr wahrscheinlich, dass es beschädigt wird, ohne Fehler zu verursachen, was unkontrollierbar ist.

In objektorientierten Sprachen ist die Verwendung von Schnittstellen im Allgemeinen ähnlich. 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.

Natürlich 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 nachahmen explizite Kontrollen.

So implementieren Sie Schnittstellen in JavaScript

Es gibt drei Möglichkeiten, Schnittstellen in JavaScript zu implementieren: (1) Kommentarbeschreibungsschnittstelle

(2) Attributerkennungsschnittstelle

(3) Ententyp-Identifizierungsschnittstelle

1. Anmerkungsbeschreibungsschnittstelle: Nicht empfohlen

Vorteile: Einfach zu implementieren, keine zusätzlichen Klassen oder Funktionen erforderlich. Nachteile: Reine Dokumentbeschränkungen, das Programm kann nicht prüfen, ob das Objekt, das die Schnittstelle implementiert, alle Schnittstellenmethoden implementiert

/**
 * interface Composite{
 *         function a();
 *         function b();
 * }
 */
// CompositeImpl implements Composite
var CompositeImpl = function(){
    //业务逻辑
};
CompositeImpl.prototype.a = function(){
    //业务逻辑
};
CompositeImpl.prototype.b = function(){
    //业务逻辑
};
Nach dem Login kopieren

2. Eigenschaftserkennungsschnittstelle: Nicht empfohlen

Die zweite Methode ist strenger. Alle Klassen deklarieren explizit, welche Schnittstellen sie implementieren, und Objekte, die mit diesen Klassen interagieren möchten, können diese Deklarationen überprüfen. Die Schnittstellen selbst sind immer noch nur Annotationen, aber jetzt können Sie anhand einer Eigenschaft erkennen, welche Schnittstelle eine Klasse zu implementieren vorgibt. Vorteile: Möglichkeit zu überprüfen, welche Schnittstellen implementiert sind

缺点:并未确保类真正实现了自称实现的接口。你只知道它是否说自己实现了接口。

var interfacesImpl = function(){
    //在实现类内部用一个数组保存要实现的方法名
    //通常这个属性名是团队中规定好的
    //声明自己实现了这两个方法,但实际上并不一定
    this.implementsInterfaces = ["Composite","FormItem"];
};

//专门为这个实现对象写一个检测函数,传入实例对象,用于检查实例对象是否实现了所有接口
function checkImplements(obj){
    //调用检查方法 obj是否实现了两个接口,如果没有都实现则抛出异常
    if(!isImplements(obj,"Composite","FormItem")){
        throw new Error("接口没有全部实现!");
    }
    //obj是要检查的对象
    function isImplements(obj){
        //传入的第0个参数是要检查的对象,所以从1开始检查
        for(var i=1; i<arguments.length; i++){
            //接收接口中每个接口的名字
            var interfaceName = arguments[i];
            //默认未实现该接口
            var foundFlag = false;
            //循环查询传入实例对象的实现接口数组,检查是否全部实现
            for(var j=0; j<obj.implementsInterfaces.length; j++){
                //如果实现了这个接口,就修改标记并跳出
                //debugger
                if(obj.implementsInterfaces[j] == interfaceName){
                    foundFlag = true;
                    break;
                }
            }
            //如果遍历实现接口数组之后没找到,返回false
            if(!foundFlag){
                return false;
            }
        }
        return true;
    }
}

//使用实例对象并检测
var o = new interfacesImpl();
checkImplements(o);
Nach dem Login kopieren

3、鸭式辨型法:推荐

背后的观点:如果对象具有与接口定义的方法同名的所有方法,那么久可以认为它实现了这个接口。

/**
 * 接口类
 *
 * @param {String} name  接口的名字
 * @param {Array} methods   要实现方法名称的数组
 */
var Interface = function (name, methods) {
    //判断参数个数
    if(arguments.length !== 2){
        throw new Error("接口构造器参数必须是两个!");
    }
    this.name = name;
    this.methods = [];
    for(var i=0; i<methods.length; i++){
        if(typeof methods[i] !== "string"){
            throw new Error("接口实现的函数名称必须是字符串!");
        }
        this.methods.push(methods[i]);
    }
}

//实例化接口对象---传入接口名和要实现的方法数组
var CompositeInterface = new Interface("CompositeInterface",["add","remove"]);
var FormItemInterface = new Interface("FormItemInterface",["update","select"]);

//实现接口的类
var CompositeImpl = function(){

}

//实现接口的方法
CompositeImpl.prototype.add = function(obj){
    //...
}
CompositeImpl.prototype.remove = function(obj){
    //...
}
CompositeImpl.prototype.select = function(obj){
    //...
}
//在这里少实现一个方法,下面检查是否全部实现了接口
// CompositeImpl.prototype.update = function(obj){
//     //...
// }

//实例化 实现接口的对象
var c = new CompositeImpl();

//检验接口里的方法是否全部实现,如果不通过则抛出异常
Interface.ensureImplements = function(obj){
    //如果接收到参数小于2,说明异常
    if(arguments.length < 2){
        throw new Error("接口检查方法的参数必须多余两个!");
    }
    //接口实现检查
    for(var i=0,len = arguments.length; i<len; i++){
        //获取当前接口
        var instanceInterface = arguments[i];
        //判断接收到的是不是接口的对象,如果不是则抛出异常
        if(instanceInterface.constructor !== Interface){
            throw new Error("接口检测函数必须传入接口对象!");
        }
        //检查实例化接口的对象是不是实现了接口里的所有方法
        for(var j=0; j<instanceInterface.methods.length; j++){
            //接收到的字符串方法
            var methodName = instanceInterface.methods[j];
            //如果obj里面没有methodsName这个方法,或者有这个属性但是不是函数,就抛出异常
            if(!obj[methodName] || typeof obj[methodName] !== "function"){
                throw new Error("接口方法" + methodName + "没有实现!");
            }
        }
    }
}

//传入要检查的类,和要实现的所有接口对象
Interface.ensureImplements(c, CompositeInterface, FormItemInterface);
c.add();
Nach dem Login kopieren

【相关推荐:javascript学习教程

Das obige ist der detaillierte Inhalt vonWas ist eine Schnittstelle in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage