网站描述标签优化,网站建设 工作计划,牙科医院网站建设,苏州比较好的软件公司有哪些允许在不改变原始对象的情况下#xff0c;通过代理对象来访问原始对象。代理对象可以在访问原始对象之前或之后#xff0c;添加一些额外的逻辑或功能。
科学上网过程
一般情况下,在访问国外的网站,会显示无法访问 因为在dns解析过程,这些ip被禁止解析,所以显示无法访问
引…允许在不改变原始对象的情况下通过代理对象来访问原始对象。代理对象可以在访问原始对象之前或之后添加一些额外的逻辑或功能。
科学上网过程
一般情况下,在访问国外的网站,会显示无法访问 因为在dns解析过程,这些ip被禁止解析,所以显示无法访问
引入代理服务器,这个第三方的 ip 地址不在被禁用的那批 ip 地址之列我们可以顺利访问到这台服务器。而这台服务器的 DNS 解析过程,是正常的所以它是可以顺利访问 Google.com 的。代理服务器在请求到 Google.com 后将响应体转发给你使你得以间接地访问到目标网址 —— 像这种第三方代替我们访问目标对象的模式就是代理模式。
应用
事件代理
利用事件冒泡的特性 div idfathera href#链接1号/aa href#链接2号/aa href#链接3号/aa href#链接4号/aa href#链接5号/aa href#链接6号/a/divscriptconst father document.getElementById(father)father.addEventListener(click, (e) {if (e.target.tagName A) {alert(我是${e.target.innerHTML})}})/script/body虚拟代理
图片懒加载 它是针对图片加载时机的优化在一些图片量比较大的网站比如电商网站首页或者团购网站、小游戏首页等。如果我们尝试在用户打开页面的时候就把所有的图片资源加载完毕那么很可能会造成白屏、卡顿等现象。 会采取“先占位、后加载”的方式来展示图片 —— 在元素露出之前我们给它一个 div 作占位当它滚动到可视区域内时再即时地去加载真实的图片资源这样做既减轻了性能压力、又保住了用户体验。
图片预加载。预加载主要是为了避免网络不好、或者图片太大时页面长时间给用户留白的尴尬。常见的操作是先让这个 img 标签展示一个占位图然后创建一个 Image 实例让这个 Image 实例的 src 指向真实的目标图片地址、 观察该 Image 实例的加载情况 —— 当其对应的真实图片加载完毕后即已经有了该图片的缓存内容再将 DOM 上的 img 元素的 src 指向真实的目标图片地址。此时我们直接去取了目标图片的缓存所以展示速度会非常快从占位图到目标图片的时间差会非常小、小到用户注意不到这样体验就会非常好了。 class PreLoadImage {// 获取该实例对应的DOM节点constructor(imgNode) {this.imgNode imgNode}setSrc(url) {this.imgNode.srcurl}}class ProxyImg{//默认地址static url ./../../static/1.png//获取目标元素constructor(targetImg){this.targetImg targetImg}//操作虚拟imgsetSrc(url){// 设置默认图片this.targetImg.setSrc(ProxyImg.url)//创建一个img实例const vitualImg new Image()vitualImg.src url//监听img加载情况vitualImg.onload (){this.targetImg.setSrc(url)}}}const imgNode document.getElementById(img)const proxyImg new ProxyImg(new PreLoadImage(imgNode))proxyImg.setSrc(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)在这个实例中virtualImage 这个对象是一个“幕后英雄”它始终存在于 JavaScript 世界中、代替真实 DOM 发起了图片加载请求、完成了图片加载工作却从未在渲染层面抛头露面。因此这种模式被称为“虚拟代理”模式。
缓存代理
它应用于一些计算量较大的场景里。 我们需要“用空间换时间”——当我们需要用到某个已经计算过的值的时候不想再耗时进行二次计算而是希望能从内存里去取出现成的计算结果。 这种场景下就需要一个代理来帮我们在进行计算的同时进行计算结果的缓存了。
//需求:对传入的所有参数进行求和function addAll(){console.log(进行了一次计算);let sum 0;for(let i 0; i arguments.length; i){sum arguments[i];}return sum;}function proxyAddAll(){//创造一个缓存池let cache {};return function(...args){//将传入的参数转化为字符串作为缓存的keylet key args.join(,);if(key in cache){return cache[key];}return cache[key] addAll(...args);}}let proxy proxyAddAll();console.log(proxy(1,2,3,4,5)); //15console.log(proxy(1,2,3,4,5)); //15保护代理
ES6中的Proxy 开婚介所的时候为了保护用户的私人信息我们会在同事哥访问小美的年龄的时候去校验同事哥是否已经通过了我们的实名认证为了确保同事哥确实是一位有诚意的男士当他想获取小美的联系方式时我们会校验他是否具有VIP 资格。所谓“保护代理”就是在访问层面做文章在 getter 和 setter 函数里去进行校验和拦截确保一部分变量是安全的。
