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

亚连
リリース: 2018-06-05 17:29:51
オリジナル
1748 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート