1

次の間の最良の方法はどれですか。

var myClass = function() {
    this.myContainer = function(){ return $(".container");}
    this.mySubContainer = function(){ return this.myContainer().find(".sub"); }
}

var myClass = function() {
    this.myContainer = $(".container");
    this.mySubContainer = this.myContainer.find(".sub");
}

具体的な違いはありますか?

メモリの問題は、十分なJavaScript(約150KBの私の+ライブラリ)を含む私のWebページが300〜400MB以上のRAMを使用することを確認したときに発生しました。私は問題を見つけようとしていますが、これがそれらの1つである可能性があるかどうかはわかりません。

4

4 に答える 4

2
function myClass{
    this.myContainer = function(){ return $(".container");}
    this.mySubContainer = function(){ return this.myContainer().find(".sub"); }
}

ここでは、次のように呼び出す必要があります。これは、その関数を使用しているときに jquery が要素myClassInstance.myContainer()を検索することを意味します。.containerさらに、クラスの新しいインスタンスを作成するたびに、2 つの追加のクロージャが作成されます。そして、それには追加のメモリが必要になります。

function myClass{
    this.myContainer = $(".container");
    this.mySubContainer = this.myContainer.find(".sub");
}

ここではmyContainer、DOM ノードへのすべてのリンクが既に含まれているオブジェクトを指しています。jQueryはいつでもDOMを検索しませんmyClassInstance.myContainer

したがって、アプリの速度を低下させたくない場合は、2 番目のアプローチが適しています。ただし、DOM が頻繁に変更される場合は、最初のアプローチが役立ちます。しかし、2 番目のアプローチを使用する必要があるほど頻繁に変更されているとは限りません。

于 2012-11-14T18:59:50.960 に答える
0

割り当てようとしている変数が 1 つだけの場合、2 番目のアプローチの方がきれいに見えます。

于 2012-11-14T18:56:44.707 に答える
0

はい、違います。

モデル 1:

最初のモデルでmyContainerは、関数変数です。jQuery オブジェクトは含まれていません。オブジェクトで jQuery のメソッドを呼び出すことはできません。実際にjQueryオブジェクトを取得するには、次のように言わなければなりません

var obj = this.myContainer()またthis.myContainer.call()

モデル 2:

2 番目のモデルには、実際の jQuery オブジェクトが格納されます。

this.myContainer両方のモデルでアラートを出してみてください。違いがわかります。

于 2012-11-14T18:56:49.467 に答える
0

はい、これは違います。構文エラーを修正した後:

function myClass(){... // 括弧

1位

新しいオブジェクトを作成するvar obj = new myClass()と、2 つの関数が作成され、呼び出すまで jquery オブジェクトは返されません。

var container = obj.myContainer();

2位

オブジェクトが初期化されるとすぐに dom がアクセスされ、後で使用するためにオブジェクトがキャッシュされます。

var container = obj.myContainer;
于 2012-11-14T19:00:23.420 に答える