Explication détaillée du modèle de conception JavaScript classique Strategy Pattern

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-vous la méthode d'animation dans jquery

$( p ).animate( {“left: 200px”}, 1000, ‘linear’ );  //匀速运动
$( p ).animate( {“left: 200px”}, 1000, ‘cubic’ );  //三次方的缓动

Ces deux lignes de code font toutes deux déplacer p de 200 pixels vers la droite en 1000 ms linéaires (vitesse uniforme). ) et cubique (cubic easing) sont une sorte d'encapsulation du 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 du réel. -Formulaires de vérification du temps. Le formulaire Chaque membre aura des règles de vérification différentes.

Par exemple, dans la zone de nom, il est nécessaire de vérifier les mots et caractères non vides et sensibles. c'est trop long. Bien sûr, vous pouvez écrire 3 if else pour résoudre le problème, mais l'évolutivité et la maintenabilité d'écrire du code comme celui-ci 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 dans le 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 ceci :

nameInput.addValidata({
notNull: true,
dirtyWords: true,
maxLength: 30
})
而notNull，maxLength等方法只需要统一的返回true或者false，来表示是否通过了验证。
validataList = {
notNull: function( value ){
return value !== ”;
},
maxLength: function( value, maxLen ){
return value.length() > maxLen;
}
}

Comme vous pouvez le constater, les différentes 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.

Articles connexes :

Exemple de code de modèle de conception JavaScript classique simple

Modèle de conception JavaScript explication détaillée du modèle singleton classique

Introduction détaillée au modèle d'observateur des modèles de conception JavaScript

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!