0

2つの異なるシナリオで使用するためにcss値をオブジェクトに保存しています。

styles = {
  on: { left:10, top:20 },
  off: { left:0, top:30 }
};

これを使用する最初の方法は、単純なマウスオーバー効果です。

$nav.hover(
  function() {
    $(this).css(styles.on);
  },
  function() {
    $(this).css(styles.off);
  }
);

ただし、他の用途では、アニメーションを実行しているため、やなどの追加の（css以外の）プロパティが必要easeですonComplete。styles理想的には、オブジェクトを複製して、次のように新しいプロパティをオブジェクトに追加できるようにしたいと思います。

var anim = styles;
anim.ease = Power3.easeInOut;
anim.onComplete = function() {/*stuff*/};

これは2回目の使用では問題なく機能しますが、残念ながら、値による参照を保存するため、元のstyles変数にも新しいプロパティが追加され、メソッドがcss値としてetcを.css()割り当てようとします。ease

元のオブジェクトに影響を与えずに、ソースオブジェクトをすばやく複製して、新しいプロパティを追加するにはどうすればよいですか？

Javascriptが参照渡しできるかどうかに関する議論を知っています（JavaScriptで値渡し参照渡しのようなものはありますか？、JavaScriptは参照渡しまたは値渡し言語ですか？）、私は知りませんそれについて話し合いたい...

4

2 に答える 2

1

この場合、単純なオブジェクトリテラル、迅速で汚い方法は次のようになります。

var anim = JSON.parse(JSON.stringify(styles));

オブジェクトが常にこれと同じくらい単純である場合stylesは、問題ないはずです。もちろん、関数（メソッド）、またはそこにあるマルチレベルの循環参照をいじくりまわす場合は、もう少し努力する必要があるかもしれません。

stylesが予測できないが、そのクローンからアクセスできるようにしたい場合は、次のようにすることができます。

var anim = {on: {}, off: {}};
for (var prop in anim)
{//only loop through anim's properties, as we don't know how many "styles" might have
    if (anim.hasOwnProperty(prop))
    {
        anim[prop].left = styles[prop].left || 'default value';
        anim[prop].top = styles[prop].top || 'default value';
    }
}
anim.original = styles;//reference original object...

理論的には、元のオブジェクトをプロトタイプとして使用するコンストラクターを作成できますが、それはIMHOをやややり過ぎになります。

于 2013-03-21T13:49:37.757 に答える
1

styles逆に実行し（カスタムプロパティを使用して新しいオブジェクトにコピーします）、次を使用し$.extendます。

$(this).animate($.extend({
   ease: Power3.easeInOut,
   onComplete: function() {/*stuff*/}
}, styles.off));

$.extendそれらの一部をオーバーライドする場合は、プロパティを新しいオブジェクトにコピーしてクローンを作成することもできます。

$(this).animate($.extend({}, styles.off,
   left: 5,
   ease: Power3.easeInOut,
   onComplete: function() {/*stuff*/}
}));
于 2013-03-21T14:07:31.310 に答える