


Comment implémenter le modèle de méthode modèle à l'aide de JavaScript
Le modèle de méthode modèle est un modèle de conception comportemental, qui fait référence à la définition du squelette d'un algorithme en une seule opération et au report de certaines étapes aux sous-classes. Les méthodes modèles permettent aux sous-classes de redéfinir certaines étapes d'un algorithme sans modifier sa structure. Dans cet article, nous verrons comment implémenter le modèle de méthode modèle à l'aide de JavaScript.
Implémentation des méthodes
En JavaScript, l'implémentation du modèle de méthode modèle nécessite de suivre les étapes suivantes :
- Définir une classe de base qui définit le squelette de l'algorithme en une seule opération. L'opération peut être une fonction ou une méthode de classe.
- Implémentez quelques étapes de l'algorithme dans la classe de base. Ces étapes peuvent être des méthodes abstraites ou des implémentations concrètes. Lors de la mise en œuvre de ces étapes, vous devez supposer que ces étapes seront remplacées par les sous-classes.
- Définissez des sous-classes, implémentez des méthodes abstraites dans la classe de base ou modifiez l'implémentation concrète dans la classe de base.
- Créez une instance et appelez l'opération dans la classe de base, qui appellera à son tour les étapes de l'algorithme implémentées dans la classe de base et les étapes remplacées dans la sous-classe.
Exemple
Voici un exemple qui montre comment implémenter le modèle Template Method en JavaScript. Supposons que nous créions une classe de base Operation
qui définit le calcul de la somme de deux nombres. Cette opération comprend deux étapes : d’abord ajouter deux nombres, puis formater le résultat. Nous utiliserons le modèle de méthode modèle pour implémenter cette opération et laisserons la sous-classe décider comment formater le résultat. Operation
,该类定义了计算两个数的和。此操作由两个步骤组成:首先,将两个数字相加,然后对结果进行格式化。我们将使用模板方法模式来实现这个操作,并让子类决定如何格式化结果。
class Operation { constructor(a, b) { this.a = a; this.b = b; } getResult() { const sum = this.sum(); return this.format(sum); } sum() { return this.a + this.b; } format(result) { // 由子类决定如何格式化结果 throw new Error('该方法必须由子类实现'); } }
在上面的代码中,我们定义了 Operation
类,该类包含两个数字 a
和 b
,并且实现了 getResult
方法。该方法调用了 sum
方法和 format
方法,这些方法分别计算两个数字之和和按特定格式格式化结果。由于 format
方法是一个抽象方法,因此我们必须在子类中实现该方法。
现在,我们可以创建一个子类 DecimalFormatOperation
,该类格式化计算结果为十进制数字。
class DecimalFormatOperation extends Operation { format(result) { return result.toFixed(2); } }
在上面的代码中,我们继承自 Operation
类,并实现了 format
方法。该方法将计算结果四舍五入为两位小数并返回。
现在,我们可以创建一个实例,并调用 getResult
方法:
const op = new DecimalFormatOperation(2.2, 3.3); const result = op.getResult(); console.log(result); // '5.50'
在上面的代码中,我们创建了一个 DecimalFormatOperation
实例 op
,并传入两个数字 2.2
和 3.3
。然后我们调用 getResult
方法,并将结果存储在 result
变量中。最后,我们将结果输出到控制台上,结果为 '5.50'
rrreee
Operation
, qui contient deux nombres a
et b
, et implémente getResult méthode. Cette méthode appelle la méthode sum
et la méthode format
, qui calculent respectivement la somme de deux nombres et formatent le résultat dans un format spécifique. Puisque la méthode format
est une méthode abstraite, nous devons implémenter cette méthode dans la sous-classe. Maintenant, nous pouvons créer une sous-classe DecimalFormatOperation
qui formate le résultat du calcul sous forme de nombre décimal. rrreee
Dans le code ci-dessus, nous héritons de la classeOperation
et implémentons la méthode format
. Cette méthode arrondit le résultat du calcul à deux décimales et le renvoie. 🎜🎜Maintenant, nous pouvons créer une instance et appeler la méthode getResult
: 🎜rrreee🎜Dans le code ci-dessus, nous créons une instance DecimalFormatOperation
op code> , et transmettez les deux nombres <code>2.2
et 3.3
. Nous appelons ensuite la méthode getResult
et stockons le résultat dans la variable result
. Enfin, nous affichons le résultat sur la console sous la forme '5.50'
. 🎜🎜Conclusion🎜🎜Le modèle de méthode modèle est un modèle de conception très utile qui peut être utilisé en JavaScript pour mieux organiser le code et fournir un moyen flexible de définir le squelette d'un algorithme. Le principal avantage de ce modèle est qu’il rend le code plus facile à comprendre et à maintenir, tout en facilitant également sa réutilisation. Si vous écrivez souvent des algorithmes complexes ou si vous devez implémenter certaines opérations courantes, le modèle de méthode modèle peut être le modèle de conception dont vous avez besoin. 🎜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!

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)

L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.

Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.

L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code

Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.

L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159

L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.

L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.

L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
