js设计模式——代理模式（读书JavaScript设计模式与开发实战笔记02）

最新推荐文章于 2022-10-02 09:42:38 发布
最新推荐文章于 2022-10-02 09:42:38 发布
阅读量109 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28500793/article/details/88070392
版权

代理模式

代理模式顾名思义，就是通过一个代理去处理问题，例如黑道头子去买军火，一般都是让自己的头号手下去买，自己不参与实际交易~~

虚拟代理

我们先从常见的图片占位图片代理来说明。
通常情况下，我们加载图片的姿势是这样的。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<!-- https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-747189.jpg -->
	<!-- https://www.baidu.com/img/xinshouye_4d9e7ecaa1b5f78475bf13965c6142d1.png -->
	<img id="image" src="" alt="">
	<script>
		var mgImage = (function(){
			var img = document.getElementById('image');
			// 因为我们需要一个方法 去供代理使用，所以这里返回的是对象。
			return {
				setImage: function(src){
					img.src = src;
				}
			}
		})();
		mgImage.setImage('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-747189.jpg');

	</script>
</body>

</html>

没错，打开非常卡，因为我用的是一个外国网站的图片。
使用代理占位图片来加载就是一个非常好的方法。如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<!-- https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-747189.jpg -->
	<!-- https://www.baidu.com/img/xinshouye_4d9e7ecaa1b5f78475bf13965c6142d1.png -->
	<img id="image" src="" alt="">
	<script>
		var mgImage = (function(){
			var img = document.getElementById('image');
			return {
				setImage: function(src){
					// 2.设置成功，显示占位图片。
					img.src = src;
				}
			}
		})();

		var poxyImge = (function(){
			// 怎样判断我们需要的图片加载完成，首先创建一个图片实例poxyImg，用onload判断。
			var poxyImg= new Image();
			poxyImg.onload = function(){
				// 4.当真实图片地址加载完毕，添加到body的img标签里，完成代理。
				mgImage.setImage(this.src)
			}
			return {
				setImage: function(src) {
					// 1.先给img加载占位图片。
					mgImage.setImage('https://www.baidu.com/img/xinshouye_4d9e7ecaa1b5f78475bf13965c6142d1.png');
					// 3.给poxyImg实例添加真实图片地址
					poxyImg.src =src;
				}
			}
		})()
		poxyImge.setImage('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-747189.jpg');

	</script>
</body>

</html>

当然我们也可以放在一个函数当中，这样就违反了单一原则和开放封闭原则，上面的代理模式，如果我们以后不需要这个图片占位，直接用mgImage函数调用方法就可以了。
如果不用代理模式如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<!-- https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-747189.jpg -->
	<!-- https://www.baidu.com/img/xinshouye_4d9e7ecaa1b5f78475bf13965c6142d1.png -->
	<img id="image" src="" alt="">
	<script>
		var mgImage= (function(){
			var img = document.getElementById('image');
			var poxyImg = new Image;	
			poxyImg.onload = function(){
				img.src = this.src
			}
			return {
				setImage: function(src){
					img.src = 'https://www.baidu.com/img/xinshouye_4d9e7ecaa1b5f78475bf13965c6142d1.png';
					poxyImg.src = src;
				}
			}
		})();	
		mgImage.setImage('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-747189.jpg')
	</script>
</body>

</html>

这样也能完成，但是对于以后的维护成本将会提升很多，因为要去mgImage函数中去修改原有的代码，是非常不划算的，而且容易产生BUG。

缓存代理

常常用于比较大的计算开销，如果传入的参数一致，则直接返回结果，无需计算。
比方说如下栗子，

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<script>
		var mult =  function () {
			console.log('start');
			var a = 1;
			for (var i = 0; i < arguments.length; i++) {
				a = a*arguments[i];
			}
			return a;
		}
		var poxyMult = (function () {
			var cache = {};
			return function () {
				// 定义对象KEY
				var args = Array.prototype.join.call(arguments, ',');
				// 判断KEY是否存在，不存在，新建一个key value
				if (!cache[args]) {
					cache[args] = mult.apply(this, arguments)
				}
				// 返回当前key 对应的value
				return cache[args];
			}
		})()
		var num = poxyMult(1,2,4,9); // 72
		var num1 = poxyMult(1,2,4,9); //72
	</script>
</body>

</html>

