代理模式
代理模式为对象提供另一个代理对象以控制对这个对象的访问。
使用代理的原因是我们不想对元对象进行直接操作，而是通过一个“中间人”来传达操作。生活中许多代理的例子，比如访问某个网站，不想直接访问，通过中间的一台服务器来转发请求，这台服务器就是代理服务器。又比如明星。普通人无法直接联系他们，而是通过经纪人进行联系。
使用ES6的proxy语法实现对代理模式的简单实现：
let star = {
name: 'zs',
age: 21,
height: 170,
bottomPrice: 100000,
announcements: [],
};
let proxy = new Proxy(star, {
get : function (target, key) {
if (key === 'height') {
return target.height + 10;
}else if (key === 'announcements') {
return new Proxy(target.announcements, {
set: function (target, key, value) {
if (key !== 'length' && target.length === 3) {
console.log('不好意思');
return true;
}
target[key] = value;
return true;
}
});
}
return target[key];
},
set: function (target, key, value) {
if (key === 'price') {
if (value > target.bottomPrice * 1.5) {
target.price = value;
console.log('成交');
}else if (value > target.bottomPrice) {
console.log('再商量');
}else{
console.log('下次一定');
}
}
}
});
proxy.announcements.push('1');
proxy.announcements.push('2');
proxy.announcements.push('3');
proxy.announcements.push('4');
proxy.price = 160000;
proxy.price = 120000;
proxy.price = 90000;
代理模式能将代理对象与被调用对象分离，降低了系统的耦合度。代理模式再客户端和目标对象之间起到一个中介作用，这样可以起到保护目标对象的作用。代理对象也可以对目标对象调用之前进行其他操作。
实例：dom事件代理。Vue源码。
注意区分适配器模式，装饰器模式，代理模式；
- 适配器模式提供不同的新街口，通常用作转换的兼容处理
- 代理模式提供一模一样的新街口，对行为进行拦截
- 装饰器模式直接访问原接口，直接对原接口进行功能上的增强
外观模式
外观模式是指为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易
外观模式再JS中的简单实现
<button id="myInput"></button>
<script>
function addEvent(dom, type, fn) {
if (dom.addEventListener) { // 支持DOM2级事件处理方法的浏览器
dom.addEventListener(type, fn ,false);
}else if (dom.attachEvent){ // 不支持DOM2级但支持attachEvent
dom.attachEvent('on' + type, fn);
}else{
dom['on + type'] = fn; // 都不支持的浏览器
}
};
const myInput = document.getElementById('myinput');
addEvent(myInput, 'click', function () {
console.log('绑定click事件');
})
外观模式核心在于对其他接口的封装，是一种开发中非常常见的设计模式，框架或者库中的工具函数遵循的模式就是外观模式
注意区分-工厂模式-外观模式：
- 工厂模式核心是对创建对象的逻辑进行封装。
- 外观模式核心是对不同的接口进行封装。
网上的资料深浅不一，本人也是处在学习的过程中的总结，如果发现错误，欢迎留言指出~
扫码加入前端群，分享技术难题~
