JavaScript設計模式之代理模式-惰性加載大檔案-有解無憂

在看此文之前，建議先看前篇JavaScript設計模式之代理模式-實作加載圖片loading

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>

接著在以上檔案中插入script腳本，代碼如下：

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方法，檔案未加載時，先存放于快取物件cache中；
在真正的miniConsole.js加載完成后，呼叫cache中快取的方法，實作真正的列印功能，

最后，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有時候需要處理各種型別的日志列印，導致檔案會更大，但我們這個功能不一定用戶都會用，所以實作惰性加載，減少網路開銷，

當我們遇到大檔案且非必要的功能，我們可以用虛擬代理實作惰性加載，步驟如下：

創建與原檔案介面相同的同名代理物件;
在特定需要的情況（如監聽按鍵）時加載原檔案;
在代理物件介面中快取所有的呼叫，并監聽檔案加載，等檔案加載完成時再進行執行，

代理模式系列：

實作加載圖片loading

頻繁發送請求性能優化

注：參考書籍《JavaScript設計模式與開發實踐》，喜歡可以關注博主哦，不斷更新設計模式系列學習筆記~

不要吝嗇點贊評論哦~

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/125842.html

標籤：其他

上一篇：【前端面試】到底我的簡歷該怎么寫？才有機會被邀請面試？【看此文章即可！！！】

下一篇：如何在webstorm中配置less