Detailed explanation of JavaScript strategy mode, template mode usage scenarios and implementation code

Strategy Pattern

The strategy pattern refers to defining a series of algorithms and encapsulating them one by one. The purpose is to separate the use of the algorithm from the implementation of the algorithm. To put it bluntly, the writing method that used to require a lot of judgments is now separated from the content of the judgments and turned into small individuals.

Code implementation:

The code scenario is a supermarket promotion, VIP is 50% off, regular customers are 30% off, and ordinary customers are not discounted. Calculate the final amount to be paid.

Without using strategy mode:

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; //其他都全价
  }
}

Disadvantages: The bad thing is that when I have discounts from other aspects, or the discounts for my activities often change, like this It is necessary to constantly modify the conditions in if..else. And it also violates one of the principles of the design pattern: the principle of being closed for modification and open for expansion;

After using the strategy pattern:

// 对于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

Through the strategy pattern, the customer's discount and algorithm are decoupled , and allows modification and expansion to be carried out independently, without affecting the use of the client or other algorithms;

Usage scenarios:

The most practical occasion for the strategy pattern is in a certain "class" Contains a large number of conditional statements, such as if...else or switch. Each conditional branch causes the specific behavior of the "class" to change in a different way. Instead of maintaining a large conditional statement, it is better to divide each behavior into multiple independent objects. Each object is called a policy. Setting multiple such policy objects can improve the quality of our code and enable better unit testing.

Template pattern

Defines the skeleton of an algorithm in an operation, while deferring some steps to subclasses. Template methods allow subclasses to redefine specific steps of an algorithm without changing the structure of the algorithm.

In layman's terms, it means encapsulating some public methods into a parent class. Subclasses can inherit this parent class, and can override the methods of the parent class in the subclass to implement their own business logic.

Code implementation:

For example, front-end interviews basically include written tests, technical interviews, leadership interviews, HR interviews, etc. However, the written test questions and technical aspects of each company may be different or the same. , if the method is the same, inherit the method of the parent class, if it is different, rewrite the method of the parent class

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面试
// 等通知啊，不知道过了没有哦

Application scenario:

The template mode is mainly used when some code has just been started and needs to be implemented at once. The changing part. However, if the page is modified in the future, part of the business logic needs to be changed or new business needs to be added. Mainly, the parent class is rewritten through the subclass, and other parts that do not need to be changed inherit the parent class.

The above is the detailed content of Detailed explanation of JavaScript strategy mode, template mode usage scenarios and implementation code. For more information, please follow other related articles on the PHP Chinese website!