Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée du mode stratégie JavaScript, des scénarios d'utilisation du mode modèle et du code d'implémentation

伊谢尔伦
Libérer: 2017-07-24 14:12:58
original
2740 Les gens l'ont consulté

Modèle de stratégie

Le modèle de stratégie fait référence à la définition d'une série d'algorithmes et à leur encapsulation un par un. Le but est de séparer l'utilisation de l'algorithme de la mise en œuvre de l'algorithme. Pour parler franchement, la méthode d'écriture qui nécessitait autrefois beaucoup de jugements est désormais séparée du contenu des jugements et transformée en petits individus.

Mise en œuvre du code :

Le scénario du code est une promotion de supermarché, les VIP bénéficient d'une réduction de 50 %, les clients réguliers bénéficient d'une réduction de 30 % et les clients ordinaires ne bénéficient pas d'une réduction. Calculez le montant final à payer. .

Situation sans utiliser le mode stratégie :

function Price(personType, price) {
  //vip 5 折
  if (personType == 'vip') {
    return price * 0.5;
  }
  else if (personType == 'old'){ //老客户 3 折
    return price * 0.3;
  } else {
    return price; //其他都全价
  }
}
Copier après la connexion

Inconvénients : Mauvais points, lorsque j'ai d'autres réductions, ou que les réductions de mes activités changent souvent, il faut donc constamment modifier les conditions dans si..sinon. Et cela viole également l'un des principes des modèles de conception : le principe d'être fermé aux modifications et ouvert aux extensions

Après avoir utilisé le modèle de stratégie :

// 对于vip客户
function vipPrice() {
  this.discount = 0.5;
}
vipPrice.prototype.getPrice = function(price) {
  return price * this.discount;
}
// 对于老客户
function oldPrice() {
  this.discount = 0.3;
}
oldPrice.prototype.getPrice = function(price) {
  return price * this.discount;
}
// 对于普通客户
function Price() {
  this.discount = 1;
}
Price.prototype.getPrice = function(price) {
  return price ;
}
// 上下文,对于客户端的使用
function Context() {
  this.name = '';
  this.strategy = null;
  this.price = 0;
}
Context.prototype.set = function(name, strategy, price) {
  this.name = name;
  this.strategy = strategy;
  this.price = price;
}
Context.prototype.getResult = function() {
  console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));
}
var context = new Context();
var vip = new vipPrice();
context.set ('vip客户', vip, 200);
context.getResult();  // vip客户 的结账价为: 100
var old = new oldPrice();
context.set ('老客户', old, 200);
context.getResult(); // 老客户 的结账价为: 60
var Price = new Price();
context.set ('普通客户', Price, 200);
context.getResult(); // 普通客户 的结账价为: 200
Copier après la connexion

À travers le modèle de stratégie, les remises et les algorithmes du client sont Le découplage permet d'effectuer des modifications et des extensions indépendamment sans affecter l'utilisation des clients ou d'autres algorithmes

Scénarios d'utilisation :

L'occasion la plus pratique pour le modèle de stratégie est ; une certaine "classe" " contient un grand nombre d'instructions conditionnelles, telles que if...else ou switch. Chaque branche conditionnelle fait changer le comportement spécifique de la « classe » d’une manière différente. Au lieu de maintenir

une énorme instruction conditionnelle, il est préférable de diviser chaque comportement en plusieurs objets indépendants. Chaque objet est appelé une stratégie. La définition de plusieurs objets de stratégie de ce type peut améliorer la qualité de notre code et faciliter les tests unitaires.

Modèle de modèle

définit le squelette d'un algorithme en une seule opération, en reportant certaines étapes aux sous-classes. Les méthodes modèles permettent aux sous-classes de redéfinir des étapes spécifiques d'un algorithme sans modifier la structure de l'algorithme.

En termes simples, cela signifie encapsuler certaines méthodes publiques dans une classe parent. Les sous-classes peuvent hériter de cette classe parent et peuvent remplacer les méthodes de la classe parent dans la sous-classe pour implémenter leur propre logique métier.

Mise en œuvre du code :

Par exemple, les entretiens frontaux comprennent essentiellement des tests écrits, des entretiens techniques, des entretiens de direction, des entretiens RH, etc. Cependant, les questions des tests écrits et les aspects techniques de chaque entreprise peuvent être différents ou identiques, s'ils sont identiques, hériter des méthodes de la classe parent, s'ils sont différents, remplacer les méthodes de la classe parent

var Interview = function(){};
// 笔试
Interview.prototype.writtenTest = function(){
  console.log("这里是前端笔试题");
};
// 技术面试
Interview.prototype.technicalInterview = function(){
  console.log("这里是技术面试");
};
// 领导面试
Interview.prototype.leader = function(){
  console.log("领导面试");
};
// 领导面试
Interview.prototype.HR = function(){
  console.log("HR面试");
};
// 等通知
Interview.prototype.waitNotice = function(){
  console.log("等通知啊,不知道过了没有哦");
};
// 代码初始化
Interview.prototype.init = function(){
  this.writtenTest();
  this.technicalInterview();
  this.leader();
  this.HR();
  this.waitNotice();
};
// 阿里巴巴的笔试和技术面不同,重写父类方法,其他继承父类方法。
var AliInterview = function(){};
AliInterview.prototype = new Interview();
// 子类重写方法 实现自己的业务逻辑
AliInterview.prototype.writtenTest = function(){
  console.log("阿里的技术题就是难啊");
}
AliInterview.prototype.technicalInterview = function(){
  console.log("阿里的技术面就是叼啊");
}
var AliInterview = new AliInterview();
AliInterview.init();
// 阿里的技术题就是难啊
// 阿里的技术面就是叼啊
// 领导面试
// HR面试
// 等通知啊,不知道过了没有哦
Copier après la connexion

Scénarios d'application :

Le mode modèle est principalement utilisé lorsqu'un code doit être ouvert une fois les parties immuables implémentées. Cependant, si la page est modifiée ultérieurement, une partie de la logique métier doit être modifiée ou de nouvelles activités doivent être ajoutées. Principalement, la classe parent est réécrite via la sous-classe et les autres parties qui n'ont pas besoin d'être modifiées héritent de la classe parent.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal