Introduction au modèle de décorateur des modèles de conception JavaScript_compétences Javascript-js tutoriel-php.cn

Introduction au modèle de décorateur des modèles de conception JavaScript_compétences Javascript

WBOY

Libérer： 2016-05-16 16:24:03

original

963 Les gens l'ont consulté

Description du motif du décorateur

Explication : utiliser une classe pour modifier dynamiquement l'objet fonctionnel d'une autre classe avant ou après, et y ajouter des fonctions supplémentaires ; c'est la décoration de la fonction d'un objet de classe, et la classe décorée est liée à la classe décorée ; class Les classes doivent avoir les mêmes méthodes d'interface d'accès (fonctions). Dans les classes dynamiques orientées objet, l'implémentation est généralement contrainte par l'implémentation de la même interface ; la méthode de la classe décorée appelle la méthode de la classe décorée correspondante puis la modifie

;

Exemple de scénario :

1>. Par exemple, les vêtements que nous portons dans la vie sont une chemise, une veste de costume, un pantalon, une cravate et une paire de belles chaussures en cuir, chaque pièce supplémentaire portée est une décoration pour le devant ; ou tout le corps ;

2>. Par exemple, nous avons une méthode fonctionnelle sous la classe, qui peut être utilisée pour écrire des journaux ou pour la connexion de l'utilisateur. Il est peut-être nécessaire d'obtenir les informations actuelles de l'opérateur avant d'écrire le journal, ou après une connexion réussie. écrire Entrez un journal ; l'opération supplémentaire avant d'écrire le journal est généralement le but de l'écriture du journal ; l'écriture du journal après une connexion réussie est généralement les informations d'opération du processus de connexion ;

Par conséquent, le modèle de décorateur est utilisé pour mettre en œuvre un scénario où les deux ont des opérations similaires ; c'est l'extension du décorateur à l'objet fonctionnel décoré, et l'essence est la même portée fonctionnelle de la méthode originale

;

Exemple de code source

1. Cours de décorateur

Copier le code Le code est le suivant :

fonction Wear() {

>
Wear.prototype.Shirt = function() {

//Porter une chemise
console.log('mettre une chemise');
>

2. Cours de décorateur

Copier le code Le code est le suivant :

function Décorateur(usure) {
This.wear = porter;
>
Decorator.prototype.Shirt = function() {

This.wear.Shirt();
//Après avoir porté une chemise, j'ai ajouté une cravate
>

3. Comment utiliser

Copier le code Le code est le suivant :

var wear = new Wear();

var decorator = new Decorator(wear);

décorateur.Shirt();

De cette manière, la décoration étendue dynamique de l'objet fonctionnel Wear shirt est réalisée. Vous n'avez pas besoin de savoir comment la méthode de décoration originale est exécutée. Il vous suffit de savoir quelle est sa fonction, puis de savoir ce que nous faisons. souhaitez y ajouter. Quelles que soient les fonctions supplémentaires ;

Autres consignes

Le modèle décorateur incarne véritablement l'approche orientée objet : le principe d'être ouvert aux extensions et fermé aux modifications ; toutes les méthodes fonctionnelles souhaitées sont implémentées sans modifier la [classe décorée Wear] et étendre la [classe décoratrice] Décorateur] ;

L'une des principales caractéristiques du motif décorateur est que le décorateur fait référence à l'objet décoré pour obtenir une décoration non modifiée de l'objet décoré

;

Simulation : Enfiler d'abord une chemise, puis une cravate, puis un costume : La personne décorée ci-dessus reste inchangée :

2. Cours de décorateur :

Copier le code Le code est le suivant :

function Décorateur(usure) {

This.wear = porter;

>

Décorateur.prototype.Shirt = function() {

This.wear.Shirt(); //Ne portez qu'une chemise ici ;

>

3. Créez une classe cravate et une classe costume qui héritent de la sous-classe Décorateur

Copier le code Le code est le suivant :

function Decorator_Tie(décorateur) {
This.decorator = décorateur;
}
Decorator_Tie.prototype.Shirt = function() {
This.decorator.Shirt(); //Mettez la chemise
console.log('Remets ta cravate');
>

fonction Decorator_Western (décorateur) {
This.decorator = décorateur;
>
Decorator_Western.prototype.Shirt = function() {
This.decorator.Shirt();
console.log('Remettez le costume');
>

Utilisation :

Copier le code Le code est le suivant :

//Mettez d'abord votre chemise

var wear = new Wear();

var decorator = new Decorator(wear);

//décorateur.Shirt();

//Remets ta cravate

var tie = new Decorator_Tie(décorateur);

//cravate.Shirt();

//Remets le costume

var western = new Decorator_Western(tie);

western.Shirt();

Ceci est un exemple de simulation de port de vêtements et de décoration