Cette fois, je vais vous montrer comment utiliser le Modèle de stratégie du Modèle de conception dans le front-end, et comment utiliser le modèle de stratégie du Modèle de conception dans le front-end. NotesIl y a lesquelles, voici des cas pratiques, jetons un coup d'oeil.

Qu'est-ce qu'un modèle de stratégie ?

Dans les classiques "Design Patterns" des quatre frères GoF, le modèle de stratégie est défini comme suit :

Définir une série d'algorithmes, les encapsuler un par un et les rendre interchangeables.

La phrase ci-dessus est littéralement très simple. Mais comment l’appliquer dans le processus de développement reste source de confusion avec une seule définition. Prenons comme exemple le système d'achat, de vente et d'inventaire des commerçants sur lequel l'auteur a travaillé :

Un supermarché se prépare à organiser un événement promotionnel. Le personnel du marché a formulé quelques stratégies promotionnelles après enquête et analyse :

10 de réduction pour les achats supérieurs à 100
30 de réduction pour les achats supérieurs à 200
50 de réduction pour les achats plus de 300
. . .

L'interface du logiciel de caisse est la suivante (schéma simple) :

Comment utiliser le modèle de stratégie des modèles de conception dans le front-end

Comment doit-on calculer le montant réel de la consommation ?

L'implémentation initiale est la suivante :

//方便起见，我们把各个促销策略定义为枚举值：0,1,2...
var getActualTotal = function(onSaleType,originTotal){
    if(onSaleType===0){
        return originTotal-Math.floor(originTotal/100)*10
    }
    if(onSaleType===1){
        return originTotal-Math.floor(originTotal/200)*30
    }
    if(onSaleType===0){
        return originTotal-Math.floor(originTotal/300)*50
    }
}
getActualTotal(1,2680); //2208

Copier après la connexion

Le code ci-dessus est très simple, et ses défauts sont également évidents. Au fur et à mesure que ma stratégie de réduction complète augmente progressivement, la fonction

deviendra de plus en plus grande, et elle est pleine de getActualTotal jugements, et il est facile de faire des erreurs si je ne fais pas attention. if

OK, certaines personnes disent que je suis paresseux. Même si ce n'est pas assez élégant, cela n'affecte pas mon utilisation. Après tout, peu importe le nombre de stratégies de réduction complète utilisées, cela ne suffira pas.

Je peux seulement dire que les exigences ne sont jamais déterminées par les programmeurs. . À l'heure actuelle, le personnel du marché a déclaré que notre nouvelle version du programme avait ajouté des fonctions d'adhésion et que nous devions prendre en charge les stratégies de promotion suivantes :

Stratégie de promotion des membres :

Rechargez 300 pour les membres et obtenez 60 en retour, et 10 % de réduction pour le premier achat unique
Les membres rechargent 500 et obtenez 100 RMB, et 20 % de réduction pour le premier achat unique
Les membres rechargent 1 000 et récupèrent 300 RMB, et le premier achat unique est 7 fois
...

À l'heure actuelle, si vous continuez à ajouter des

jugements à la fonction getActualTotal d'origine, je pense que si votre leader révise votre code, il se demandera peut-être pourquoi il vous a embauché en premier lieu. . if

OK, nous avons finalement décidé de refactoriser le code de la stratégie de promotion. Nous pouvons faire ceci :

var vipPolicy_0=function(originTotal){
    return originTotal-Math.floor(originTotal/100)*10
}
var vipPolicy_1=function(originTotal){
    return originTotal-Math.floor(originTotal/200)*30
}
...
//会员充1000返300
var vipPolicy_10=function(account,originTotal){
    if(account===0){
        account+=1300;
        return originTotal*0.9
    }else{
        account+=1300;
        return originTotal;
    }
    return originTotal-Math.floor(originTotal/200)*30
}
...
var vipPolicy_n=function(){
    ...
}
var getActualTotal=function(onSaleType,originTotal,account){
    switch(onSaleType){
        case 0:
            return vipPolicy_0(originTotal);
        case 1:
            return vipPolicy_0(originTotal);
        ...
        case n:
            return ...
        default:
            return originTotal;
    }
}

