ホームページ  >  記事  >  ウェブフロントエンド  >  js装飾デザインパターン学習体験(詳しい回答)

js装飾デザインパターン学習体験(詳しい回答)

亚连
亚连オリジナル
2018-05-18 16:57:441362ブラウズ

この記事では、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;
  }

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

関連記事:

JSコールバック関数を使用する事例説明

JSコールバック関数を使用する事例説明

nodejsクロスドメイン処理を扱うローカルサーバーを構築する

以上がjs装飾デザインパターン学習体験(詳しい回答)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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