私は非常にユニークな問題を抱えており、どのように取り組むべきか、最善の方法があるかどうか、および/またはこれが設計パターンの欠陥であるかどうかについて確信が持てません。
質問する理由は、同じ機能のために関数を書き直す必要はないと思うからです。以下のコード例をご覧ください。
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
オブジェクトはプロトタイプとしてDiv
1 つの 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
私が直面しているこの問題に取り組むために使用すべきパターンはありますか?
私はここからどこへ行くべきかについて文字通り立ち往生していますが、私が今やっている方法は正しい方法ではないと確信しています!
私の質問を読んでくれてありがとう。