Copier après la connexion

D'accord, maintenant chacune de nos stratégies a son propre espace indépendant, ça a l'air très organisé. . Mais il reste encore deux problèmes qui n'ont pas été résolus :

Avec l'augmentation des stratégies de promotion, le volume de code de
deviendra encore de plus en plus grandgetActualTotal
Le système manque de flexibilité. Si vous devez ajouter une stratégie, en plus d'ajouter une fonction de stratégie, vous devez également modifier l'instruction
switch...case..

Let. revoyons la définition du pattern de stratégie :

Définir une série d'algorithmes, les encapsuler un par un, et les rendre interchangeables

Dans notre exemple, la mise en œuvre de chaque stratégie de promotion est différente, mais nous Le but ultime est de trouver le montant réel. Le modèle de stratégie peut encapsuler nos algorithmes de stratégies promotionnelles un par un et les rendre interchangeables sans affecter notre évaluation du montant réel, ce qui est exactement ce dont nous avons besoin.

Utilisons le modèle de stratégie pour reconstruire le code ci-dessus :

var policies={
    "Type_0":function(originTotal){
        return originTotal-Math.floor(originTotal/100)*10 
    },
    "Type_1":function(originTotal){
        return originTotal-Math.floor(originTotal/200)*30 
    },
    ...
    "Type_n":function(originTotal){
        ... 
    }
}
var getActualTotal=function(onSaleType,originTotal,account){
    return policies["Type_"+onSaleType](originTotal,account)
}
//执行
getActualTotal(0,2680.00);//2208

Copier après la connexion

En analysant le code ci-dessus, nous avons constaté que quelle que soit la façon dont la stratégie de promotion est augmentée, la fonction

ne il faut absolument changer. Il ne nous reste plus qu'à ajouter la fonction de la nouvelle stratégie. getActualTotal

Grâce au code du modèle de stratégie, nous avons éliminé les instructions de branchement conditionnelles qui vous font mal au ventre.

lui-même n'a aucune puissance de calcul, mais délègue le calcul à la fonction de stratégie. getActualTotal

À partir de là, nous pouvons résumer les points clés de la mise en œuvre du modèle de stratégie :

Encapsuler l'algorithme changeant dans une fonction de stratégie indépendante et être responsable du calcul spécifique
La fonction déléguée, qui accepte les demandes des clients et délègue la demande à une fonction de stratégie spécifique

est représentée par un diagramme UML comme suit :
Comment utiliser le modèle de stratégie des modèles de conception dans le front-end

? Maintenant que vous voyez l’image ci-dessus, avez-vous une compréhension claire ? Alors dépêchez-vous et essayez le mode stratégie !

Ouvrages de référence :

"Modèles de conception : réutilisablesOrientés objetBases du logiciel"
《Modèles de conception Dahua》
《JavascriptModèles de conception et pratiques de développement》

Je fais du développement front-end depuis plusieurs années, mais je n'ai jamais étudié et résumé les modèles de conception en profondeur. À mesure que je fais de plus en plus de travaux liés à l’architecture, j’ai de plus en plus l’impression que les modèles de conception sont devenus un obstacle sur mon chemin. Alors commencez dès aujourd’hui à étudier et résumer en profondeur les modèles de conception classiques et plusieurs principes majeurs orientés objet.

Aujourd’hui c’est le premier jour, parlons d’abord du mode stratégie.

Qu'est-ce qu'un modèle de stratégie ?

Dans les classiques « Design Patterns » des quatre frères GoF, le modèle de stratégie est défini comme suit :

Définir une série d'algorithmes, les encapsuler un par un et les rendre interchangeables.

Un supermarché se prépare à organiser un événement promotionnel. Le personnel du marché a formulé quelques stratégies promotionnelles après enquête et analyse :

