JavaScript の遅延読み込み属性パターンを理解する

JavaScript の遅延読み込み属性パターンを理解する

従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプロパティを作成します。コンストラクターですぐに利用できる小さなデータの場合、これは問題ではありません。ただし、インスタンスで使用できるようになる前にデータを計算する必要がある場合は、その料金を前払いしたくない場合があります。たとえば、次のクラスを考えてみましょう。

クラス MyClass {
    コンストラクタ() {
        this.data = someExpensiveComputation();
    }
}

ここでは、いくつかの高価な計算を実行した結果としてdataプロパティが作成されます。プロパティが使用されるかどうかわからない場合は、事前にその計算を実行するのは効率的ではない可能性があります。幸いなことに、これらのアクションを後回しにする方法はいくつかあります。

オンデマンド属性モード

高価な操作の実行を最適化する最も簡単な方法は、計算を実行する前にデータが必要になるまで待つことです。たとえば、次のように、ゲッター付きのアクセサー プロパティを使用して、オンデマンドで計算を行うことができます。

クラス MyClass {
    データを取得する() {
        someExpensiveComputation() を返します。
    }
}

この場合、誰かがそのdata属性を初めて読み取るまで、コストのかかる計算は行われません。これは改善点です。ただし、 data属性が読み取られるたびに同じ高価な計算が実行されるため、少なくとも計算が 1 回しか実行されなかった前の例よりも状況は悪化します。これは良い解決策ではありませんが、これを基にしてより良い解決策を作り出すことができます。

面倒な遅延読み込みプロパティパターン

プロパティにアクセスしたときにのみ計算を実行するのが良いスタートです。本当に必要なのは、その時点以降の情報をキャッシュし、キャッシュされたバージョンのみを使用することです。しかし、この情報を簡単にアクセスできるようにキャッシュする場所はどこでしょうか?これを行う最も簡単な方法は、次のように、同じ名前のプロパティを定義し、その値を計算されたデータに設定することです。

クラス MyClass {
    データを取得する() {
        実際のデータ = someExpensiveComputation();
 
        Object.defineProperty(this, "データ", {
            値: 実際のデータ、
            書き込み可能: false、
            設定可能: false、
            列挙可能: false
        });
 
        実際のデータを返します。
    }
}

ここで、 dataプロパティはクラスのゲッターとして再度定義されますが、今回は結果がキャッシュされます。 Object.defineProperty()を呼び出すと、 actualDataという固定値を持ち、書き込み不可、構成可能、および列挙不可 (ゲッターと一致するように) に設定されたdataという新しいプロパティが作成されます。その後、値自体が返されます。次にdataプロパティにアクセスするときは、ゲッターを呼び出す代わりに、新しく作成されたプロパティから読み取ります。

const オブジェクト = 新しい MyClass();
 
// ゲッターを呼び出す
定数 data1 = オブジェクト.data;
 
// データプロパティから読み取ります
オブジェクトのデータを返します。

実際、すべての計算はdata属性が最初に読み取られたときにのみ実行されます。 dataプロパティのその後の各読み取りでは、キャッシュされたバージョンが返されます。

このパターンの欠点の 1 つは、 dataプロパティが列挙不可能なプロトタイプ プロパティとして始まり、列挙不可能な独自のプロパティとして終了することです。

const オブジェクト = 新しい MyClass();
console.log(object.hasOwnProperty("data")); // 偽
 
const データ = オブジェクト.データ;
console.log(object.hasOwnProperty("data")); // 真

この区別は多くの場合重要ではありませんが、オブジェクトを渡すときに微妙な問題が発生する可能性があるため、このパターンを理解することが重要です。幸いなことに、この問題は更新されたモデルを使用すれば簡単に修正できます。

クラスのプロパティを遅延読み込みするパターン

遅延ロードされたプロパティが常にインスタンス内に存在することが重要であるユースケースがある場合は、 Object.defineProperty()を使用してクラス コンストラクターでプロパティを作成できます。前の例よりも少し複雑ですが、プロパティがインスタンスにのみ存在するようになります。次に例を示します。

クラス MyClass {
    コンストラクタ() {

        Object.defineProperty(this, "データ", {
            得る() {
                実際のデータ = someExpensiveComputation();

                Object.defineProperty(this, "データ", {
                    値: 実際のデータ、
                    書き込み可能: false、
                    設定可能: false
                });

                実際のデータを返します。
            },
            設定可能: true、
            列挙可能: true
        });

    }
}

ここで、コンストラクターdata Object.defineProperty()を使用します。プロパティはインスタンス上に作成され ( thisを使用して)、ゲッターを定義し、プロパティが列挙可能で構成可能であることを指定します (独自のプロパティの典型)。 Object.defineProperty()を再度呼び出せるように、 dataプロパティを構成可能にすることが特に重要です。

