Maison interface Web Questions et réponses frontales Comment implémenter le modèle de méthode modèle à l'aide de JavaScript

Comment implémenter le modèle de méthode modèle à l'aide de JavaScript

Apr 25, 2023 am 09:15 AM

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 :

  1. 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.
  2. 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.
  3. 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.
  4. 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('该方法必须由子类实现');
  }
}
Copier après la connexion

在上面的代码中,我们定义了 Operation 类,该类包含两个数字 ab,并且实现了 getResult 方法。该方法调用了 sum 方法和 format 方法,这些方法分别计算两个数字之和和按特定格式格式化结果。由于 format 方法是一个抽象方法,因此我们必须在子类中实现该方法。

现在,我们可以创建一个子类 DecimalFormatOperation,该类格式化计算结果为十进制数字。

class DecimalFormatOperation extends Operation {
  format(result) {
    return result.toFixed(2);
  }
}
Copier après la connexion

在上面的代码中,我们继承自 Operation 类,并实现了 format 方法。该方法将计算结果四舍五入为两位小数并返回。

现在,我们可以创建一个实例,并调用 getResult 方法:

const op = new DecimalFormatOperation(2.2, 3.3);
const result = op.getResult();
console.log(result); // '5.50'
Copier après la connexion

在上面的代码中,我们创建了一个 DecimalFormatOperation 实例 op,并传入两个数字 2.23.3。然后我们调用 getResult 方法,并将结果存储在 result 变量中。最后,我们将结果输出到控制台上,结果为 '5.50'rrreee

Dans le code ci-dessus, nous définissons la classe 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 classe Operation 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!

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Mar 19, 2025 pm 03:58 PM

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.

Expliquez le concept de chargement paresseux. Expliquez le concept de chargement paresseux. Mar 13, 2025 pm 07:47 PM

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.

Comment fonctionne le currying en JavaScript et quels sont ses avantages? Comment fonctionne le currying en JavaScript et quels sont ses avantages? Mar 18, 2025 pm 01:45 PM

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

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Mar 18, 2025 pm 01:44 PM

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.

Comment fonctionne l'algorithme de réconciliation React? Comment fonctionne l'algorithme de réconciliation React? Mar 18, 2025 pm 01:58 PM

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

Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Mar 21, 2025 pm 06:23 PM

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

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Mar 19, 2025 pm 03:59 PM

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.

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Mar 19, 2025 pm 04:10 PM

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é.

See all articles