代理模式
概念
概念
代理模式是一种结构性设计模式,它允许通过代理对象控制对另一个对象的访问
案例proxy
下面列举一个代理模式最常见的 proxy
js
const stuInfo = {
name: 'tian',
age: 18,
sno: 2022001,
grade: 'A+'
};
/**
* @params obj 对象
* @params prop 属性
*/
const stuProxy = new Proxy(stuInfo, {
get: (obj, prop) => {
console.log(`the value of ${prop} is ${obj[prop]}`)
},
set: (obj, prop, value) => {
console.log(`changed ${prop} from ${obj[prop]} to ${value}`)
}
})
stuProxy.age
stuProxy.grade = 'A-'
案例Reflect
在我们的Js中也可以通过reflect对象来操作
js
const stuInfo = {
name: 'tian',
age: 18,
sno: 2022001,
grade: 'A+'
};
// reflect
const stuReflectt = new Proxy(stuInfo,{
get:(obj,prop)=>{
console.log(`the value of ${prop} is ${Reflect.get(obj,prop)}` )
},
set:(obj,prop, value)=>{
console.log(`changed ${prop} from ${obj[prop]} to ${value}`)
}
});
stuReflectt.name='tinaer'
应用场景
- 远程代理
- 虚拟代理
- 应用场景demo
js
// 代理模式
// scene
// 网络请求封装 暴露get post
// src/utils/request.js
import Http from './http';
export function get(options) {
return Http.get(options);
}
export function post(options) {
return Http.post(options);
}
// 获取图片地址
import { post, get } from '@src/utils/request.js';
import { config } from 'cypress/types/bluebird';
async function generateShareImage() {
const body = this.generateConfig();
try {
const res = await post({
url: 'getImage',
body,
setting: {
// domain: config.
},
});
if (res?.picUrl) {
return res;
}
return null;
} catch (err) {
console.log(err);
return null;
}
}
// graytype 后面请求当中 graytype 放入headers
let graytype = -1;
async function generateShareImage() {
const body = this.generateConfig();
try {
const options = {
url: '/getData',
body,
setting: {
// domain: config.
},
headers: {},
};
if (graytype !== -1) {
options.headers.graytype = graytype;
}
const res = await post(options);
if (res.graytype) {
graytype = res.graytype;
}
if (res?.picUrl) {
return res;
}
return null;
} catch (err) {
console.log(err);
return null;
}
}
// 优化
// 代理模式
// 对原有对象进行扩展 从而实现对原有对象的控制或者额外的操作
// src/utils/requestNew.js
import { post as Post, get as Get } from './request';
const getNewParams = (params) => {
let newParams;
if (graytype !== -1) {
newParams = {
...params,
header: {
...params.headers,
graytype,
},
};
}
return newParams;
};
// 代理模式
export const get = async (params) => {
const response = await Get(getNewParams(params));
const res = response.data;
if (res.graytype) {
graytype = res.graytype;
}
return response;
};
export const post = async (params) => {
const response = await Post(getNewParams(params));
const res = response.data;
if (res.graytype) {
graytype = res.graytype;
}
return response;
};
export const requestAjax = async (params, method = 'Get') => {
const response = await method(getNewParams(params));
const res = response.data;
if (res.graytype) {
graytype = res.graytype;
}
return response;
};
特点
对原有对象进行扩展,从而实现对原有对象的控制或额外的操作
对于不方便修改原有对象的,我们可以采用代理模式对其进行一层的包装