Comment utiliser le modèle de stratégie des modèles de conception dans le front-end Comment doit-on calculer le montant réel de la consommation ?

L'implémentation initiale est la suivante :

Le code ci-dessus est très simple, et ses défauts sont également évidents. Au fur et à mesure que ma stratégie de réduction complète augmente progressivement, la fonction

//方便起见，我们把各个促销策略定义为枚举值：0,1,2...
var getActualTotal = function(onSaleType,originTotal){
    if(onSaleType===0){
        return originTotal-Math.floor(originTotal/100)*10
    }
    if(onSaleType===1){
        return originTotal-Math.floor(originTotal/200)*30
    }
    if(onSaleType===0){
        return originTotal-Math.floor(originTotal/300)*50
    }
}
getActualTotal(1,2680); //2208

Copier après la connexion

deviendra de plus en plus grande et elle est pleine de

jugements. Il est facile de faire des erreurs si vous ne faites pas attention. getActualTotalifOK, certaines personnes disent que je suis paresseux. Même si ce n'est pas assez élégant, cela n'affecte pas mon utilisation. Après tout, peu importe le nombre de stratégies de réduction complète utilisées, cela ne suffira pas.

Stratégie de promotion des membres :

jugements à la fonction

d'origine, je pense que si votre leader révise votre code, il se demandera peut-être pourquoi il vous a embauché en premier lieu . . getActualTotalifOK, nous avons finalement décidé de refactoriser le code de la stratégie de promotion. Nous pouvons faire ceci :

D'accord, maintenant chacune de nos stratégies a son propre espace indépendant, ça a l'air très organisé. . Mais il reste encore deux problèmes qui n'ont pas été résolus :

var vipPolicy_0=function(originTotal){
    return originTotal-Math.floor(originTotal/100)*10
}
var vipPolicy_1=function(originTotal){
    return originTotal-Math.floor(originTotal/200)*30
}
...
//会员充1000返300
var vipPolicy_10=function(account,originTotal){
    if(account===0){
        account+=1300;
        return originTotal*0.9
    }else{
        account+=1300;
        return originTotal;
    }
    return originTotal-Math.floor(originTotal/200)*30
}
...
var vipPolicy_n=function(){
    ...
}
var getActualTotal=function(onSaleType,originTotal,account){
    switch(onSaleType){
        case 0:
            return vipPolicy_0(originTotal);
        case 1:
            return vipPolicy_0(originTotal);
        ...
        case n:
            return ...
        default:
            return originTotal;
    }
}

Copier après la connexion

deviendra encore de plus en plus grand
getActualTotal
switch...case..

定义一系列的算法，把它们一个个封装起来，并且使它们可互相替换

在我们的例子中，每种促销策略的实现方式是不一样的，但我们最终的目的都是为了求得实际金额。策略模式可以把我们对促销策略的算法一个个封装起来，并且使它们可互相替换而不影响我们对实际金额的求值，这正好是我们所需要的。

下面我们用策略模式来重构上面的代码：

var policies={
    "Type_0":function(originTotal){
        return originTotal-Math.floor(originTotal/100)*10 
    },
    "Type_1":function(originTotal){
        return originTotal-Math.floor(originTotal/200)*30 
    },
    ...
    "Type_n":function(originTotal){
        ... 
    }
}
var getActualTotal=function(onSaleType,originTotal,account){
    return policies["Type_"+onSaleType](originTotal,account)
}
//执行
getActualTotal(0,2680.00);//2208

Copier après la connexion

分析上面的代码我们发现，不管促销策略如何增加，getActualTotal函数完全不需要再变化了。我们要做的，就是增加新策略的函数而已。

通过策略模式的代码，我们消除了让人反胃的大片条件分支语句，getActualTotal本身并没有计算能力，而是将计算全权委托给了策略函数。

由此我们可以总结出策略模式实现的要点：