Exemple de modèle de stratégie de modèle de conception JavaScript_Compétences Javascript

Le sens du modèle de stratégie est de définir une série d'algorithmes, de les encapsuler un par un et de les rendre interchangeables.
Un petit exemple peut nous le faire comprendre.

Rappelez la méthode animer dans jquery.

Copier le code Le code est le suivant :

$( div ).animate( {"left: 200px"}, 1000, 'linear' ); // Mouvement uniforme
$( div ).animate( {"left: 200px"}, 1000, 'cubic' ); // Assouplissement cubique

Ces deux lignes de code font toutes deux déplacer le div de 200 pixels vers la droite en 1 000 ms. Linéaire (vitesse uniforme) et cubique (assouplissement cubique) sont l'encapsulation d'un modèle de stratégie.

Prenons un autre exemple. Dans le dev.qplus.com que j'ai écrit au premier semestre, de nombreuses pages auront un formulaire de vérification instantanée. Chaque membre du formulaire aura des règles de vérification différentes.

Par exemple, dans la case du nom, il faut vérifier qu'il ne s'agit pas de mots vides, sensibles, et que les caractères sont trop longs. Bien sûr, vous pouvez écrire trois if else pour résoudre le problème, mais l'évolutivité et la maintenabilité de l'écriture de code de cette manière peuvent être imaginées. S’il y a plus d’éléments dans le formulaire et que plus de situations doivent être vérifiées, il n’est pas impossible d’écrire des centaines de if else au total.

Une meilleure approche consiste donc à encapsuler chaque règle de validation séparément à l'aide du modèle de stratégie. Lorsque vous avez besoin de quel type de vérification, il vous suffit de fournir le nom de la police. Comme ça :

Copier le code Le code est le suivant :

nameInput.addValidata({
notNull : vrai,
mots sales : vrai,
longueur maximale : 30
})

Les méthodes notNull, maxLength et autres doivent uniquement renvoyer true ou false uniformément pour indiquer si la vérification a réussi.

Copier le code Le code est le suivant :

validataList = {
notNull : fonction (valeur) {
valeur de retour !== ”;
},
maxLength : fonction (valeur, maxLen){
return value.length() > maxLen;
>
>

Comme vous pouvez le constater, diverses règles de validation peuvent être facilement modifiées et remplacées les unes par les autres. Si un jour le chef de produit suggère que la limite de caractères soit modifiée à 60 caractères. Cela ne prend que 0,5 seconde pour terminer le travail.