快捷導(dǎo)航

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

更新時(shí)間：2022年07月29日 09:17:01 作者：??天行無(wú)忌?

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

前言：

代理模式，代理（proxy）是一個(gè)對(duì)象，它可以用來(lái)控制對(duì)另一個(gè)對(duì)象的訪問(wèn)。

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

<ul id="container">
    <li>我的中國(guó)心</li>
    <li>東方之珠</li>
    <li>香港別來(lái)無(wú)恙</li>
    <li>偏偏喜歡你</li>
    <li>相親相愛(ài)</li>
</ul>

需要給頁(yè)面添加一個(gè)效果：每當(dāng)用戶點(diǎn)擊列表中的項(xiàng)目時(shí)，都會(huì)彈出一條消息：我想聽(tīng)：${name}，大致思路是給每個(gè)li元素添加一個(gè)點(diǎn)擊事件。如下所示：

<!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>我的中國(guó)心</li>
            <li>東方之珠</li>
            <li>香港別來(lái)無(wú)恙</li>
            <li>偏偏喜歡你</li>
            <li>相親相愛(ài)</li>
        </ul>
        <script>
            const container = document.getElementById("container")

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

這種方法可以滿足要求，但這樣做的缺點(diǎn)是性能開(kāi)銷，因?yàn)槊總€(gè) li 標(biāo)簽都綁定到一個(gè)事件。如果列表中有數(shù)千個(gè)元素，是否綁定了數(shù)千個(gè)事件？

每個(gè) li都有自己的事件處理機(jī)制，但不管是哪個(gè)li，其實(shí)都是ul的成員，這樣可以將li的事件委托給父級(jí)節(jié)點(diǎn) ul，讓ul成為這些li的事件代理。

這樣，只需要為這些li元素綁定一個(gè)事件，即為父級(jí)元素綁定一個(gè)事件。

const container = document.getElementById('container')

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

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

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

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

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

現(xiàn)在需要給這個(gè)函數(shù)添加一個(gè)緩存函數(shù)：每次計(jì)算后，存儲(chǔ)參數(shù)和對(duì)應(yīng)的結(jié)果。在接下來(lái)的計(jì)算中，會(huì)先從緩存中查詢計(jì)算結(jié)果。當(dāng)然，可以直接修改這個(gè)函數(shù)的功能。但這并不好，因?yàn)榫彺娌皇沁@個(gè)功能的固有特性。

說(shuō)到緩存函數(shù)，在《Javascript函數(shù)技巧學(xué)習(xí)》聊到其實(shí)現(xiàn)，其實(shí)現(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ù)邏輯的情況下為其擴(kuò)展計(jì)算函數(shù)，這是代理模式的另一種使用場(chǎng)景，它允許向原始對(duì)象本身添加額外的功能，而無(wú)需更改它。

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

您可能感興趣的文章: