interface Web
js tutoriel
Apprendre les modèles de conception JavaScript - compétences proxy pattern_javascript
Apprendre les modèles de conception JavaScript - compétences proxy pattern_javascript
- Les célébrités sont représentées par des managers. Si vous demandez à une célébrité d'organiser une représentation commerciale, vous ne pouvez contacter que son agent. L'agent négociera les détails et la rémunération de la représentation commerciale, puis remettra le contrat à la célébrité pour qu'elle le signe.
1. Définition
Modèle de proxy : Fournissez un substitut ou un espace réservé pour un objet afin d'en contrôler l'accès.
Les agents sont divisés en : Agents de protection et agents virtuels
Agent de protection : est utilisé pour contrôler l'accès des objets avec différentes autorisations à l'objet cible. Il est difficile de juger qui a accédé à un objet en JavaScript, donc l'agent de protection est difficile. à mettre en œuvre.
2. Préchargement d'image (le scénario d'application d'agent virtuel le plus courant)
Le préchargement d'image est une technologie courante. Si vous définissez directement l'attribut src pour un nœud de balise img, la position de l'image sera souvent vide pendant un certain temps en raison d'une image trop grande ou d'un réseau médiocre. Une approche courante consiste à utiliser une image de chargement comme espace réservé à l'avance, puis à charger l'image de manière asynchrone. Une fois l'image chargée, remplissez-la dans le nœud img.
Principe de mise en œuvre :
Créez un objet Image : var a = new Image();
Définissez le src de l'objet Image : a.src = « xxx.gif »
Cela équivaut à mettre en cache une image pour le navigateur.
Vous pouvez vérifier si l'image est chargée via l'attribut complet de l'objet Image. Chaque objet Image a un attribut complet. Lorsque l'image est en cours de chargement, la valeur de l'attribut est fausse. Lorsque l'un des événements onload, onerror et onabort se produit, cela signifie que le processus de chargement de l'image est terminé. l'attribut complet est vrai.
(1) Implémentation sans proxy
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
var img = new Image();
img.onload = function() {
imgNode.src = img.src;
};
return {
setSrc: function(src) {
imgNode.src = "./images/loading.gif";
img.src = src;
}
}
})();
myImage.setSrc("./images/originImg.png");
(2) Implémentation du proxy
// 创建图片DOM
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
imgNode.src = src;
}
};
})();
// 代理
var proxyImage = (function() {
var img = new Image();
img.onload = function() {
myImage.setSrc(this.src); // this指向img！img加载完成后，将img.src传递给myImage
};
return {
setSrc: function(src) {
myImage.setSrc("./images/loading.gif"); // loading
img.src = src;
}
};
})();
proxyImage.setSrc("./images/originImg.png");
Les avantages de l'utilisation du mode proxy : rendre chaque fonction unique et réaliser le « principe de responsabilité unique » de la conception d'objets !
3. Synchronisation des fichiers
Supposons que nous effectuions une fonction de synchronisation de fichiers. Lorsque la case est cochée, son fichier correspondant sera synchronisé avec un autre serveur.
<body>
<input type="checkbox" id="1" />文件1
<input type="checkbox" id="2" />文件2
<input type="checkbox" id="3" />文件3
<input type="checkbox" id="4" />文件4
<input type="checkbox" id="5" />文件5
<input type="checkbox" id="6" />文件6
</body>Il est évidemment déraisonnable de synchroniser une seule fois sans cocher une case. Parce que dans le développement Web, la plus grande surcharge concerne les requêtes réseau.
Solution : Utilisez une fonction proxy pour collecter les demandes dans un délai donné, puis envoyez-les au serveur en une seule fois.
var synchronousFile = function(id) {
console.log("开始同步文件，id为：" + id);
};
var proxySynchonousFile = (function() {
var cache = [], // 保存本次需要同步文件的id
timer; // 定时器
return function(id) {
cache.push(id);
if(timer) {
// 不要覆盖已经启动的定时
return;
}
timer = setTimeout(function(){
synchronousFile(cache.join(","));
clearTimeout(timer);
timer = null;
cache.length = 0; // 清空缓存
}, 2000);
}
})();
var checkboxs = document.getElementsByTagName("input");
for(var i = 0, c; c = checkboxs[i]; i++) {
c.onclick = function() {
if(this.checked === true) {
proxySynchonousFile(this.id);
}
}
}
4. Proxy de mise en cache – calcul du produit (la séquence est exactement la même)
var mult = function() {
var result = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
result= result * arguments[i];
}
return result;
};
var proxyMult = (function() {
var cache = {}; // {"1,2,3": 6}
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = mult.apply(this, arguments);
}
})();
console.log(proxyMult(1, 2, 3));
// 改造：
var proxyFactory = function(fn) {
var cache = {};
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = fn.apply(this, arguments);
}
};
console.log(proxyFactory(mult)(1, 2, 3));
J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
La différence entre les modèles de conception et les modèles architecturaux dans le framework Java
Jun 02, 2024 pm 12:59 PM
Dans le framework Java, la différence entre les modèles de conception et les modèles architecturaux réside dans le fait que les modèles de conception définissent des solutions abstraites aux problèmes courants de conception de logiciels, en se concentrant sur l'interaction entre les classes et les objets, tels que les modèles d'usine. Les modèles architecturaux définissent la relation entre les structures et les modules du système, en se concentrant sur l'organisation et l'interaction des composants du système, tels que l'architecture en couches.
Quels sont les avantages et les inconvénients du mode proxy dans le framework Java ?
Jun 03, 2024 am 09:34 AM
Le modèle de proxy est un modèle de conception de framework Java qui sert d'intermédiaire entre le client et l'objet cible en créant un objet proxy. Ses avantages incluent : la protection des objets cibles, l'intégrité et la sécurité des données ; le contrôle de l'accès à la cible, la mise en œuvre de mesures de contrôle des autorisations et de sécurité, l'ajout de fonctions supplémentaires telles que la journalisation, la mise en cache et la gestion des transactions ; objectifs. Cependant, le modèle de proxy présente également des inconvénients : Frais généraux : la création et la maintenance d'objets proxy peuvent réduire les performances ; Complexité : nécessite une compréhension approfondie du modèle de conception. Accès restreint aux cibles, ce qui peut ne pas être approprié dans certains cas.
L'utilisation merveilleuse du modèle d'adaptateur dans les modèles de conception Java
May 09, 2024 pm 12:54 PM
Le modèle Adaptateur est un modèle de conception structurelle qui permet à des objets incompatibles de fonctionner ensemble. Il convertit une interface en une autre afin que les objets puissent interagir de manière fluide. L'adaptateur d'objet implémente le modèle d'adaptateur en créant un objet adaptateur contenant l'objet adapté et en implémentant l'interface cible. Dans un cas pratique, grâce au mode adaptateur, le client (tel que MediaPlayer) peut lire des médias au format avancé (tels que VLC), bien qu'il ne prenne lui-même en charge que les formats multimédias ordinaires (tels que MP3).
Analyse du modèle de décorateur dans les modèles de conception Java
May 09, 2024 pm 03:12 PM
Le modèle décorateur est un modèle de conception structurelle qui permet l’ajout dynamique de fonctionnalités d’objet sans modifier la classe d’origine. Il est mis en œuvre grâce à la collaboration de composants abstraits, de composants concrets, de décorateurs abstraits et de décorateurs concrets, et peut étendre de manière flexible les fonctions de classe pour répondre aux besoins changeants. Dans cet exemple, des décorateurs de lait et de moka sont ajoutés à Espresso pour un prix total de 2,29 $, démontrant la puissance du modèle de décorateur pour modifier dynamiquement le comportement des objets.
Analyse de cas pratique du modèle de conception PHP
May 08, 2024 am 08:09 AM
1. Modèle d'usine : séparez la création d'objets et la logique métier, et créez des objets des types spécifiés via des classes d'usine. 2. Modèle d'observateur : permet aux objets sujets d'informer les objets observateurs de leurs changements d'état, obtenant ainsi un couplage lâche et un modèle d'observateur.
Quels sont les avantages et les inconvénients de l'utilisation de modèles de conception dans le framework Java ?
Jun 01, 2024 pm 02:13 PM
Les avantages de l'utilisation de modèles de conception dans les frameworks Java incluent : une lisibilité, une maintenabilité et une évolutivité améliorées du code. Les inconvénients incluent la complexité, la surcharge de performances et la courbe d'apprentissage abrupte due à une utilisation excessive. Cas pratique : Le mode proxy permet de charger des objets paresseusement. Utilisez les modèles de conception à bon escient pour tirer parti de leurs avantages et minimiser leurs inconvénients.
Comment les modèles de conception gèrent les défis de maintenance du code
May 09, 2024 pm 12:45 PM
Les modèles de conception résolvent les problèmes de maintenance du code en fournissant des solutions réutilisables et extensibles : Modèle d'observateur : permet aux objets de s'abonner aux événements et de recevoir des notifications lorsqu'ils se produisent. Factory Pattern : fournit un moyen centralisé de créer des objets sans recourir à des classes concrètes. Modèle Singleton : garantit qu'une classe n'a qu'une seule instance, qui est utilisée pour créer des objets accessibles globalement.
Application des modèles de conception dans le cadre Guice
Jun 02, 2024 pm 10:49 PM
Le framework Guice applique un certain nombre de modèles de conception, notamment : Modèle Singleton : garantir qu'une classe n'a qu'une seule instance via l'annotation @Singleton. Modèle de méthode d'usine : créez une méthode d'usine via l'annotation @Provides et obtenez l'instance d'objet lors de l'injection de dépendances. Mode stratégie : encapsulez l'algorithme dans différentes classes de stratégie et spécifiez la stratégie spécifique via l'annotation @Named.
