js署理模式

允许在不改变原始对象的情况下，通过署理对象来访问原始对象。署理对象可以在访问原始对象之前或之后，添加一些额外的逻辑或功能。
科学上网过程

一般情况下,在访问国外的网站,会显示无法访问
因为在dns分析过程,这些ip被禁止分析,以是显示无法访问
引入署理服务器,这个第三方的 ip 地址，不在被禁用的那批 ip 地址之列，我们可以顺利访问到这台服务器。而这台服务器的 DNS 分析过程,是正常的，以是它是可以顺利访问 Google.com 的。署理服务器在请求到 Google.com 后，将响应体转发给你，使你得以间接地访问到目标网址 —— 像这种第三方取代我们访问目标对象的模式，就是署理模式。

应用

变乱署理

使用变乱冒泡的特性

1. <div id="father">
3.         <a href="#">链接1号</a>
5.         <a href="#">链接2号</a>
7.         <a href="#">链接3号</a>
9.         <a href="#">链接4号</a>
11.         <a href="#">链接5号</a>
13.         <a href="#">链接6号</a>
15.     </div>
17.     <script>
19.         const father = document.getElementById('father')
21.         father.addEventListener('click', (e) => {
23.             if (e.target.tagName === 'A') {
25.                 alert(`我是${e.target.innerHTML}`)
27.             }
29.   
31.         })
33.   
34.   
36.     </script>
38. </body>

复制代码

虚拟署理

图片懒加载：
它是针对图片加载机会的优化：在一些图片量比较大的网站，好比电商网站首页，或者团购网站、小游戏首页等。如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很大概会造成白屏、卡顿等征象。
会采取==“先占位、后加载”==的方式来展示图片 —— 在元素露出之前，我们给它一个 div 作占位，当它滚动到可视地区内时，再即时地去加载真实的图片资源，如许做既减轻了性能压力、又保住了用户体验。
图片预加载。预加载主要是为了避免网络欠好、或者图片太大时，页面长时间给用户留白的尴尬。常见的操纵是先让这个 img 标签展示一个占位图，然后创建一个 Image 实例，让这个 Image 实例的 src 指向真实的目标图片地址、
观察该 Image 实例的加载情况 —— 当其对应的真实图片加载完毕后，即已经有了该图片的缓存内容，再将 DOM 上的 img 元素的 src 指向真实的目标图片地址。此时我们直接去取了目标图片的缓存，以是展示速率会非常快，从占位图到目标图片的时间差会非常小、小到用户注意不到，如许体验就会非常好了。

1.   class PreLoadImage {
3.             // 获取该实例对应的DOM节点
5.             constructor(imgNode) {
7.                 this.imgNode = imgNode
9.             }
11.             setSrc(url) {
13.                 this.imgNode.src=url
15.             }
17.         }
19.         class ProxyImg{
21.             //默认地址
23.             static url ="./../../static/1.png"
25.   
27.             //获取目标元素
29.             constructor(targetImg){
31.                 this.targetImg = targetImg
33.             }
35.             //操作虚拟img
37.             setSrc(url){
39.                 // 设置默认图片
41.                 this.targetImg.setSrc(ProxyImg.url)
43.                 //创建一个img实例
45.                 const vitualImg = new Image()
47.                 vitualImg.src = url
49.                 //监听img加载情况
51.                 vitualImg.onload = ()=>{
53.                     this.targetImg.setSrc(url)
55.                 }
57.             }
59.   
61.         }
63.   
64.   
65.   
67.         const imgNode = document.getElementById('img')
69.         const proxyImg = new ProxyImg(new PreLoadImage(imgNode))
71.         proxyImg.setSrc('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

复制代码

在这个实例中，virtualImage 这个对象是一个“幕后英雄”，它始终存在于 JavaScript 天下中、取代真实 DOM 发起了图片加载请求、完成了图片加载工作，却从未在渲染层面抛头露面。因此这种模式被称为“虚拟署理”模式。
缓存署理

它应用于一些盘算量较大的场景里。

• 我们必要“用空间换时间”——当我们必要用到某个已经盘算过的值的时候，不想再耗时进行二次盘算，而是希望能从内存里去取出现成的盘算结果。
  
• 这种场景下，就必要一个署理来帮我们在进行盘算的同时，进行盘算结果的缓存了。
  

1. //需求:对传入的所有参数进行求和
3. function addAll(){
5.     console.log('进行了一次计算');
7.     let sum = 0;
9.     for(let i = 0; i < arguments.length; i++){
11.         sum += arguments[i];
13.     }
15.     return sum;
17. }
19.   
21. function proxyAddAll(){
23.     //创造一个缓存池
25.     let cache = {};
27.     return function(...args){
29.         //将传入的参数转化为字符串，作为缓存的key
31.         let key = args.join(',');
33.         if(key in cache){
35.             return cache[key];
37.         }
39.         return cache[key] = addAll(...args);
41.     }
43. }
45.   
47. let proxy = proxyAddAll();
49. console.log(proxy(1,2,3,4,5)); //15
51. console.log(proxy(1,2,3,4,5)); //15

复制代码

掩护署理

ES6中的Proxy
开婚介所的时候，为了掩护用户的私人信息，我们会在同事哥访问小美的年龄的时候，去校验同事哥是否已经通过了我们的实名认证；为了确保同事哥确实是一位有诚意的男士，当他想获取小美的联系方式时，我们会校验他是否具有VIP 资格。所谓“掩护署理”，就是在访问层面做文章，在 getter 和 setter 函数里去进行校验和拦截，确保一部门变量是安全的。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。