建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端必須懂的設(shè)計模式-代理模式
代理模式
代理模式 （Proxy Pattern）又稱委托模式，它為目標對象創(chuàng)造了一個代理對象，以控制對目標對象的訪問，也可以理解為對外暴露的接口并不是原對象。通俗地講，生活中也有比較常見的代理模式：中介、寄賣、經(jīng)紀人等等。而這種模式存在的意義在于當訪問者與被訪問者不方便直接訪問/接觸的情況下，提供一個替身來處理事務(wù)流程，實際訪問的是替身，替身將事務(wù)做了一些處理/過濾之后，再轉(zhuǎn)交給本體對象以減輕本體對象的負擔。
創(chuàng)新互聯(lián)主營薛城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),薛城h5小程序定制開發(fā)搭建,薛城網(wǎng)站營銷推廣歡迎薛城等地區(qū)企業(yè)咨詢
常見代理模式
- 保護代理
- 虛擬代理
- 緩存代理
- 。。。
實現(xiàn)
保護代理：
/**
* 保護代理簡單實現(xiàn)
* client向服務(wù)端發(fā)送一個請求
* proxy代理請求轉(zhuǎn)發(fā)給服務(wù)端
* 服務(wù)端處理請求
*/
// 改進前
const Request = function () {};
const client = {
requestTo: (server) => {
const req = new Request();
server.receiveRequest(req);
},
};
const server = {
handleRequest: (request) => {
console.log('receive request: ', request);
},
};
const proxy = {
receiveRequest: (request) => {
console.log('proxy request: ', request);
server.handleRequest(request);
},
};
client.requestTo(proxy);
// 改進后
const proxy = {
receiveRequest: (request) => {
// 校驗身份
const pass = validatePassport(request);
if (pass) {
// 監(jiān)聽服務(wù)端 ready 后代理請求
server.listenReady(() {
console.log('proxy request: ', request);
server.handleRequest(request);
});
}
},
};
虛擬代理：虛擬代理是把一些開銷很大的對象或者方法，延遲到真正需要它的時候才去創(chuàng)建執(zhí)行
// 圖片懶加載
const img = (() => {
const imgNode = document.createElement('img');
imgNode.style.width = '200px'
document.body.appendChild(imgNode);
return {
setSrc: (src) => {
imgNode.src = src;
},
setLoading: () => {
imgNode.src = './img/loading.gif'
}
};
})();
const proxyImg = ((source) => {
// 替身圖片對象
const tempImg = new Image();
// 監(jiān)聽資源加載完成，將資源替換給實體圖片對象
tempImg.onload = function () {
source.setSrc(this.src);
};
return {
// 代理開始將實體對象設(shè)置為loading狀態(tài)，使用替身對象開始加載圖片資源
setSrc:(src)=>{
source.setLoading()
tempImg.src = src;
}
}
})(img);
proxyImg.setSrc('https://static-prod.retech.us/onder-cender/DoorDash.svg')
// ------------------------------------------------------------
// 合并http請求
//上傳請求
let upload = function(ids){
$.ajax({
data: {
id:ids
}
})
}
//代理合并請求
let proxy = (function(){
let cache = [],
timer = null;
return function(id){
cache[cache.length] = id;
if(timer) return false;
timer = setTimeout(function(){
upload(cache.join(','));
clearTimeout(timer);
timer = null;
cache = [];
},2000);
}
})();
// 綁定點擊事件
let checkbox = document.getElementsByTagName( "input" );
for(var i= 0, c; c = checkbox[i++];){
c.onclick = function(){
if(this.checked === true){
proxy(this.id);
}
}
}
緩存代理：緩存代理可以作為一些開銷大的運算結(jié)果提供暫時的存儲，下次運算時，如果傳遞進來的參數(shù)跟之前一致，則可以直接返回前面存儲的運算結(jié)果
/**
* 對于一些比較消耗性能的操作
* 可以將結(jié)果緩存起來
* 在獲取結(jié)果時優(yōu)先從緩存中取，緩存中沒有再計算
*/
let fibonacci = function(n){
if(n === 1 || n === 0 ) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
//緩存代理
let proxy = (function(fn){
let cache = {};
return function(){
let args = Array.prototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args] = fn.apply(this,arguments);
}
})(fibonacci);
proxy(3)
實際案例
Vue中的代理模式：
// 將數(shù)據(jù)、方法、計算屬性等代理到組件實例上
let vm = new Vue({
data: {
msg: 'hello',
vue: 'vue'
},
computed:{
helloVue(){
return this.msg + ' ' + this.vue
}
},
mounted(){
console.log(this.helloVue)
}
})
源碼分析：
export function proxy (target: Object, sourceKey: string, key: string) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
}
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
function initData (vm: Component) {
let data = vm.$options.data
// 初始化 _data，組件中 data 是函數(shù)，調(diào)用函數(shù)返回結(jié)果
// 否則直接返回 data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
// proxy data on instance
// 獲取 data 中的所有屬性
const keys = Object.keys(data)
// 獲取 props / methods
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
// 判斷 data 上的成員是否和 props/methods 重名
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observe data
// 響應(yīng)式處理
observe(data, true /* asRootData */)
}
總結(jié)
在面向?qū)ο蟮木幊讨?，代理模式的合理使用能夠很好地體現(xiàn)下面兩條設(shè)計原則:
- 單一職責原則: 面向?qū)ο笤O(shè)計中鼓勵將不同的職責分布到細粒度的對象中，Proxy 在原對象的基礎(chǔ)上進行了功能的衍生而又不影響原對象，符合松耦合高內(nèi)聚的設(shè)計理念。
- 開放-封閉原則：代碼可以隨時從程序中去掉，而不用對其他部分的代碼進行修改，在實際場景中，隨著版本的迭代可能會有多種原因不再需要代理，那么就可以容易的將代理對象換成原對象的調(diào)用
對于代理模式 Proxy 作用主要體現(xiàn)在三個方面:
- 攔截和監(jiān)視外部對對象的訪問
- 降低對象的復(fù)雜度
- 在復(fù)雜操作前對操作進行校驗或?qū)λ栀Y源進行管理
?文章出自：??前端餐廳ReTech??，如有轉(zhuǎn)載本文請聯(lián)系前端餐廳ReTech今日頭條號。
github：https://github.com/zuopf769
網(wǎng)頁名稱：前端必須懂的設(shè)計模式-代理模式
當前鏈接：http://m.5511xx.com/article/dhcdjje.html
