JavaScript?設(shè)計模式中的代理模式詳解

更新時間：2022年07月29日 09:17:01 作者：??天行無忌?

這篇文章主要介紹了JavaScript?設(shè)計模式中的代理模式詳解,代理模式，代理是一個對象，它可以用來控制對另一個對象的訪問,更多相關(guān)內(nèi)容需要的朋友可以參考一下

前言：

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

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

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

需要給頁面添加一個效果：每當(dāng)用戶點擊列表中的項目時，都會彈出一條消息：我想聽：${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 標(biāo)簽都綁定到一個事件。如果列表中有數(shù)千個元素，是否綁定了數(shù)千個事件？

每個 li都有自己的事件處理機制，但不管是哪個li，其實都是ul的成員，這樣可以將li的事件委托給父級節(jié)點 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}`)
    }
})

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

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

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

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

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

說到緩存函數(shù)，在《Javascript函數(shù)技巧學(xué)習(xí)》聊到其實現(xiàn)，其實現(xiàn)就是使用代理模式。

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

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

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

到此這篇關(guān)于JavaScript 設(shè)計模式中的代理模式詳解的文章就介紹到這了,更多相關(guān)JS 代理模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: