JavaScript设计模式（二十七）：未来预言家-委托模式

委托模式（Entrust）

多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理请求。

点击事件绑定

<ul id="btn-box">
    <li>
        <button class="btn">按钮1</button>
    </li>
    <li>
        <button class="btn">按钮2</button>
    </li>
    <li>
        <button class="btn">按钮3</button>
    </li>
    <li>
        <button class="btn">按钮4</button>
    </li>
    <li>
        <button class="btn">按钮5</button>
    </li>
    <li>
        <button class="btn">按钮6</button>
    </li>
</ul>

循环绑定

let btns = document.querySelectorAll('.btn');
let len = btns.length;

for (let i = 0; i < len; i++) {
   
    btns[i].onclick = function (e) {
   
        this.style.backgroundColor = 'red';
    };
}

委托给父元素,进行事件绑定

let btnBox = document.querySelector('#btn-box');

btnBox.onclick = function (e) {
   
    if (e.target.nodeName === 'BUTTON') {
   
        e.target.style.backgroundColor = 'red';
    }
};

数据分发

原来我们处理数据的方法

// 比如原来我们处理数据是这样的,我们需要请求5此才能完善所有模块
$.get("./deal.php?q=banner", function (res) {
   
    // 处理banner模块逻辑
})
$.get("./deal.php?q=aside", function (res) {
   
    // 处理aside模块逻辑
})
$.get("./deal.php?q=article", function (res) {
   
    // 处理article模块数据
})
$.get("./deal.php?q=member", function (res) {
   
    // 处理member模块数据
})
$.get("./deal.php?q=message", function (res) {
   
    // 处理message模块数据
})

使用了委托模式处理数据的方法

// 使用委托后处理数据是这样的,我们只需要请求一次,就能用不同的方法完善所有模块
var Deal = {
   
    banner: function () {
   
        // 处理banner模块逻辑
    },
    aside: function (res) {
   
        // 处理aside模块逻辑
    },
    article: function (res) {
   
        // 处理article模块数据
    },
    member: function (res) {
   
        // 处理member模块数据
    },
    message: function (res) {
   
        // 处理message模块数据
    }
}
$.get('./deal.php?', function (res) {
   
    //数据拆包分发
    for (var k in res) {
   
        Deal[k] && Deal[k](res[k]);
    }
});

特点

委托模式是通过委托者将请求委托给被委托者去处理实现的。因此委托模式解决了请求与委托者之间的耦合。通过被委托者对接收到的请求的处理后，分发给相应的委托者去处理。