JavaScript设计模式学习之代理模式
概述
代理模式属于设计模式中结构型的设计模式；
定义：
顾名思义就是为一个对象提供一个代用品或占位符，以便控制对它的访问！
白话解释：
很多明星都是有经纪人的，如果要联系明显进行商演或者开演唱会之类的商业活动通过是需要先跟经纪人取得联系的，跟经纪人谈好了合作事宜之后经纪人再转达给某明星，然后某明星才会去参加活动；同样租房也是一个同样的道理，我们不管是租房还是买房，第一反应肯定是找链家这类的平台，因为我们只需要跟链家进行沟通，而链家去跟房东沟通，省去了我们直接和房东沟通的步骤；因为链家就是一个代理模式，它代理了这个房东的房源；
实现方法
举个例子：
你作为一个追星狂魔，是某明星的忠诚粉丝；刚好某明星近期要过生日了，你准备送上礼物代表你的心意，正常的流程：
var Fans = {
flower(){
star.reception("花");
}
}
var star = {
reception:function(gift){
console.log("收到粉丝的:"+gift);
}
}
Fans.flower(); //收到粉丝的:花
你选择了买花寄给她，希望她能感受到你的心意；但是往往理想很丰满，现实很骨感！别忘了还有经纪人，因为签收你的礼物的往往不是明星本人而是经纪人：
var Fans = {
flower(){
Agent.reception("花");
}
}
var Agent = {
reception:function(gift){
console.log("粉丝送的:"+gift); //粉丝送的：花
star.reception("花");
}
}
var star = {
reception:function(gift){
console.log("收到粉丝的:"+gift);
}
}
Fans.flower(); //收到粉丝的：花
这里的经纪人就是一个简单的代理了，粉丝需要先把礼物给经纪人，经纪人再转给明星本人；
保护代理
明星满心欢喜的看到粉丝寄过来的包裹的时候，拆开一看，原来是花！明星很不屑，所以告诉经纪人，以后凡是给我寄花的，通通不要给我了，你自己看着处理:
var Fans = {
flower(){
Agent.reception("花");
}
}
var Agent = {
reception:function(gift){
console.log("粉丝送的:"+gift); //粉丝送的:花
if(gift != "花"){
star.reception("花");
}
}
}
var star = {
reception:function(gift){
console.log("收到粉丝的:"+gift);
}
}
Fans.flower();
上面的程序中明星根本就没有收到粉丝寄过来的花，因为在经纪人那里就已经拦截处理了；通过经纪人来过滤掉一部分礼物，这种模式叫做保护代理；
虚拟代理
粉丝送花明星收不到，那粉丝就转换一下思路，送点钱自己去买想要的东西吧！于是找到经纪人，给了经纪人一百万现金，让经纪人转达给明星本人；
function Money(){
this.total = "一百万现金"
return this.total;
}
var Fans = {
flower(){
Agent.reception();
}
}
var Agent = {
reception:function(){
// console.log("粉丝送的:"+gift);
let money = new Money();
star.reception(money.total);
}
}
var star = {
reception:function(gift){
console.log("收到粉丝的:"+gift); //收到粉丝的：一百万现金
}
}
Fans.flower();
明星收到了一百万就很开心；这一百万因为不是花，没有被经纪人拦截过滤；所以明星本人就直接收到了，这种模式我们称为虚拟代理模式；
虚拟代理实现图片懒加载
没用代理的时候我们的代码是这样的：
// 创建一个本体对象
var myImage = (function(){
// 创建标签
var imgNode = document.createElement( 'img' );
// 添加到页面
document.body.appendChild( imgNode );
return {
// 设置图片的src
setSrc: function( src ){
// 更改src
imgNode.src = src;
}
}
})();
myImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
虚拟代理
// 创建一个本体对象
var myImage = (function(){
// 创建标签
var imgNode = document.createElement( 'img' );
// 添加到页面
document.body.appendChild( imgNode );
return {
// 设置图片的src
setSrc: function( src ){
// 更改src
imgNode.src = src;
}
}
})();
// 创建代理对象
var proxyImage = (function(){
// 创建一个新的img标签
var img = new Image;
// img 加载完成事件
img.onload = function(){
// 调用 myImage 替换src方法
myImage.setSrc( this.src );
}
return {
// 代理设置地址
setSrc: function( src ){
// 预加载 loading
myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
// 赋值正常图片地址
img.src = src;
}
}
})();
proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
上面这段代码运用代理模式来实现图片预加载，可以看到通过代理模式巧妙地将创建图片与预加载逻辑分离，并且在未来如果不需要预加载，只要改成请求本体代替请求代理对象就行。
以上就是JavaScript设计模式学习之代理模式的详细内容，更多关于JavaScript设计模式的资料请关注脚本之家其它相关文章！
相关文章
本文详细讲解了JS截取字符串的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
这篇文章主要为大家详细介绍了原生js实现随机点名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
Driver.js是一个强大的、轻量级、使用原生JavaScript引擎开发的库,用于在页面聚焦用户的关注点,下面这篇文章主要介绍了用户引导插件driverjs的基本使用以及弹窗样式修改方法,需要的朋友可以参考下2024-04-04
这篇文章主要为大家整理了关于Bootstrap导航的慕课笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了Javascript call及apply应用场景及实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
下面小编就为大家带来一篇正则表达式,替换所有HTML标签的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
一文带你快速理解JavaScript中call()函数的使用
这篇文章主要为大家详细介绍了JavaScript中call()函数的使用的相关知识，文中的示例代码讲解详细，具有一定的学习价值，需要的可以参考一下2023-03-03
javascript 获取url参数和script标签中获取url参数函数代码
不要在方法中调用方法，否则可能始终获取的是最后一个js的文件的参数，要在方法中使用，请先用变量保存，在方法中直接获取2010-01-01
JavaScript中数组的方法种类众多，在ES3-ES7不同版本时期都有新方法；并且数组的方法还有原型方法和从object继承的方法，本文介绍了JavaScript数组及非数组对象的深浅克隆，希望读者能从中有所收获2021-10-10
这篇文章主要介绍了JS+DIV+CSS实现仿表单下拉列表效果,涉及javascript鼠标事件及页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论