上面就使用了缓存代理，如果传入参数一样的情况下，会直接返回cache里面的值，当然这样写的话，我们只能计算乘积，其实我们可以进行解耦，在原先的poxyMult中，我们不仅进行了缓存，还把mult函数直接绑定在里面，这样是不好的，我们改写下。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<script>
		var mult =  function () {
			console.log('start');
			var a = 1;
			for (var i = 0; i < arguments.length; i++) {
				a = a*arguments[i];
			}
			return a;
		}
		var createProxyFactory = function (fn) {
			var cache = {};
			return function () {
				var args = Array.prototype.join.call(arguments, ',');
				if (!cache[args]) {
					cache[args] = fn.apply(this, arguments)
				}
				return cache[args];
			}
		}
		var add =  function () {
			console.log('start');
			var a = 1;
			for (var i = 0; i < arguments.length; i++) {
				a = a + arguments[i];
			}
			return a;
		}
		var poxyMult = createProxyFactory(mult)
		var poxyAdd = createProxyFactory(add)
		var num = poxyMult(1,2,4,9); // 72
		var num1 = poxyAdd(1,2,4,9); // 17
	</script>
</body>

</html>

改写后的函数，我们新增一个ADD的计算函数，直接将函数传入createProxyFactory函数中，就实现了加法的缓存，这样我们就能实现多种计算的缓存。
这也是实现面向对象的开放封闭原则。

