2

私は非常にユニークな問題を抱えており、どのように取り組むべきか、最善の方法があるかどうか、および/またはこれが設計パターンの欠陥であるかどうかについて確信が持てません。

質問する理由は、同じ機能のために関数を書き直す必要はないと思うからです。以下のコード例をご覧ください。

 function Div(config) {

     var config = config || {};
     this.element = document.createElement("div");
     this.setSize(config.width || 0, config.height || 0);
 };

 Div.prototype.setSize = function(width, height) {

     this.setWidth(width);
     this.setHeight(height);
 };

 Div.prototype.setWidth = function(width) {

     this.element.style.width = width + "px";
 };

 Div.prototype.setHeight = function(height) {

     this.element.style.height = height + "px";
 };

 Div.prototype.appendTo = function(element) {

     element.appendChild(this.element);
 };

div上記のコードでタグを作成できることがわかります。HTML div を簡単に作成し、サイズを設定して、他の要素に追加できます。

Overlay継承する必要があるオブジェクトもありますDiv。最初はさんの原型Divとして設定することにしました。Overlay

 function Overlay(config) {

      var config = config || {};
      this.setSize(config.width, config.height);
 };

 Overlay.prototype = new Div();

これはうまくいきましたが、Overlay基本的Divにいくつかの機能が追加されているため、問題が発生します。OverlayオブジェクトはプロトタイプとしてDiv1 つの div 要素のみを指すため、の各インスタンスにOverlayは独自の div 要素が必要です。

次に、 ;Divのプロパティを作成することにしました。Overlay

 function Overlay(config) {

     var config = config || {};
     this.div = new Div(config);
 };

これも問題なく動作しますが、インスタンスを作成するときは、Overlayそのように使用する必要があります。

 var overlay = new Overlay();
 overlay.div.setSize(100, 100);

それよりも;

 var overlay = new Overlay();
 overlay.setSize(100, 100);

これに取り組むために、私は新しいプロトタイプ関数を作成しOverlayて簡単に使用できるOverlayようにしました。

 function Overlay(config) {

     var config = config || {};
     this.div = new Div(config);
 };

 Overlay.prototype.setSize = function(width, height) {

     this.div.setWidth(width);
     this.div.setHeight(height);
 };

 Overlay.prototype.setWidth = function(width) {

     this.div.setWidth(width);
 };

 Overlay.prototype.setHeight = function(height) {

     this.div.setHeight(height);
 };

 Overlay.prototype.appendTo = function(element) {

     this.div.appendTo(element);
 };

このように作成するOverlayことはまさに私が望んでいる機能ですがOverlay、文字通り使いやすさのために関数を書いているので、これがどのように行われるべきかは非常に間違っているようです。Div本当の痛みになる。

Divのプロトタイプとして設定するOverlayのは正しい方法のようですが、私の場合、すべてのインスタンスがOverlay同じ div 要素に関連付けられているため、明らかにそうではありません。

DivオブジェクトとオブジェクトのOverlay両方を作成するにはどうすればよいですか? にOverlayは独自のインスタンスがあり、すべての機能をプロトタイプにDiv継承しますか? Div私が直面しているこの問題に取り組むために使用すべきパターンはありますか?

私はここからどこへ行くべきかについて文字通り立ち往生していますが、私が今やっている方法は正しい方法ではないと確信しています!

私の質問を読んでくれてありがとう。

4

1 に答える 1

2

コードを機能させ、追加されたすべての関数を削除できるようにするには、次をOverlayコンストラクターに追加します。

Div.call(this);

Overlayコンストラクターを宣言した後に、次の行を追加します。

Overlay.prototype = Object.create(Div.prototype);

説明: これは、私たちが行っていることのより詳細な内訳です​​。まず、Divコンストラクターを定義し、そのプロトタイプにいくつかの機能を与えます。

function Div() {
    this.propA = true;
}
Div.prototype.sayMyProp = function(){
   alert(this.propA);   
};

Overlayコンストラクターを定義します。

function Overlay() {
    Div.call(this);  // This gives any Overlay object the properties of Div
    // Define some properties specific to Overlay
    this.propB = true;
}

のプロトタイプOverlayから継承する新しいプロトタイプを作成します。Div

Overlay.prototype = Object.create(Div.prototype);

これはのプロパティを にコピーするのではなくDiv.prototype、への「親」参照を持つオブジェクトをOverlay.prototype作成するだけであることに注意してください。独自のプロパティはありません (ただし、上書きしていなければプロパティがあったはずです)。次に、 の 2 つのインスタンスを作成して構造をテストします。Overlay.prototypeDiv.prototypeOverlay.prototypeconstructorOverlay

var o1 = new Overlay();
var o2 = new Overlay();

o1.propA = false;  // Does not change o2.propA because it is an "own"
                   // property of Overlay instances

Div のプロトタイプの関数にアクセスできます。

o1.sayMyProp();    // FALSE
o2.sayMyProp();    // TRUE, so they are not sharing the same propA

フィドル: ここにフィドルがあります

于 2013-05-15T16:15:27.530 に答える