ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript ストラテジーモード、テンプレートモードの使用シナリオと実装コードの詳細な説明

JavaScript ストラテジーモード、テンプレートモードの使用シナリオと実装コードの詳細な説明

伊谢尔伦
伊谢尔伦オリジナル
2017-07-24 14:12:582682ブラウズ

戦略パターン

戦略パターンとは、一連のアルゴリズムを定義し、それらを 1 つずつカプセル化することを指します。その目的は、アルゴリズムの使用とアルゴリズムの実装を分離することです。端的に言えば、かつては多くの判断を必要としていた書き方が、判断の内容から切り離されて小さな個人になってしまったのだ。

コードの実装:

コードのシナリオはスーパーマーケットのプロモーションで、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 内の条件を常に変更しなければならないことです。また、これはデザイン パターンの原則の 1 つにも違反します。つまり、変更は受け付けず、拡張はオープンにするという原則です。

戦略パターンを使用した後:

// 对于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 または switch 。各条件分岐により、「クラス」の特定の動作が異なる方法で変化します。巨大な条件ステートメントを維持する代わりに、各動作を複数の独立したオブジェクトに分割することをお勧めします。各オブジェクトはポリシーと呼ばれます。このようなポリシー オブジェクトを複数設定すると、コードの品質が向上し、単体テストが容易になります。

テンプレート パターン

は、アルゴリズムのスケルトンを 1 つの操作で定義し、一部のステップをサブクラスに延期します。テンプレート メソッドを使用すると、アルゴリズムの構造を変更せずに、サブクラスでアルゴリズムの特定のステップを再定義できます。

平たく言えば、いくつかのパブリック メソッドを親クラスにカプセル化することを意味します。サブクラスはこの親クラスを継承し、サブクラス内の親クラスのメソッドをオーバーライドして独自のビジネス ロジックを実装できます。

コードの実装:

たとえば、フロントエンド面接には基本的に筆記試験、技術面接、リーダー面接、人事面接などが含まれます。ただし、筆記試験の質問や技術的な側面は各企業によって異なる場合もあれば、同じである場合もあります。メソッドは同じであり、親クラスを継承します。異なる場合は、親クラスのメソッドを書き換えます

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。