JavaScript 전략 모드, 템플릿 모드 사용 시나리오 및 구현 코드에 대한 자세한 설명

Strategy Pattern

Strategy Pattern은 일련의 알고리즘을 정의하고 이를 하나씩 캡슐화하는 것을 의미합니다. 알고리즘의 사용과 알고리즘의 구현을 분리하는 것이 목적입니다. 직설적으로 말하면 예전에는 판단이 많이 필요했던 글쓰기 방식이 이제는 판단의 내용과 분리되어 작은 개인으로 변해버린 것이다.

코드 구현:

코드 시나리오는 슈퍼마켓 프로모션이며, VIP는 50% 할인, 일반 고객은 30% 할인, 일반 고객은 할인되지 않습니다.

전략 모드를 사용하지 않는 상황:

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

단점: 다른 측면에서 할인이 있거나 내 활동의 할인이 자주 변경될 때 if... else 내부의 조건을 계속 수정해야 한다는 것이 나쁜 점입니다. 그리고 이는 디자인 패턴의 원칙 중 하나인 수정에 폐쇄적이고 확장에 개방적인 원칙을 위반합니다.

전략 패턴을 사용한 후:

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

전략 패턴을 통해 고객의 할인과 알고리즘이 분리되고 수정됩니다. 확장은 독립적일 수 있습니다. 프로세스는 클라이언트나 다른 알고리즘의 사용에 영향을 미치지 않습니다.

사용 시나리오:

전략 패턴의 가장 실용적인 경우는 "클래스"에 다음과 같은 다수의 조건문이 포함된 경우입니다. if...else 또는 스위치. 각 조건 분기는 "클래스"의 특정 동작을 다른 방식으로 변경합니다. 거대한 조건문을 유지하는 대신 각 동작을 여러 개의 독립적인 개체로 나누는 것이 좋습니다. 각 개체를 정책이라고 합니다. 이러한 정책 개체를 여러 개 설정하면 코드 품질이 향상되고 더 나은 단위 테스트가 가능해집니다.

템플릿 패턴

은 한 번의 작업으로 알고리즘의 골격을 정의하는 동시에 일부 단계를 하위 클래스로 연기합니다. 템플릿 메서드를 사용하면 하위 클래스가 알고리즘 구조를 변경하지 않고도 알고리즘의 특정 단계를 재정의할 수 있습니다.

일반인의 관점에서 이는 일부 공용 메서드를 상위 클래스로 캡슐화하는 것을 의미합니다. 하위 클래스는 이 상위 클래스를 상속할 수 있으며 하위 클래스의 상위 클래스 메서드를 재정의하여 자체 비즈니스 논리를 구현할 수 있습니다.

코드 구현:

예를 들어 프런트 엔드 면접에는 기본적으로 필기 시험, 기술 면접, 리더십 면접, HR 면접 등이 포함됩니다. 그러나 각 회사마다 필기 시험 문제와 기술적인 측면이 다를 수도 있고 동일할 수도 있습니다. 동일하면 상위 클래스를 상속합니다. 메소드가 다른 경우 상위 클래스의 메소드를 다시 작성하세요

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

응용 시나리오:

템플릿 모드는 주로 변경되지 않고 구현되어야 하는 일부 코드에서 사용됩니다. 일회. 다만, 향후 페이지가 수정될 경우 비즈니스 로직의 일부를 변경하거나 새로운 비즈니스를 추가해야 합니다. 주로 상위 클래스는 하위 클래스를 통해 다시 작성되고, 변경이 필요하지 않은 부분은 상위 클래스를 상속받습니다.

위 내용은 JavaScript 전략 모드, 템플릿 모드 사용 시나리오 및 구현 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!