Mode proxy du mode de conception JavaScript - Réaliser le chargement de l'image de chargement

table des matières

3. L'agent virtuel réalise le chargement de l'image de chargement

1. Définition

Le mode proxy consiste à fournir un substitut ou un espace réservé pour un objet afin qu'il soit accessible par une valeur nulle.

2. Classification

Agent virtuel: retardez la création de certains objets coûteux dans l'agent jusqu'à ce qu'ils soient vraiment nécessaires.
Proxy de cache: fournit un stockage temporaire pour certains résultats de calcul coûteux. Dans le calcul suivant, si les paramètres transmis sont cohérents avec les paramètres précédents, les résultats de calcul précédemment stockés peuvent être directement renvoyés.
Agent de protection: utilisé lorsque les objets doivent avoir des droits d'accès différents.
Proxy de pare-feu: contrôlez l'accès aux ressources du réseau et protégez les thèmes des «méchants».
Agent distant: fournit une représentation locale d'un objet dans différents espaces d'adressage. En Java, l'agent distant peut être un objet dans une autre machine virtuelle.
Agent de référence intelligente: au lieu de simples pointeurs, il effectue des opérations supplémentaires lors de l'accès aux objets, comme le comptage du nombre de fois où un objet est référencé.
Agent de copie sur écriture: généralement utilisé pour copier un objet volumineux. L'agent de copie sur écriture retarde le processus de copie et ne copie l'objet que lorsqu'il est réellement modifié. L'agent de copie sur écriture est une variante de l'agent virtuel et la DLL (bibliothèque de liens dynamiques dans le système d'exploitation) est son scénario d'application typique.

Le mode proxy comprend de nombreuses petites catégories, les plus couramment utilisées dans le développement JavaScript sont le proxy virtuel et le proxy de cache.

3. L'agent virtuel réalise le chargement de l'image de chargement

Dans le développement actuel, il y aura beaucoup d'exigences pour l'affichage des images. Lorsque la vitesse du réseau est faible ou que l'image est grande, un espace apparaîtra. À ce stade, nous avons besoin d'un chargement pour informer l'utilisateur que l'opération de chargement est en cours, et l'affichage réel ne sera pas affiché tant que le chargement n'est pas terminé. Les photos améliorent l'expérience. Comme indiqué ci-dessous:

Le chargement d'images sans mode proxy est le suivant:

const myImage = (function () {
    const imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    const img = new Image;
    img.onload = function () {
        imgNode.src = img.src;
    }
    return {
        setSrc: function (src) {
            imgNode.src = 'loading图';
            img.src = src;
        }
    }
})();
myImage.setSrc( '真实图片' );

Utilisez le mode proxy pour implémenter le chargement des images comme suit:

// 本体对象
const myImage = (function () {
    const imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        setSrc: function (src) {
            imgNode.src = src;
        }
    }
})();
// 代理对象
const proxyImage = (function () {
    const img = new Image;
    img.onload = function () {
        myImage.setSrc(this.src);          // 加载完成后本体设为真实src
    }
    return {
        setSrc: function (src) {
            myImage.setSrc('loading图片');  // 加载前loading
            img.src = src;                 // 让新建的img加载真实图
        }
    }
})();
proxyImage.setSrc('真实显示图片');

Tout d'abord, créez un objet d'ontologie commun myImage, qui est chargé de créer une balise img dans la page et de fournir une interface setSrc externe, qui est appelée par le monde extérieur pour définir l'attribut src.
Ensuite, nous introduisons l'objet proxy proxyImage, via cet objet proxy, avant que l'image ne soit réellement chargée, une image de chargement d'espace réservé apparaîtra sur la page pour rappeler à l'utilisateur que l'image est en cours de chargement; une fois le chargement terminé, définissez le src local sur l'affichage réel. image.

4. Pourquoi utiliser le mode proxy?

Nous avons vu que les fonctions ci-dessus peuvent être réalisées même sans mode et que la quantité de code est moindre Quel est l'avantage d'utiliser le mode proxy?

En utilisant le modèle d'agence, il est plus conforme au principe de responsabilité unique et au principe d'ouverture-fermée.

Principe de responsabilité unique: pour une classe (comprenant généralement des objets et des fonctions, etc.), il ne devrait y avoir qu'une seule raison à son changement.
Principe ouvert-fermé: Les objets (classes, modules, fonctions, etc.) du logiciel doivent être ouverts pour extension, mais fermés pour modification.

Lorsqu'il n'y a pas de mode proxy, l'objet myImage est non seulement responsable de la définition de src pour le nœud img, mais également de l'affichage du chargement. Lorsque nous traitons l'une des responsabilités, il est possible que le couplage fort affecte la réalisation des autres responsabilités. Plus tard, si le chargement n'est pas nécessaire en raison de certaines circonstances (petites images, vitesse Internet rapide), vous devez supprimer le code correspondant dans MyImage, ce qui viole le principe ouvert-fermé.

Au contraire, lors de l'utilisation du mode proxy, myImage se charge d'afficher les images, et proxyImage se charge d'afficher le chargement, elles peuvent être modifiées individuellement sans se toucher, conformément au principe de responsabilité unique. L’objet proxy est une extension du chargement d’image, et lorsque nous n’avons pas besoin de le charger, il suffit de le changer en ontologie de requête au lieu de l’objet proxy de requête, qui est conforme au principe ouvert-fermé.

Remarque: livre de référence "JavaScript Design Patterns and Development Practice"