您的位置：首页 > Web前端 > JavaScript

Javascript设计模式-06-代理模式

2017-07-12 09:50 225 查看

Javascript设计模式 - 06 - 代理模式

简介

代理模式就是为其他对象提供一种代理（代用品或者占位符），以控制对这个对象的访问，代理对象角色内部含有对真实对象的引用，从而可以操作真实对象，同时代理对象提供与真实对象相同的接口，以便在任何时候都能代替真实的对象

代理模式的关键是，当客户不方便直接访问一个对象或者不满足需求时，提供一个替身对象来控制这个对象的访问，客户实际上访问的是替身对象，替身对象对请求做一些处理之后，把请求转发给本体对象

分类（保护代理、虚拟代理、缓存代理）

保护代理：就是起到保护作用，一般用来过滤掉一些不必要的请求，将真正需要的递给本体，一般用来控制不通权限的对象对目标对象的访问

// 创建用户类
function User(name, role) {
this.name = name;
this.role = role;
}

User.prototype = {
getName: function () {
return this.name;
},
getRole: function () {
return this.role;
},
accessHomePage: function () {
console.log('in home page');
},
accessContractPage: function () {
console.log('in contract page');
},
accessLogPage: function () {
console.log('in log page');
}
};

// 创建代理访问类
function Proxy(user) {
this.user = user;
}
Proxy.prototype = {
getUser: function () {
return this.user;
},
accessHomePage: function () {
return this.user.accessHomePage();
},
accessContractPage: function () {
if (this.user.getRole() === 'developer') {
console.log('Have no legal power');
return;
}
return this.user.accessContractPage();
},
accessLogPage: function () {
if (this.user.getRole() === 'sales') {
console.log('Have no legal power');
return;
}
return this.user.accessLogPage();
}
}

// 创建用户
var sales = new User('xiaoming', 'sales');
var developer = new User('xiaolan', 'developer');

// 访问
var proxySales = new Proxy(sales);
var proxyDeveloper = new Proxy(developer);

proxySales.accessContractPage(); // in contract page
proxyDeveloper.accessContractPage(); // Have no legal power

虚拟代理：可以把开销很大的对象，延迟到真正需要他的时候创建，下边是借用这里的例子

// 创建图片DOM
var myImage = (function() {
// 先创建一个空的节点
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);

return {
setSrc: function(src) {
// 控制此节点的 图片地址
imgNode.src = src;
}
};
})();

// 代理
var proxyImage = (function() {
// 创建一个临时的 图片对象
var img = new Image();
// 使用图片对象加载目标图片（比较大的）加载完后图片会被浏览器缓存到本地，再次使用就不需要请求了
img.onload = function() {
// 图片缓存后，再次设置真实节点的图片地址
myImage.setSrc(this.src);
};

return {
setSrc: function(src) {
// 先用一个比较小的图片占位
myImage.setSrc('../imgs/loading.gif');     // loading
// 开始缓存比较大的图片，缓存完成后会自动执行 onload 函数
img.src = src;
}
};
})();

proxyImage.setSrc('../imgs/xxx.jpg');

缓存代理：为一些开销大的运算结果，或者请求服务器的数据，提供暂时的存储，如果传入的参数一致，则返回存储的数据

function fb(num) {
if (num < 1) {
return 1;
}
return num * fb(--num);
}
// 缓存代理
var proxy = (function () {
var cache = {};
return function (num) {
if (cache[num]) {
console.log(`number ${num} has cached ${cache[num]}`);
return cache[num];
}
cache[num] = fb(num);
console.log(`new cache ${cache[num]}`);

return cache[num];
}
}())

proxy(10); // new cache 3628800
proxy(15); // new cache 1307674368000
proxy(10); // number 10 has cached 3628800

文章列表

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航