大きなファイルのJavaScriptデザインパターン遅延読み込みのプロキシモード

この記事を読む前に、以前のJavaScriptデザインパターンのプロキシモードを確認することをお勧めします。

1.需要

非常に大きなjsファイルがあるとします。必要なときにだけ、それをロードするようにトリガーします。たとえば、モバイル端末でログを印刷するために使用されるコンソールがあり、F2を押すと、ファイルがロードされ、関連するログが印刷されます。効果は次のとおりです。

2.実現する

最初にindex.htmlファイルを作成します。htmlコードは次のとおりです。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟代理惰性加载文件</title>
    <style>
        #consoleContent{
            border:1px solid #ccc;
            width: 200px;
            height: 300px;
            color:#333;
            overflow: auto;
            display: none;
        }
        #consoleContent p{
            margin: 0;
            padding: 5px 10px;
            vertical-align: middle;
            border-bottom:1px solid #ccc;
            overflow-wrap: break-word;
        }
    </style>
</head>

<body>
    <section id="consoleContent"></section>
</body>

</html>

次に、上記のファイルにスクリプトスクリプトを挿入します。コードは次のとおりです。

let miniConsole = (function () {
        let cache = [];
        // 当用户按下F2时，开始加载真正的miniConsole.js 
        const handler = function (ev) {
            if (ev.keyCode === 113) {
                const script = document.createElement('script');
                script.onload = function () {
                    for (let i = 0, fn; fn = cache[i++];) {
                        fn();
                    }
                    cache = null;
                };
                script.type = 'text/javascript';
                script.src = "miniConsole.js";
                document.getElementsByTagName('head')[0].appendChild(script);
                document.removeEventListener('keydown', handler);
            }
        };
        document.addEventListener('keydown', handler, false);
        return {
            log: function () {
                const args = arguments;
                cache.push(function () {
                    // 不直接用miniConsole.log(args)是为了解决传多个参数的问题
                    return miniConsole.log.apply(miniConsole,args);
                })
            }
        }
    })();
    miniConsole.log(11,22);
    miniConsole.log(22);
    miniConsole.log(33);

ロードするjsファイルのオブジェクトはminiConsoleであるため、同じ名前のプロキシオブジェクトが作成されます。

監視キーイベントを追加します。ユーザーがF2を押すと、実際のminiConsole.jsファイルが読み込まれます。
オントロジーに対応するlogメソッドを実装しますファイルがロードされていない場合、最初にキャッシュオブジェクトキャッシュに格納されます。
実際のminiConsole.jsが読み込まれた後、キャッシュ内のcachedメソッドを呼び出して、実際の印刷機能を実現します。

最後に、miniConsole.jsのメインコードはおおよそ次のとおりです。

miniConsole = {
    log: function () {
        const p = document.createElement('p');
        p.innerHTML = Array.prototype.join.call(arguments);
        const content = document.getElementById('consoleContent');
        content.appendChild(p);
        content.style.display = 'block';
    }
};

3.アイデアの要約

上記のminiConsole.jsは、さまざまなタイプのログ印刷を処理する必要がある場合があり、その結果、ファイルが大きくなります。ただし、この関数は常にユーザーが使用するわけではないため、遅延読み込みを実装してネットワークのオーバーヘッドを削減しています。

大きなファイルや不要な関数が発生した場合は、仮想エージェントを使用して遅延読み込みを実装できます。手順は次のとおりです。

元のファイルインターフェイスと同じ名前のプロキシオブジェクトを作成します。
特定の状況（キーの押下の監視など）で必要なときに元のファイルをロードします。
すべての呼び出しをプロキシオブジェクトインターフェイスにキャッシュし、ファイルの読み込みを監視し、ファイルが読み込まれたときに実行します。

代理店モデルシリーズ：

画像読み込みの実現

頻繁なリクエストに対するパフォーマンスの最適化

注：「JavaScriptのデザインパターンと開発の実践」を参照してください。必要に応じて、ブロガーをフォローし、デザインパターンシリーズの研究ノートを更新し続けることができます〜

高評価やコメントでけちけちしないでください〜