recherche

Maison >interface Web >js tutoriel >Comment utiliser le modèle de stratégie des modèles de conception dans le front-end

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

php中世界最好的语言
php中世界最好的语言original
2018-05-24 09:50:301390parcourir

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 :
  1. 10 de réduction pour les achats supérieurs à 100

  2. 30 de réduction pour les achats supérieurs à 200

  3. 50 de réduction pour les achats plus de 300

  4. . . .

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
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 :
  1. Rechargez 300 pour les membres et obtenez 60 en retour, et 10 % de réduction pour le premier achat unique

  2. Les membres rechargent 500 et obtenez 100 RMB, et 20 % de réduction pour le premier achat unique

  3. Les membres rechargent 1 000 et récupèrent 300 RMB, et le premier achat unique est 7 fois

  4. ...

À 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;
    }
}
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 :

  1. Avec l'augmentation des stratégies de promotion, le volume de code de

    deviendra encore de plus en plus grandgetActualTotal

  2. 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
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 :

  1. Encapsuler l'algorithme changeant dans une fonction de stratégie indépendante et être responsable du calcul spécifique

  2. 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 :

  1. "Modèles de conception : réutilisablesOrientés objetBases du logiciel"

  2. 《Modèles de conception Dahua》

  3. 《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.
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

    2. 30 de réduction pour les achats supérieurs à 200

    3. 50 de réduction pour les achats plus de 300

    4. . . .

    5. 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-endComment 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
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.

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 récupérez 60, et 10 % de réduction pour le premier achat unique

    2. Les membres qui rechargent 500 recevront 100 en retour et 20 % de réduction pour le premier single achat

    3. Les membres qui rechargent 1000 recevront 300 en retour, et le premier achat unique est 7 fois

    4. ...

    5. À l'heure actuelle, si vous continuez à ajouter des
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;
    }
}

    Avec l'augmentation des stratégies de promotion, le volume de code de
  1. deviendra encore de plus en plus grand

    getActualTotal

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

  2. switch...case..

    3. Let. revoyons la définition du modèle de stratégie :
定义一系列的算法，把它们一个个封装起来，并且使它们可互相替换

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

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

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

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

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

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

  1. 将变化的算法封装成独立的策略函数，并负责具体的计算

  2. 委托函数，该函数接受客户请求，并将请求委托给某一个具体的策略函数

用一张UML图表示如下：
Comment utiliser le modèle de stratégie des modèles de conception dans le front-end

怎么样？现在看到上面这张图是不是有了了然于胸的感觉？那就赶紧去试一试策略模式吧！

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用JS+H5实现微信摇一摇

如何对微信小程序进行开发

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：
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
Article précédent：Le principe d'AJAX : comment réaliser un rafraîchissement asynchrone et partielArticle suivant：Le principe d'AJAX : comment réaliser un rafraîchissement asynchrone et partiel

Articles Liés

Voir plus