JSでの装飾デザインパターンの詳細な解釈

この記事では、Javascript 装飾デザインパターンを学習した著者の経験と重要なポイントを共有します。興味のある友人は参照してください。

デコレーションデザインパターン

各デバイスには、独自のアプリケーションシナリオと問題解決方法があります。これは、サブクラスを追加することなく、オブジェクトに新しい機能を動的に追加するために使用されるテクノロジーです。継承により、オブジェクトの新しい機能を拡張できます。継承関係の代わりにオブジェクト関連付け関係を使用すると、より柔軟であり、型システムの急速な拡張を回避できます。このモードは、新しく追加された関数だけでは継承を犠牲にして問題を解決できない場合、つまりニワトリを殺す場合に使用するのに適しています。肉屋のナイフ ^_^
装飾デザイン パターン: オブジェクトの機能を拡張するために、デコレーターは継承よりも柔軟な代替手段を提供します。

構造図:

インターフェース

var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'repair', 'getPrice']);

オブジェクトクラス

var AcmeComfortCuiser = function(){
  
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
    
  },
  wash: function(){
    
  },
  repair: function(){
    
  },
  getPrice: function(){
    
  }
}

装飾クラス

var BicycleDecorator = function(bicycle){
  Interface.ensureImplements(bicycle, Bicycle);
  this.bicycle = bicycle;
};
BicycleDecorator.prototype = {
  assemble: function(){
    return this.bicycle.assemble();
  },
  wash: function(){
    return this.bicycle.wash();
  },
  repair: function(){
    return this.bicycle.repair();
  },
  getPrice: function(){
    return this.bicycle.getPrice();
  }
}

拡張クラス

  var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }

上記は私が皆さんのためにまとめたものです。将来的にはそれを使用します。

関連記事:

画像のランダムなドラッグを実装するための Vue.js メソッド

連続またはすべての繰り返し文字の JS 文字列削除の例

中国語の A-Z 並べ替えを実装するための Vue.js または js メソッド

以上がJSでの装飾デザインパターンの詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。