Qu'est-ce qu'une interface en javascript

En JavaScript, une interface fait référence à un type de référence qui définit un contrat. L'interface nous indique en fait quelles méthodes une classe implémente, l'aidant ainsi à utiliser cette classe et à rendre le code plus stable.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Il n'existe aucun moyen intégré pour créer ou implémenter des interfaces en JavaScript. Il ne dispose pas non plus de méthode intégrée permettant de déterminer si un objet implémente le même ensemble de méthodes qu'un autre objet. Cela rend les objets difficiles à utiliser de manière interchangeable. Mais JavaScript est très flexible et nous pouvons l’implémenter d’autres manières.

Qu'est-ce qu'une interface ?

L'interface définit en fait quelles méthodes doivent figurer dans un objet. Il n'a pas besoin de considérer comment ces méthodes sont implémentées, mais définit que l'objet possède ces méthodes.

Interface fait référence à un type de référence qui définit un contrat. D'autres types implémentent des interfaces pour garantir qu'elles prennent en charge certaines opérations. Une interface spécifie les membres qui doivent être fournis par une classe ou une autre interface qui l'implémente. Semblables aux classes, les interfaces peuvent contenir des méthodes, des propriétés, des indexeurs et des événements en tant que membres.

Avantages des interfaces

Les interfaces nous indiquent en fait quelles méthodes une classe implémente. Cela les aide à utiliser cette classe. Les interfaces peuvent rendre notre code plus stable si nous ajoutons une méthode à l'interface. Si une classe qui l'implémente n'ajoute pas cette méthode en conséquence, elle générera certainement une erreur.

interface d'imitation Javascript

Il existe trois méthodes pour l'interface d'imitation JavaScript :

• méthode d'annotation

• méthode de vérification des attributs

• méthode de transformation du canard

Utilisation commentaires Décrire l'interface

Utiliser des commentaires pour décrire l'interface est la méthode la plus simple, mais l'effet est le pire.

/*
interface Composite {
    function add(child);
    function remove(child);
    function getChild(index);
}

interface FormItem {
    function save();
}
*/

class CompositeForm {
    add(child) {
        //...
    }
    remove(child) {

    }
    getChild(index) {
        //...
    }
    save() {
        //...
    }
}

Cette méthode d'imitation n'est pas très bonne. Elle ne vérifie pas si CompositeForm implémente correctement la méthode. C'est entièrement grâce aux programmeurs qui implémentent consciemment l'interface dans l'annotation. Cependant, cette implémentation est très simple, mais elle n’aide pas aux tests et au débogage.

La méthode de vérification des attributs imite l'interface

Cette méthode est plus prudente, mais l'interface est également écrite sous forme de commentaires. Vous ne pouvez savoir quelle interface une certaine classe prétend implémenter qu'en vérifiant un attribut.

class CompositeForm {
    constructor() {
        this.implementsInterface = ['Composite', 'FormItem'];
    }
}

function addForm(formInstance) {
    if (!implements(formInstance, 'Composite', 'FormItem')) {
        throw new Error('对象没有实现接口方法');
    }
}

function implements(obj) { // 这个方法查询接口
    for (let i = 1; i < arguments.length; i++) {
        let interfaceName = arguments[i];
        let interfaceFound = false;
        for (let j = 1; j < obj.implementsInterface.length; j++) {
            if (obj.implementsInterface[j] == interfaceName) {
                interfaceFound = true;
                break;
            }
        }
        if (!interfaceFound) {
            return false;
        }
        return true;
    }
}

addForm(new CompositeForm());

L'avantage de cette méthode est qu'elle fournit une documentation pour l'interface implémentée par la classe. Si l'interface requise ne fait pas partie des interfaces que ma classe prétend prendre en charge (c'est-à-dire qu'elle n'est pas dans mon this.implementsInterface), vous pouvez. Vous verrez un message d'erreur.

Les défauts sont également évidents. Si l'interface déclarée dans mon this.implementsInterface est différente de l'interface définie dans mon annotation mais que la vérification peut quand même réussir, cela signifie que l'appel de la méthode addForm n'explosera pas

Utilisez le canard. méthode de transformation Interface simulée

En fait, peu importe qu'une classe déclare les interfaces qu'elle prend en charge, tant qu'elle dispose des méthodes dans ces interfaces. La transformation Duck utilise l'ensemble de méthodes d'un objet comme seul critère pour juger s'il s'agit d'une instance. Le principe d'implémentation est également très simple : si un objet possède une méthode du même nom que la méthode définie par l'interface, alors on peut considérer qu'il implémente l'interface.

// interface
class Interface {
    constructor(name, method) {
        if (arguments.length != 2) {
            throw new Error('两个参数：name method');
        }
        this.name = name;
        this.method = [];
        for (let i in method) {
            if (typeof method[i] != 'string') {
                throw new Error('method 必须是字符串');
            }
            this.method.push(method[i]);
        }
    }
    //检查接口方法
    static ensureImplements(obj) {
        if (arguments.length < 2) {
            throw new Error('参数小于两个');
        }

        for (let i = 1; i < arguments.length; i++) {
            var instanceInterface = arguments[i];
            if (instanceInterface.constructor !== Interface) {
                throw new Error('你要检查的参数不属于Interface接口')
            }

            for (let j in instanceInterface.method) {
                let methodName = instanceInterface.method[j];
                if (!obj[methodName] || typeof obj[methodName] !== 'function') {
                    throw new Error(`请实现接口的${methodName}方法`)
                }
            }
        }
    }
}

// 实例化接口对象
var Composite = new Interface('Composite', ['add', 'remove', 'getChild']);
var FormItem = new Interface('FormItem', ['save']);

// CompositeForm  类
class CompositeForm {
    //...
    add() {}
    remove() {}
    getChild() {}
}

let c1 = new CompositeForm();
Interface.ensureImplements(c1, Composite, FormItem);

function addForm(formInterface) {
    ensureImplements(formInterface, Composite, FormItem);
}

Je n'ai pas implémenté la méthode save dans la classe CompositeForm dans le code ci-dessus. L'exécution de ce code entraînera une erreur.

Cependant, la méthode de déformation du canard présente également des inconvénients et tous les aspects d'inspection sont obligatoires.

La méthode d'implémentation de cette recrue > Je m'appelle la méthode d'héritage

J'ai utilisé l'héritage de classe pour simuler l'interface. Veuillez consulter le code pour l'implémentation spécifique.

Nous définissons d'abord une classe utilisée comme interface.La méthode d'attribut représente l'ensemble de méthodes de l'interface

class Interface {
    constructor() {
        this.mehods = ['add', 'save', 'remove', 'save'];
    }
    static ensureImplements(obj) {
        //...
    }
}

Définissez une classe CompositeForm pour hériter de cette interface, et appelez la méthode EnsureImplements de la classe parent dans la classe pour détecter l'interface.

class CompositeForm  extends Interface{
    constructor() {
        super().ensureImplements(this);
    }
}

Parfaire la méthode EnsureImplements

class Interface {
    constructor() {
        this.mehods = ['add', 'save', 'remove', 'save'];
    }
    static ensureImplements(obj) {
        for (let i in this.mehods) {
            let methodName = this.mehods[i]
            if (!obj[methodName] || typeof obj[methodName] !== 'function') {
                let err = '请实现接口' + methodName + '的方法';
                throw new Error(err);
            }
        }
    }
}

【Apprentissage recommandé : Tutoriel avancé javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!