js设计模式-代理模式
1.什么是设计模式?
设计模式:在软件设计过程中常用的代码规范,针对特定的场景
2.应用场景:
麦当劳点餐 观察者模式 规定的代码格式
花店送花 :代理模式
真实对象(男同学)-----代理对象(花店人员)----用户(女同学)
//声明男同学(真实对象)
var boy = function(girl){
//女同学
this.girl = girl;
//送花 行为
this.sendCift = function(gift){
console.log("hi"+this.girl.name+",送你一个礼物"+gift);//hi小芳,送你一个礼物999朵玫瑰
}
} //代理对象 花店员工(代理对象)
var ProxyObj = function(girl){
this.girl = girl;//需要知道女孩信息
this.sendCift = function(gift){
(new boy(this.girl)).sendCift(gift);//替人送花
}
}
//调用
var girl = new girl("小芳");
var proxy = new ProxyObj(girl);
proxy.sendCift("999朵玫瑰")
图片懒加载 :代理模式
真实图片(较大,加载慢)---代理图片(较小,加载快)---浏览器
window.onload = function(){
var myImage = (function(){ //自执行函数
var imgNode = document.createElement("img"); //创建图片节点
document.body.appendChild(imgNode); //把创建的图片加入到body
var img = new Image(); //代理对象,先展示等待图片 接着负责拉取真实图片
img.onload = function(){ //当真实图片加载完毕后触发
setTimeout(()=>{
imgNode.src = this.src; //最后 将用真实图片把展示的等待图片替换
},2000)
}
return { //返回一个对象 myImage
setSrc:function(src){
//先展示等待的图片 小图片
imgNode.src = "http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif";
img.src = src; //把真实图片给代理对象
}
}
})()
//把真实图片给到myImage对象
myImage.setSrc("https://www.baidu.com/img/bd_logo1.png") //真实图片地址
}
//真实对象
var myImage = (function(){
var imgNode = document.createElement("img"); //创建图片节点
document.body.appendChild(imgNode); //把创建的图片加入到body
return {
//返回一个对象 myImage
setSrc:function(src){
imgNode.src = src;
}
}
})()
//代理对象
var ProxyImage = (function(){
var img = new Image();
img.onload = function(){
setTimeout(()=>{
myImage.setSrc(this.src); //最后 将用真实图片把展示的等待图片替换
},2000)
}
return {
//返回一个对象 myImage
setSrc:function(src){
//先展示等待的图片 小图片
myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif");
mg.src = src;
}
}
})();
//用户
ProxyImage.setSrc("https://www.baidu.com/img/bd_logo1.png")
js设计模式-代理模式的更多相关文章
- js 设计模式——代理模式
代理模式 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 生活中有很多的代理模式的场景.例如,明星有经纪人作为代理,老板有秘书作为代理等等,当有事情的时候,会找到经纪人或秘书,再由他 ...
- 9. 星际争霸之php设计模式--代理模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- C++设计模式——代理模式
前言 青春总是那样,逝去了才开始回味:大学生活也是在不经意间就溜走了,现在上班的时候,偶尔还会怀念大学时,大家在一起玩游戏的时光.大学喜欢玩游戏,但是可悲的校园网,速度能把人逼疯了:还好,后来搞了一个 ...
- PHP设计模式-代理模式
概念理解: 代理模式,是对简单处理程序(或指针)的增强,用于引用一个对象:这个指针被代理对象取代,代理对象位于客户端和真实程序之间,指针有一个可被多个目标利用的钩子. 参与者: client(参与者) ...
- Java设计模式-代理模式之动态代理(附源代码分析)
Java设计模式-代理模式之动态代理(附源代码分析) 动态代理概念及类图 上一篇中介绍了静态代理,动态代理跟静态代理一个最大的差别就是:动态代理是在执行时刻动态的创建出代理类及其对象. 上篇中的静态代 ...
- 浅谈Python设计模式 - 代理模式
声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 一.在某些应用中,我们想要在访问某个对象之前执行一个或者多个重要的操作,例如,访 ...
- Java 之 设计模式——代理模式
设计模式——代理模式 一.概述 1.代理模式 (1)真实对象:被代理的对象 (2)代理对象:代理真实对象的 (3)代理模式:代理对象代理真实对象,达到增强真实对象功能的目的 二.实现方式 1.静态代理 ...
- [Head First设计模式]抢票中的设计模式——代理模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- JAVA 设计模式 代理模式
用途 代理模式 (Proxy) 为其他对象提供一种代理以控制对这个对象的访问. 代理模式是一种结构型模式. 结构
随机推荐
- 入坑django2
数据模型 关于时间的字段设置 add_date = models.DateTimeField('保存日期',default = timezone.now) mod_date = models.Date ...
- python list按字典的key值排序
方法1: result_list = sorted(origin_list, key=lambda e: e.__getitem__('order_key')) 方法2: import operato ...
- 网络初级篇之VLAN间路由(原理与配置)
一.VLAN间的路由 由于VLAN隔离了二层广播域,也间接的隔离了各个VLAN之间的其他二层流量交换,这样导致属于不同VLAN之间的用户不能进行二层的通信.只能经过三层的路由转发才能将报文从一个VLA ...
- 【墨西哥区域赛】Carpet
原题: 题意: 给你一个树,有1e5个节点,让你把这个树放在一个长1e6宽20的网格图里,要求一个格子放一个节点,树边之间不能相交 这是一道构造题 因为树的形状可能性很多,很复杂,所以不能简单猜测,而 ...
- PHP工程师学习计划
从开始学习PHP到现在,只是大致的对PHP的一些基础的东西了解一下,从没有制定一个较为完整的学习计划,所以自己的编程水平一直都处在基本的入门阶段,所以结合自己的实际情况制定了一个感觉还算合理的学习计划 ...
- 浅入深出Vue:登录
上一篇我们实现了注册功能,现在我们来实现一下登录功能. 准备工作 新建登录组件 添加登录组件的路由对象 新建登录组件 Login.vue: <template> <div> & ...
- 09-sp_lock和sys.dm_tran_locks的用法
一.总结 1.网址 https://docs.microsoft.com/zh-cn/sql/relational-databases/system-stored-procedures/sp-lock ...
- Ubuntu16.04连接SSH出现 Server responded “Algorithm negotiation failed” 的解决方法
今天安装了Ubuntu16.04虚拟机,与SSH连接时出现了如下问题 解决方法如下: (写在前面:请先确保自己已经给Ubuntu安装了SSH服务.安装方法是在root模式下,终端输入命令apt-g ...
- 【Python网络】HTTP
HTTP概述 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信规则,通信规则规定 ...
- rander()函数执行条件
调用this.setState({}),如果数据改变了,rander()就行执行