Maison  >  Article  >  interface Web  >  Qu'est-ce qu'une interface en javascript

Qu'est-ce qu'une interface en javascript

青灯夜游
青灯夜游original
2022-02-16 11:21:022844parcourir

En JavaScript, une interface est une déclaration d'une série de méthodes abstraites et d'un ensemble de caractéristiques de méthode. Elle fournit un moyen de décrire les méthodes qu'un objet doit avoir. Les interfaces peuvent favoriser la réutilisabilité du code, aider à stabiliser la communication entre différentes classes et réduire les problèmes qui surviennent lors du processus d'héritage de deux objets.

Qu'est-ce qu'une interface en javascript

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

Qu'est-ce qu'une interface

Une interface est une déclaration d'une série de méthodes abstraites et d'un ensemble de caractéristiques de méthode. Ces méthodes doivent être abstraites et doivent être implémentées par des classes spécifiques. Des tiers peuvent ensuite les utiliser. Regroupez les appels de méthodes abstraites pour permettre à des classes spécifiques d’exécuter des méthodes spécifiques.

Les interfaces sont l'un des outils les plus utiles de la boîte à outils du programmeur JavaScript orienté objet. L'un des principes de la conception orientée objet réutilisable proposé dans les modèles de conception est « la programmation pour les interfaces plutôt que la programmation d'implémentation », ce que nous appelons la programmation orientée interface. L'importance de ce concept est évidente.

Mais le problème est que dans le monde de JavaScript, il n'existe pas de méthode intégrée pour créer ou implémenter une interface, et il n'existe pas d'ensemble de méthodes permettant de déterminer si un objet implémente la même chose qu'un autre objet, ce qui le rend difficile d'échanger entre les objets. Heureusement, JavaScript a une excellente flexibilité, ce qui facilite la simulation des interfaces orientées objet traditionnelles et l'ajout de ces fonctionnalités.

L'interface fournit un moyen de spécifier les méthodes qu'un objet doit avoir. Bien qu'elle puisse indiquer la signification de ces méthodes, elle ne contient pas d'implémentations spécifiques. Avec cet outil, les objets peuvent être regroupés selon les propriétés qu'ils fournissent.

Par exemple, si A et B et l'interface I, même si l'objet A et l'objet B sont très différents, tant qu'ils implémentent tous les deux l'interface I, alors A et B peuvent être utilisés de manière interchangeable dans l'A.I(B) méthode, telle que B.I(A).

Vous pouvez également utiliser des interfaces pour développer des points communs entre différentes classes. Si une fonction qui nécessite à l'origine une classe spécifique comme paramètre est remplacée par une fonction qui nécessite une interface spécifique comme paramètre, alors tous les objets qui implémentent l'interface peuvent lui être transmis en tant que paramètres, de sorte que tous les objets qui ne sont pas liés à les uns les autres peuvent lui être transmis en tant que paramètres. Les objets peuvent également être traités de la même manière.

Avantages et inconvénients des interfaces

L'interface établie est auto-descriptive et peut favoriser la réutilisabilité du code. L'interface peut fournir une sorte d'informations pour indiquer à la classe externe quelles méthodes doivent être implémentées. Cela aide également à stabiliser la méthode de communication entre les différentes classes et réduit les problèmes qui surviennent lors du processus d'héritage de deux objets.

Cela est également utile pour le débogage. Dans un langage faiblement typé comme JavaScript, les incohérences de type sont difficiles à suivre. Lors de l'utilisation de l'interface, si un problème survient, un message d'erreur plus clair s'affichera. Bien entendu, les interfaces ne sont pas totalement exemptes de défauts. Une utilisation intensive des interfaces affaiblira dans une certaine mesure leur flexibilité en tant que langage faiblement typé. D'un autre côté, JavaScript n'a pas de support intégré pour les interfaces, mais simule uniquement les objets traditionnels. interfaces orientées. Cela rend JavaScript, qui est intrinsèquement flexible, plus difficile à contrôler.

De plus, toute manière d'implémenter une interface aura un impact sur les performances, en partie à cause de la surcharge supplémentaire des appels de méthode. Le plus gros problème avec l'utilisation des interfaces est que, contrairement à d'autres langages fortement typés, JavaScript ne pourra pas être compilé s'il ne respecte pas les conventions d'interface. Sa flexibilité peut efficacement éviter les problèmes ci-dessus. S'il se trouve dans un environnement de développement collaboratif, son interface. est très susceptible d'être endommagé sans provoquer d'erreurs, ce qui est incontrôlable.

Dans les langages orientés objet, la manière d'utiliser les interfaces est généralement similaire. Les informations contenues dans l'interface décrivent les méthodes que la classe doit implémenter et les signatures de ces méthodes. Les définitions de classe doivent indiquer explicitement qu'elles implémentent ces interfaces, sinon elles ne seront pas compilées.

Évidemment, nous ne pouvons pas faire la même chose en JavaScript, car il n'y a pas d'interface et de mots-clés d'implémentation, et il n'y aura pas de vérification au moment de l'exécution si l'interface suit le contrat, mais nous pouvons imiter la plupart de ses fonctionnalités via des méthodes auxiliaires et contrôles explicites.

Comment implémenter des interfaces en JavaScript

Il existe trois façons d'implémenter des interfaces en JavaScript :

(1) Interface de description de commentaire

(2) Interface de détection d'attributs

(3) Interface d'identification de type de canard

1. Interface de description de l'annotation : Non recommandé

Avantages : Facile à mettre en œuvre, aucune classe ou fonction supplémentaire n'est requise.

Inconvénients : Contraintes de document pures, le programme ne peut pas vérifier si l'objet qui implémente l'interface implémente toutes les méthodes d'interface

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

2 Interface de détection de propriétés : Non recommandée

La deuxième méthode est plus rigoureuse. Toutes les classes déclarent explicitement les interfaces qu'elles implémentent, et les objets qui souhaitent interagir avec ces classes peuvent vérifier ces déclarations. Les interfaces elles-mêmes ne sont encore que des annotations, mais vous pouvez désormais déterminer quelle interface une classe prétend implémenter en inspectant une propriété.

Avantages : Possibilité de vérifier quelles interfaces sont implémentées

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

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);

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();

【相关推荐: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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn