介绍
- 使用者无权访问目标对象
- 中间加代理，通过代理做授权和控制
- 科学上网、明星经纪人
UML类图
代理模式.png
示例
class LoadImg {
constructor(fileName) {
this.fileName = fileName
this.loadFromDisk()
}
loadFromDisk() {
console.log(`从${this.fileName}加载中...`)
}
// 假设无法直接访问display
display() {
console.log('展示')
}
}
class ProxyImg {
constructor(fileName) {
this.loadImg = new LoadImg(fileName)
}
display() {
this.loadImg.display()
}
}
const proxyImg = new ProxyImg('123.png')
proxyImg.display()
bind()也属于代理，把this代理到函数中（Jquery中$.proxy(fn, this)也是一样）
<div>点点点点</div>
<script>
document.querySelector('div').addEventListener('click', function() {
setTimeout(function() {
this.style.setProperty('background-color', 'red')
}.bind(this), 2000)
})
es6中的Proxy
- 动态生成element
const DOM = new Proxy({}, {
get(target, property) {
return function(attr = {}, ...children) {
const element = document.createElement(property)
for (let i in attr) {
element.setAttribute(i, attr[i])
}
for (let i of children) {
if (typeof i === 'string') {
i = document.createTextNode(i)
}
element.appendChild(i)
}
return element
}
}
})
const body = document.querySelector('body')
const newElement = DOM.div({ class: 'box1' }, '我是box1', '哈哈哈哈', DOM.a({ href: 'www.baidu.com' }, '百度'))
body.appendChild(newElement)
-
apply()has()deleteProperty()等
es6中的Reflect
- ES6 为了操作对象而提供的新 API
- 将
Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上 - 修改某些
Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false - 让
Object操作都变成函数行为 -
Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法
代理模式vs适配器模式
- 适配器模式：提供不一样的接口
- 代理模式：提供一致的接口
代理模式vs装饰器模式
- 装饰器模式：扩展功能，原有的功能不变且可直接使用
- 代理模式：显示原有功能，但是经过限制或者阉割之后的
