网站建设犭金手指C排名15,做网站最新技术,空间站免费版下载,wordpress适合下载站的主题JavaScript设计模式中有一种模式为代理模式
事件代理
事件代理是代理中最常见的一种#xff0c;也是一道实打实的高频面试题#xff0c;它的场景是一个父元素下有多个子元素。
考虑到事务具有冒泡性#xff0c;当我们点击a标签的时候#xff0c;会冒泡到父级。从而被监听…JavaScript设计模式中有一种模式为代理模式
事件代理
事件代理是代理中最常见的一种也是一道实打实的高频面试题它的场景是一个父元素下有多个子元素。
考虑到事务具有冒泡性当我们点击a标签的时候会冒泡到父级。从而被监听。我们则只需要给父级绑定一个监听事件即可。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle事件代理/title
/head
bodydiv idfathera href#链接1号/aa href#链接2号/aa href#链接3号/aa href#链接4号/aa href#链接5号/aa href#链接6号/a/div
/body
/htmldocument.getElementById(father).addEventListener(click, function (e) {e.preventDefault()console.log(e.target.tagName a alert(e.target.inerHTML))
})
虚拟代理
懒加载它是针对突破加载时机的优化在一些图片量比较大的网站如电商网站首页团购网站小游戏首页等。如果我们尝试在用户打开页面的时候就把所有的图片资源加载完毕那么很有可能会造成白屏、卡顿。
预加载它主要是为了避免网络不好的时候或者图片过大时页面长时间给用户留白的尴尬常见的操作是先让这个img标签展示一个展位图然后创建一个image实例让这个image实例的src指向真实的目标图片地址。观察image实例的加载情况当其对应的真实图片加载完毕后就已经有了该图片的缓存内容再将DOM上的img元素的src指向真实的目标图片地址此时我们直接去取目标图片的缓存所以会非常快。从展位图到目标图片的事件会非常小。
let myImage function () {let img document.createElement(img);document.body.appendChild(img);return {setSrc ( src ) {img.src src;}}
}();
proxyImage function () {let img new Image;img.onload function () {myImage.setSrc( this.src );}return {setProxyImage( src ) {myImage.setSrc(https://img.zcool.cn/community/01e2115d5d5c7da80120695c137bfb.jpg1280w_1l_2o_100sh.jpg); // 此处为加载 loading 图片,用来占位,本地图片作者使用网络图片img.src src;}}
}();
proxyImage.setProxyImage(https://img.zcool.cn/community/01a5d45543cd170000019ae94fc087.jpg)
缓存代理
在一些计算量较大的场景下我们需要用空间换时间例如当我们需要用到某个已经计算过的值的时候不想再耗时进行二次计算而是希望能够从内存中去取现成的计算结果这种场景下就需要一个代理来帮我们进行计算的同时缓存计算结果。
// addAll方法会对你传入的所有参数做求和操作
const addAll function() {console.log(进行了一次新计算)let result 0const len arguments.lengthfor(let i 0; i len; i) {result arguments[i]}return result
}// 为求和方法创建代理
const proxyAddAll (function() {// 求和结果的缓存池const resultCache {}return function() {// 将入参转化为一个唯一的入参字符串const args Array.prototype.join.call(arguments, ,)// 检查本次入参是否有对应的计算结果if(args in resultCache) {// 如果有则返回缓存池里现成的结果return resultCache[args]}return resultCache[args] addAll(...arguments)}
})()
保护代理
就是使用proxy来进行代理保护另一个对象的一部分东西。
// 珍爱网
const 珍爱网 () {const BlindDate () { // 发起相亲请求return 你们开始相亲了}return {join}
}const 系统 (你的信息) {this.你的信息 你的信息const 判断资格 function () {if( 你的信息.年龄 20){return 年龄不够资格不允许相亲 }else{珍爱网().BlindDate() }}return 判断资格
}console.log(系统({姓名小孩子年龄19});
