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) 为其他对象提供一种代理以控制对这个对象的访问. 代理模式是一种结构型模式. 结构
随机推荐
- python 小记
判断一个数是奇数还是偶数 #!/usr/bin/env python3 #_*_coding:UTF-8_*_ def pan(num): ==: print( str(num) + ' is: 偶数 ...
- layDate面板出现红色花纹图案
要使用layDate,有两种方法: 1. 要么在引用layui.js和layui.css,然后通过layui.use('laydate', callback) 加载模块后,调用方法使用. 2. 去la ...
- 5、Sersync实时同步实战
1.实时同步概述 1.什么是实时同步, 只要当前目录发生变化则会触发一个事件,事件触发后将变化的目录同步至远程服务器. 2.为什么要实时同步, 保证数据的连续性, 减少人力维护成本, 解决nfs单点故 ...
- 第九章· MySQL的备份和恢复
一.备份的原因 运维工作的核心简单概括就两件事: 1)第一个是保护公司的数据. 2)第二个是让网站能7*24小时提供服务(用户体验).  备份的原因 1)备份就是为了恢复. 2)尽量减少数据的丢失( ...
- SVN搭建以及客户端使用
第1章 CentOS下搭建SVN服务器 1.1 SVN简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. ...
- linux 重定向类型 超级块 i节点
超级块:定义文件系统的元数据(总大小.块大小.空闲.......):在格式化的时候确定 查看超级块信息:tune2fs -l 目录 i节点:定义文件的元数据(名称.大小.存放位置.权限.修改时间 ...
- 《Python基础教程》第二章:列表和元组(2)
list函数可以将字符串转换为列表 ' '.join(somelist)可以将列表转换为字符串 从列表中删除元素可以使用del语句来实现 方法是与对象有紧密联系的函数:对象.方法(参数) append ...
- Nginx概念
这篇文章只是单纯的介绍nginx以及一些相关概念,有的概念在实际应用中不会用到,不理解也没有关系,这不影响我们学习nginx. Nginx是什么 如果你知道http协议和httpd是什么,那你就会容易 ...
- Eclipse里Maven配置
简单记录一下,太特么困了,这几天天天加班很晚来着 : 选中.Apply and Close. 完成. 日他得,腰都快加断了……:) ---------------------------------- ...
- Java-IPDeal工具类
/** * IP处理类 */ import java.sql.*; public class IPDeal { /** * 通过ip地址查询地区名称 * @param strip * @return ...