1

この質問はこれに関連していると思います:プラグインで init 関数はどのように機能しますか? これに答えられる人は、おそらくそれも答えられるでしょう。

プラグインを次のように呼び出すと、jQuery について何かに気づきました。

$('.view_title_images').prodigal({width: 500});
$('.glglg').prodigal({ width: 600 });

そして、私のinit機能では、次のように拡張します。

options = $.extend({}, options, opts);

それを各要素に追加します：$(this).data('prodigal', options)セレクターで。後で要素ので別の関数を呼び出すと、width各要素 (500一方と他方)の正しい値を取得します。600openclick

しかし、もしそうなら：

options = $.extend(options, opts);

両方のセレクターについて、別々に呼び出されたにもかかわらず、600. これをテストするには、open関数で次のようにします。

console.log($(this).data('prodigal'));

空のオブジェクトに拡張しないと、そのセレクター/グローバル オブジェクトのオブジェクトがオーバーライドされることはわかっていますが、data各セレクターでこれが発生するのはなぜですか?

4

2 に答える 2

1

まず、これは配列ではなくオブジェクトです。また、既存のオブジェクトを拡張するのではなく、代わりにデフォルトに基づいた新しいオブジェクトを作成し、渡されたオプションでそれらを上書きしたい場合がほとんどです。次のようになります。

options = $.extend({}, defaults, opts);

つまり$.extend、最初の引数 (配列またはオブジェクト) を残りの引数で拡張します。したがって、最初の引数として既存のオブジェクトを渡すと、クローンは作成されず、オリジナルが変更されます。

上記の例では、新しいオブジェクト ( {}) を渡すことで、代わりに 2 番目の引数のクローンを作成し、それを 3 番目の引数でオーバーライドしています。

これを変更すると多くのことが解決されますが、インスタンス間で同じオプション オブジェクトを引き続き共有するため、競合状態が発生する可能性があります。では、これらのインスタンスの 1 つまたは 2 つだけのオプションを変更したい場合はどうすればよいでしょうか?

解決策は簡単です。その行を.eachループに移動するだけで、プラグインのすべてのインスタンスが独自のオプション オブジェクトを持ちます。

これは jsFiddleのテスト ケースです。

于 2012-12-10T09:08:24.483 に答える
0

@Marcusの答えは良いものであり、実際にこの混乱を回避するプラグインの良いセットアップを示していますが、質問に少しだけよく答えるので、この答えを配置すると思いました。

PHPの場合と同様に、ここでメモリ管理のコピーオンライトシナリオを目撃しています。コピーオンライトとは何ですか。これにより、このフィドルに表示されている私のinit関数：http：//jsfiddle.net/Sammaye/65XLy/1は、各呼び出しに参照される静的オプションオブジェクトに悩まされています。したがって、両方：

$('.view_title_images').prodigal({width: 500});
$('.glglg').prodigal({ width: 600 });

optionsデータ割り当てはコピーオンライトではないため、プラグイン内のオブジェクトのメモリ内の同じ位置を参照してください。

$(this).data('prodigal', options).on('click', open);

フィドルのこの行を次のように変更すると、これが証明されます。

$(this).data('prodigal', $.extend(options, opts)).on('click', open);

var options = $.extend({}, options, opts);実際には、コピーオンライトでコピーをトリガーする拡張時に新しい空のオブジェクトにコピーするのと同じように機能します。

data各要素のは実際には静的オブジェクト（プラグイン）オブジェクトへの参照であるため、これが表示されるのはそのためoptionsです。

追加のメモとして、私はこの回答を投稿した直後にこれを実際に見つけました：http: //my.opera.com/GreyWyvern/blog/show.dml/1725165これにより、著者は次のように述べています。

Javascriptに関して人々をつまずかせることがいくつかあります。1つは、ブール値または文字列を変数に割り当てるとその値のコピーが作成され、配列またはオブジェクトを変数に割り当てると値への参照が作成されるという事実です。

これは私の問題を完全に説明しています。

于 2012-12-10T10:13:15.060 に答える