委托模式（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]);
}
});
特点
委托模式是通过委托者将请求委托给被委托者去处理实现的。因此委托模式解决了请求与委托者之间的耦合。通过被委托者对接收到的请求的处理后，分发给相应的委托者去处理。
