Mode proxy du modèle de conception JavaScript - chargement paresseux de fichiers volumineux

Avant de lire cet article, il est recommandé de regarder le mode proxy du modèle de conception JavaScript précédent - réaliser le chargement de l'image de chargement

1. Demande

Supposons qu'il y ait un très gros fichier js, nous déclenchons le chargement uniquement lorsque nous en avons besoin. Par exemple, il existe une console utilisée pour imprimer les journaux sur le terminal mobile. Après avoir appuyé sur F2, le fichier est chargé et les journaux associés sont imprimés. L'effet est le suivant:

2. Réalisez

Nous créons d'abord le fichier index.html, le code html est le suivant:

<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>

Insérez ensuite le script de script dans le fichier ci-dessus, le code est le suivant:

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);

Étant donné que l'objet dans le fichier js que nous voulons charger est miniConsole, un objet proxy avec le même nom est créé:

Ajoutez-y des événements clés de surveillance, lorsque l'utilisateur appuie sur F2, le vrai fichier miniConsole.js sera chargé;
Implémentez la méthode log correspondant à l'ontologie: lorsque le fichier n'est pas chargé, il est d'abord stocké dans le cache d'objets du cache;
Une fois le vrai miniConsole.js chargé, appelez la méthode mise en cache dans le cache pour réaliser la fonction d'impression réelle.

Enfin, le code principal de miniConsole.js est à peu près le suivant:

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. Résumé des idées

Le miniConsole.js ci-dessus doit parfois gérer divers types d'impression de journaux, ce qui entraîne des fichiers plus volumineux. Mais notre fonction n'est pas toujours utilisée par les utilisateurs, nous implémentons donc un chargement différé pour réduire la surcharge du réseau.

Lorsque nous rencontrons des fichiers volumineux et des fonctions inutiles, nous pouvons utiliser des agents virtuels pour implémenter le chargement différé. Les étapes sont les suivantes:

Créez un objet proxy avec le même nom que l'interface de fichier d'origine;
Chargez le fichier d'origine lorsque vous en avez besoin dans une situation spécifique (comme la surveillance des pressions sur les touches);
Mettez en cache tous les appels dans l'interface d'objet proxy, surveillez le chargement du fichier et exécutez-le lorsque le fichier est chargé.

Série de modèles d'agence:

Réaliser le chargement de l'image de chargement

Optimisation des performances pour les demandes fréquentes

Remarque: Reportez-vous au livre "JavaScript Design Patterns and Development Practice", si vous le souhaitez, vous pouvez suivre le blogueur et continuer à mettre à jour les notes d'étude de la série de modèles de conception ~

Ne soyez pas avare de goûts et de commentaires ~