2

私は、Javascriptを介してブラウザに大きく依存するWebアプリケーションを構築しています。

別のファイルにあるモジュールが必要な場合、JavaScriptエンジンが使用するメモリに関して、3つの方法のどれが最適かわかりません。

アイデア1、extendメソッドで変数を割り当てます

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         this.collections.contact.each(function(model) {
             // do something with each model
         });

         this.collections.item.on('reset', this.resetItems, this);

         this.$el.remove().append(this.view.render().el);
    };

    jQuery.extend(true, ContactExample.prototype, {
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView,
        '$el': jQuery('#somediv'),
    }, ContactExample);

    return new ContactExample();
};

アイデア2、インスタンス化メソッドで変数を割り当てます：

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         inst.collections.contact.each(function(model) {
             // do something with each model
         });

         inst.collections.item.on('reset', this.resetItems, this);

         inst.$el.remove().append(this.view.render().el);
    }

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample({
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView
    });
};

アイデア3は、関数のスコープですでに参照されているため、コードで使用するだけです。

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         ContactCollection.each(function(model) {
             // do something with each model
         });

         ItemCollection.on('reset', this.resetItems, this);

         this.$el.remove().append(ContactListView.render().el);
        }
    });

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample();
});

javascriptメモリエンジンで変数を処理するための最良の方法は何ですか（そしてその理由）。

ご回答ありがとうございます

4

3 に答える 3

1

3 つのオプションの中で最もメモリ使用量が少ないのは、重複を排除するため、コンテキスト変数 (アイデア #3) を使用することです。他の 2 つは、その関数内で作成された 2 番目のオブジェクトに値をコピーします。背景は次のとおりです。

JavaScript のすべてはオブジェクトであり、オブジェクトは内部的には文字列キーをその実際の値への参照に関連付ける単なるハッシュマップです。これには通常のローカル変数が含まれます。内部的には、それらは、その関数およびその内部で定義された関数によってアクセスできる非表示のコンテキスト オブジェクトのプロパティです。$.extend を使用するのとプロパティを直接割り当てるのとでは違いはありません。なぜなら、extend 関数は、あるオブジェクトから別のオブジェクトにプロパティをコピーする for ループの周りの構文糖衣に過ぎないからです。

関数のコンテキスト (ローカル変数) オブジェクトは、内部で定義されたすべての関数で使用するために保持されるため、オプションのメモリ使用量が最も少ないのは、新しい内部オブジェクトに複製されないオプションです。しかし、違いはわずかです。

本当にメモリ使用量を最小限に抑えて保守しやすいコードを書きたい場合は、複雑な (そしてデバッグが難しい) コンテキスト ラッピングを取り除き、昔ながらの JavaScript OOP の方法でコーディングすることをお勧めします。 : ページが最初に読み込まれたときに 1 回だけ実行される、トップ レベルまたは単一のラッパー関数内で定義された通常のコンストラクターを使用します。これにより、重複するコンテキストが取り除かれます。「new」キーワードで呼び出し、「this」に割り当てる引数としてデータを渡します。コンストラクター内で初期化を行い、それ以上は行いません。

すべてのメソッド関数をそのプロトタイプに配置してから、それを通常の、飾り気のない、飾り気のない JavaScript オブジェクトとして使用します。

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

于 2013-04-11T05:35:54.680 に答える
0

なぜ $.extend を使用しているのですか? インスタンスを作成してプロパティを割り当てるだけです。

var c = new ContactExample();
c.$el = $('#somediv');

メモリは問題になりません。代わりに、後で問題を引き起こす可能性のある DOM 要素 (#somediv) への参照に注目してください。

于 2013-04-08T14:26:37.677 に答える
0

  • 定数

    • 関数のスコープ外でそれらを必要としない場合は、通常の変数を使用してください。

    • 関数のスコープ外でそれらが必要な場合は、コンストラクターに配置します。

  • インスタンス変数 (インスタンスごとに変化)

    • インスタンスごとに異なる値を持つことがわかっているプロパティについては、コンストラクターで適切な型で宣言して、コンストラクターに関連付けられた静的型に最適化できるようにします。

    • すべてのオブジェクト間で共有されるプロパティ (メソッドなど) については、プロトタイプを使用します。

    • デフォルト値を保持する可能性が高いプロパティについては、アクセスの速度が必要な場合はコンストラクターで宣言する必要がありますが、使用するメモリを大幅に減らしたい場合は、コンストラクターにデフォルト値を設定し、プロパティのみを追加する必要がありますデフォルト値と異なる場合は、オブジェクトに。

于 2013-04-10T14:04:32.500 に答える