JavaScript 設計模式之代理模式

JavaScript 設計模式之代理模式

代理模式，代理（proxy）是一個對象，它可以用來控制對另一個對象的訪問。

現在頁面上有一個香港回歸最想聽的金典曲目列表：

<ul id="container">
    <li>我的中國心</li>
    <li>東方之珠</li>
    <li>香港別來無恙</li>
    <li>偏偏喜歡你</li>
    <li>相親相愛</li>
</ul>

需要給頁面添加一個效果：每當用戶點擊列表中的項目時，都會彈出一條消息：我想聽：${name}，大致思路是給每個li元素添加一個點擊事件。如下所示：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>代理模式</title>
    </head>

    <body>
        <ul id="container">
            <li>我的中國心</li>
            <li>東方之珠</li>
            <li>香港別來無恙</li>
            <li>偏偏喜歡你</li>
            <li>相親相愛</li>
        </ul>

        <script>
            const container = document.getElementById("container")

            Array.prototype.forEach.call(container.children, node => {
                node.addEventListener("click", function (e) {
                    e.preventDefault()
                    alert(`我想聽： ${e.target.innerText}`)
                })
            })
        </script>
    </body>

</html>

這種方法可以滿足要求，但這樣做的缺點是性能開銷，因為每個 li 標簽都綁定到一個事件。如果列表中有數千個元素，是否綁定了數千個事件？

事件綁定

每個 li 都有自己的事件處理機制，但不管是哪個 li，其實都是 ul 的成員，這樣可以將 li 的事件委托給父級節點 ul，讓 ul 成為這些 li 的事件代理。

事件冒泡

這樣，只需要為這些 li 元素綁定一個事件，即為父級元素綁定一個事件。

const container = document.getElementById('container')

container.addEventListener('click', function (e) {
    if (e.target.nodeName === 'LI') {
        e.preventDefault()
        alert(`我想聽： ${e.target.innerText}`)
    }
})

這就是代理模式的一種使用場合，代理模式是本體不直接出現，而是讓代理間接解決問題。

  • 在上面代理模式的代碼中，li 并沒有直接處理點擊事件，而是將其委托給父級元素 ul。
  • 現實生活中，明星并不是直接出來談生意，而是交給他們的經紀人，也就是明星的代理人。

代理模式的應用非常廣泛，再來看另一個適用場景。假設有一個計算函數，參數是字符串，計算比較耗時。同時，這是一個純函數，如果參數相同，則函數的返回值將相同。

function compute(str) {    
    // 假設這個函數執行時間很長
    console.info("===> 超級計算開始了……");
    return `輸入：${str}`;
}

現在需要給這個函數添加一個緩存函數：每次計算后，存儲參數和對應的結果。在接下來的計算中，會先從緩存中查詢計算結果。當然，可以直接修改這個函數的功能。但這并不好，因為緩存不是這個功能的固有特性。

說到緩存函數，在 《從源碼中學習Javascript技巧》聊到其實現，其實現就是使用代理模式。

更好的解決方案是使用代理模式。

const cached = (fn) => {
    const cache = Object.create(null);
    return (str) => {
        const hit = cache[str];
        return hit || (cache[str] = fn(str));
    };
};
const cacheCompute = cached(compute);
console.log(cacheCompute("DevPoint"));
console.log(cacheCompute("DevPoint"));
console.log(cacheCompute("juejin"));

這樣，就可以在不修改原函數邏輯的情況下為其擴展計算函數，這是代理模式的另一種使用場景，它允許向原始對象本身添加額外的功能，而無需更改它。