JavaScript設計模式之代理模式
摘要：
使用者無權訪問目標物件，中間加代理，通過代理做授權和控制
什麼Nginx代理、JSONP、科學上網…，你平時的工作中可能都用了代理模式，只是你不知道。
模式作用：
遠端代理(一個物件將不同空間的物件進行區域性代理)
虛擬代理(根據需要建立開銷很大的物件如渲染網頁暫時用...
使用者無權訪問目標物件，中間加代理，通過代理做授權和控制
什麼Nginx代理、JSONP、科學上網…，你平時的工作中可能都用了代理模式，只是你不知道。
模式作用：
- 遠端代理(一個物件將不同空間的物件進行區域性代理)
- 虛擬代理(根據需要建立開銷很大的物件如渲染網頁暫時用佔位圖代替真圖)
- 安全代理(控制真實物件的訪問許可權，經紀人一般都是暴露自己的電話，明星的電話一般情況都不會洩漏)
- 智慧指引(呼叫物件代理處理另外一些事情如垃圾回收機制)
UML類圖
程式碼示例
// 代理模式需要三方(買房的過程)
// 1.買家
function buyer() {
this.name = 'FinGet'
}
// 2.中介
function agency(){
}
// 賣房
agency.prototype.sellhouse = function (){
new seller(new buyer()).sell('100W')
}
// 3.賣家
function seller(buyer) {
this.buyerName = buyer.name
this.sell = function(money) {
console.log(`收到了${this.buyerName}的${money},房子賣出`)
}
}
ES6 Proxy
ofollow,noindex">阮一峰ES6,http://es6.ruanyifeng.com/#docs/proxy
Proxy 可以理解成，在目標物件之前架設一層“攔截”，外界對該物件的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。Proxy 這個詞的原意是代理，用在這裡表示由它來“代理”某些操作，可以譯為“代理器”。
// 明星
let star = {
name: '張XX',
age: 25,
phone: '13910733521'
}
// 經紀人
let agent = new Proxy(star, {
get: function (target, key) {
if (key === 'phone') {
// 返回經紀人自己的手機號
return '18611112222'
}
if (key === 'price') {
// 明星不報價，經紀人報價
return 120000
}
return target[key]
},
set: function (target, key, val) {
if (key === 'customPrice') {
if (val < 100000) {
// 最低 10w
throw new Error('價格太低')
} else {
target[key] = val
return true
}
}
}
})
// 主辦方
console.log(agent.name)
console.log(agent.age)
console.log(agent.phone)
console.log(agent.price)
// 想自己提供報價（砍價，或者高價爭搶）
agent.customPrice = 150000
// agent.customPrice = 90000// 報錯：價格太低
console.log('customPrice', agent.customPrice)
比較
介面卡模式與代理模式：
- 介面卡模式：提供一個不同的介面（如不同的插頭）
- 代理模式： 提供一模一樣的介面
裝飾器模式與代理模式： - 裝飾器模式： 擴充套件功能，原有功能不變且可以直接使用
- 代理模式： 顯示原有功能，但是經過限制或者是閹割之後的
最後
建立了一個前端學習交流群，感興趣的朋友，一起來嗨呀！