吴文炜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析JavaScript设计模式——代理模式
尐轩web前端网络日志
11-17 2550
代理模式 为一个对象提供一个代用品或占位符，以便控制对它的访问 好久没有写设计模式的文章了 今天要写的代理模式可能内容要多一些 代理模式非常有用，代理模式也分为很多很多种，我只谈一些常见并且简单的 思想其实都是一样的 代理这个词我们并不陌生，在生活中例子也很多，比如，经纪人… 当我们不方便直接访问一个对象或者访问对象不满足我们需求的时候 我们可以把这个对象的控制权交给一个代理对象，
《javascript设计模式》学习笔记七：Javascript面向对象程序设计组合模式详解
10-15
JavaScript设计模式中的组合模式是一种对象结构型模式，其核心思想是将一组相似或相关的对象作为一个单一的对象来处理，实现部分与整体的层次结构。这种模式允许客户端以一致的方式对待单个对象（叶子对象）和包含多...
JavaScript设计模式——桥接模式
前端御书房
09-17 538
JavaScript设计模式，桥接模式，持续更新中……
《JavaScript设计模式》初次笔记——wsdchong
热门推荐
wsdchong的博客
06-17 1万+
《JavaScript设计模式》初次笔记 前言 设计模式一直久仰大名，但是没有去花时间去了解，于是今天特意花时间去看《JavaScript设计模式》（2013年6月出版）和w3cschool上的设计模式。然后做了一些笔记。 以《JavaScript设计模式》为目录，以w3cschool上的设计模式为补充。 讲的内容有三：设计模式、JavaScript设计模式、其他（模块化的JavaScript设计模式、jQuery设计模式、jQuery插件设计模式）。 学习目的：尝试性地了解JavaScript设计模式，方
【JavaScript设计模式】读书笔记——什么是设计模式？
Myself's CSDN
06-24 237
文章目录 1.什么是设计模式？ 2.js设计模式结构 3.编写设计模式 4.js反模式 5.js设计模式的分类 什么是设计模式？ 1.什么是设计模式？ 就是一个我们如何解决问题的模板——那些可以再许多不同的情况里使用的模板。 优点： 模式是行之有效的解决方法：提供固定解决方法来解决开发中出现问题 易重用：一个模式通常反映一个可适应自己需要的开箱即用的解决方案 善于表达：一般有一组词汇和优雅的解决方案 2 . js设计模式结构 模式是最初提出的一种在两者之间建立关系的规则： 上下文环境(在此环境下产生系统
JavaScript设计模式学习笔记（一）
qq_36013952的博客
06-01 182
JavaScript设计模式学习笔记（一）一、学习设计模式的目的二、模式分类创建型模式结构型模式行为型模式 本系列博客主要是面向自己创作，实属自己的读书笔记，注重记录一些重点，并摘录引用一些大佬对于部分知识点的解释，帮助自己翻阅和理解，一定要配合原著食用。
JavaScript设计模式——建造者模式
最新发布
前端御书房
10-02 566
JavaScript设计模式，构建者模式，持续更新中……
读书笔记 - javascript设计模式和开发实践
weixin_38245947的博客
02-07 1279
一 单例模式： 单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。 单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏 览器中的 window 对象等。在 JavaScript 开发中，单例模式的用途同样非常广泛。试想一下，当我 们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少 次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。 单例模式实现： 要实现一个标准的单例模式并不复杂，无非是用一个变
javascript设计模式(二)-策略模式(读书笔记)
weixin_43275787的博客
07-15 209
最近在研读曾探大佬的著作《JavaScript设计模式与开发实践》——策略模式，并做了如下读书笔记总结和个人理解。 策略模式 定义：定义一系列的算法，把它们封装起来，并且使其可以相互替换。 使用策略模式计算奖金 var calculateBonus = function( performanceLevel, salary ){ if ( performanceLevel === 'S' ){ return salary * 4; } if ( performanceLeve.
Javascript 设计模式系统讲解与应用——学习笔记10-状态模式
路漫漫其修远兮，吾将上下而求索。
09-29 628
状态模式 一个对象有状态变化 每次状态变化都会触发一个逻辑 不能总是用 if ... else 来控制 示例 交通红绿灯 传统UML类图 JS版简单UML图： // 状态: 红灯 黄灯 绿灯 class State { constructor(color) { this.color = color } handle(context) { console.log(`turn to ${this.color} light`) context.setState(thi
Javascript 设计模式系统讲解与应用——学习笔记7-外观模式
路漫漫其修远兮，吾将上下而求索。
09-28 185
外观模式 为子系统中的一组接口提供了一个高层接口 使用者使用这个高层接口 示例 去医院看病，接待员去挂号，门诊，划价，取药 UML类图 场景 function bindEvent(elem, type, selector, fn) { if (fn == null) { fn = selector selector = null } // **** } // 调用 bindEvent(elem, 'click', '#div1', fn) bindEvent(ele
《javascript设计模式》学习笔记二：Javascript面向对象程序设计继承用法分析
10-15
在JavaScript设计模式中，继承是实现模块化和代码复用的关键手段。理解并熟练运用这些继承方式，能帮助开发者写出更高效、更易于维护的代码。同时，掌握如何避免可能出现的问题，如原型链污染、性能影响等，也是至关...
《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析
10-15
JavaScript设计模式中的工厂模式是一种创建型设计模式，它提供了一种创建对象的最佳方式。在工厂模式中，当创建对象时，我们不会对客户端暴露创建逻辑，而是引用一个共同的接口来指向新创建的对象。 1. **简单工厂...
javascript设计模式之模块模式学习笔记
12-11
我们通过单体模式理解了是以对象字面量的方式来创建单体模式的；比如如下的对象字面量的方式代码如下： var singleMode = { name: value, method: function(){ } }; 模块模式的思路是为单体模式添加私有变量和...
arr数组的方法（js小知识）
qq_28500793的博客
02-24 1556
arr数组的方法 检测数组Array.isArray(value)，如果是数组返回true,否则返回false if (Array.isArray(value)) { //do something... } 转换方法 toString valueOf toLocaleString join var colors = ['red', 'green', 'blue']; // t...
label的使用（js 小知识点）
qq_28500793的博客
02-21 1356
label label的中文意思就是标签的意思，这个js关键字就是制定一个标签，好在使用break或者continue的时候返回label定位的上下文环境中继续执行。 var num = 0; for (let i = 0; i &amp;lt; 10; i++) { for (let j = 0; j &amp;lt; 10; j++) { if (i == 5 &amp;amp;&amp;amp; j == 5)...
for in循环需注意（js 小知识点）
qq_28500793的博客
02-21 741
for in 使用for in的时候最好先检查对象是否是undefined否则会报错，null的话会不执行循环体。 var obj = { name: 'viven', age: 28 }; if (obj != undefined) { for (var key in obj) { console.log(key, obj[key]); }; }; // name...
express+mongoose写接口的时候，第二次请求报错
qq_28500793的博客
11-01 411
出现如下报错： (node:3488) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): OverwriteModelEr ror: Cannot overwrite col_1 model once compiled. 解决办法是将 mongoose.model 模型定义在请求接口外面...
JavaScript设计模式实践与进阶指南
《JavaScript 设计模式与开发实践》是由曾探编著的一本深入探讨JavaScript设计模式的书籍。作者在书中结合JavaScript的特性，全面阐述了实践中常用的设计模式，旨在帮助读者提升JavaScript编程水平，特别是在面向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值