5

一種の変換テーブルを使用してキャンバス関連のクラスを構築しています。変換テーブルはユーザーが編集できます。（実際には関係ありませんが、理由を知りたいと思うかもしれません）：

cLayout = function(option) {
    //obtaining the canvas (el) here
    this.setup = function(option) {
        t=this.table;
        for (var p in t)
        {
            el[t[p][0]] = option[p]||t[p][1]
        }
    }
    this.setup(option)
}

cLayout.prototype.table = {
    width:[['style']['width'],"100%"],
    height:['style'['height'],"100%"],
    bg:[['style']['backgroundColor'],""],
    position:[['style']['position'],"absolute"],
    left:['style'['left'],"0px"],
    top:['style'['left'],"0px"]
}

例：

var b = new cLayout({left:'10%',width:'90%'})

本当の質問:

通常、el['style']['width']el.style.width を設定するために使用します。しかしel[something]、2 番目の角かっこなしで使用したい: プロパティ名を完全に可変にしたい (また、設定できるようにしたいel['innerHTML'])。a[b]では、 を使用せずに を使用して孫を取得する方法はありa[b][c]ますか?

PS もちろん、eval は使いたくありません。

4

1 に答える 1

3

いいえ、できません。ネストされたオブジェクトがある場合、レベルをスキップすることはできません。

"child.grandchild"ただし、次のような文字列を受け取り、対応するプロパティを設定するヘルパー関数を作成できます。

function setProp(obj, prop, val) {
    var parts = prop.split('.');
    while(parts.length > 1) {
        obj = obj[parts.shift()];
    }
    obj[parts.shift()] = val;
}

(特定のプロパティが利用可能かどうかもテストする必要があります。)

次に、コードは次のようになります。

var cLayout = function(option) {
    //obtaining the canvas (el) here
    this.setup = function(option) {
        for(var p in this.table) {
            setProp(el, this.table[p][0], option[p]||t[p][1]);
        }
    }
    this.setup(option)
}

cLayout.prototype.table = {
    width:['style.width',"100%"],
    height:['style.height',"100%"],
    //...
}
于 2011-06-18T12:42:04.960 に答える