次に、ゲッター関数は計算を実行し、 Object.defineProperty()を再度呼び出します。 data属性は、特定の値を持つデータ属性として再定義され、最終データを保護するために書き込み不可および構成不可になりました。計算されたデータはゲッターから返されます。次にdataプロパティが読み取られるときには、保存された値が読み取られます。ボーナスとして、 dataプロパティは独自のプロパティとしてのみ存在するようになり、最初の読み取りの前後で同じように動作します。

const オブジェクト = 新しい MyClass();
console.log(object.hasOwnProperty("data")); // 真
 
const データ = オブジェクト.データ;
console.log(object.hasOwnProperty("data")); // 真

クラスの場合、これがおそらく使用するパターンです。一方、オブジェクト リテラルを使用すると、より簡単なアプローチが可能になります。

オブジェクトリテラルの遅延読み込みプロパティパターン

クラスの代わりにオブジェクト リテラルを使用する場合、オブジェクト リテラルで定義されたゲッターは、データ プロパティと同様に、列挙可能な独自のプロパティ (プロトタイプ プロパティではなく) として定義されるため、プロセスははるかに簡単になります。つまり、オブジェクトに対して煩雑な遅延ロード プロパティ パターンを使用せずに、クラスに対して煩雑な遅延ロード プロパティ パターンを使用できるということです。

定数オブジェクト = {
    データを取得する() {
        実際のデータ = someExpensiveComputation();
 
        Object.defineProperty(this, "データ", {
            値: 実際のデータ、
            書き込み可能: false、
            設定可能: false、
            列挙可能: false
        });
 
        実際のデータを返します。
    }
};
 
console.log(object.hasOwnProperty("data")); // 真
 
const データ = オブジェクト.データ;
console.log(object.hasOwnProperty("data")); // 真

結論は

JavaScript でオブジェクト プロパティを再定義する機能は、計算コストが高くなる可能性のある情報をキャッシュする独自の機会を提供します。アクセサー プロパティをデータ プロパティとして再定義して開始すると、プロパティが最初に読み取られるまで計算を延期し、結果をキャッシュして後で使用することが可能になります。このアプローチはクラスとオブジェクト リテラルの両方で機能し、ゲッターがプロトタイプに配置されるかどうかを心配する必要がないため、オブジェクト リテラルでは少し簡単になります。

パフォーマンスを向上させる最善の方法の 1 つは、同じ作業を繰り返し実行しないようにすることです。そのため、結果を後で使用するためにキャッシュできるときはいつでも、プログラムを高速化できます。遅延読み込みプロパティ パターンなどの手法を使用すると、任意のプロパティをキャッシュ レイヤーにしてパフォーマンスを向上させることができます。

上記は、JavaScript の遅延読み込み属性モードの詳細です。js の遅延読み込み属性の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • js で遅延読み込みを実装するいくつかの方法の詳細な説明
  • JS 同期、非同期、遅延読み込みメソッド
  • JS を使用してファースト スクリーン以外の画像の遅延読み込みを実装する例
  • 複数の画像の遅延読み込み効果を実現する js
  • js で遅延読み込みを実装するいくつかの方法

<<:  10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ

>>:  更新とデータ整合性処理のためのMySQLトランザクション選択の説明

推薦する

測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。...

nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する

IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....

mysql 5.7.18 winx64 無料インストール設定方法

1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...

ドラッグアンドドロップでVueユーザーインターフェースを生成する方法

目次序文1. 技術原理1.1 レイアウト1.2 コンポーネント1.3 ステータス1.4 イベント1....

VUEユニアプリ開発環境についての簡単な説明

目次1. HBuilderXビジュアルインターフェースを通じて2. vue-cliコマンドで実行する...

mysqlは複数の主キーを設定する操作を実装します

ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

MySQL マスタースレーブ同期メカニズムと同期遅延問題追跡プロセス

序文DBA として、仕事中に MySQL マスターとスレーブの同期遅延の問題に遭遇することがよくあり...

25 個の CSS フレームワーク、ツール、ソフトウェア、テンプレートを共有

スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...

WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分

シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...

HTML 順序なしリスト 箇条書き 画像を使用した CSS の記述

少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前...

Dockerコンテナ終了エラーコードの手順

実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...

Windowsタイムサーバーの設定方法の詳しい説明

最近、会社のサーバーの時間が不正確で、外部の時間ソースと同期できないことがわかりました。会社はドメイ...

Eclipse は Tomcat を構成しますが、Tomcat には無効なポート解決策があります

目次1. EclipseがTomcatを構成する2. Tomcat の無効なポートの解決方法方法1:...