代理模式在vue中的使用示例解析
引言
當(dāng)本體處于保護(hù)、緩存、虛擬或者過(guò)濾等情況下時(shí),一個(gè)數(shù)據(jù)不適合被訪問(wèn)或者一個(gè)方法不能被直接調(diào)用,可以采用代理模式,先創(chuàng)建一個(gè)代理(本體對(duì)象或者方法的替身),作為訪問(wèn)者和本體之間的中介或者橋梁。
本體訪問(wèn)和代理訪問(wèn)的區(qū)別
不使用代理:訪問(wèn) ==> 本體
使用代理:訪問(wèn) ==> 代理 ==> 本體
1、圖片預(yù)加載
// 本體 var myImage = (function () { var imgNode = document.createElement('img'); document.body.appendChild(imgNode); return { setSrc: function (src) { imgNode.src = src; } } })() // 代理 var proxyImage = (function(){ var img = new Image(); img.onload = function(){ myImage.setSrc( this.src ); } return { setSrc: function( src ){ myImage.setSrc( '預(yù)加載的圖片' ); img.src = src; } } })();
以上是本體和代理,都有相同的接口setSrc,有以下兩種訪問(wèn)方式:
- 直接訪問(wèn)本體
myImage.setSrc("目標(biāo)圖片地址")
如果網(wǎng)速不太好,直接訪問(wèn)本體,那么會(huì)出現(xiàn)圖片一截一截出現(xiàn)的情況。
- 訪問(wèn)代理對(duì)象
proxyImage.setSrc("目標(biāo)圖片地址")
如果網(wǎng)速不太好,可以先顯示默認(rèn)的loading圖,給用戶以預(yù)期。當(dāng)目標(biāo)圖片加載完成的時(shí)候,再將當(dāng)前的loading圖換成目標(biāo)圖片地址。
2、緩存代理
// 本體計(jì)算乘積 var mult = function(){ var a = 1; for ( var i = 0, l = arguments.length; i < l; i++ ){ a = a * arguments[i]; } return a; }; // 代理計(jì)算乘積 var proxyMult = (function(){ var cache = {}; return function(){ var args = Array.prototype.join.call( arguments, ',' ); if ( args in cache ){ return cache[ args ]; } return cache[ args ] = mult.apply( this, arguments ); } })();
以上是本體和代理,都可以通過(guò)傳遞參數(shù)計(jì)算乘積,有以下兩種訪問(wèn)方式:
- 本體計(jì)算乘積
console.log(mult( 1, 2, 3, 4 )); // 24
計(jì)算會(huì)得出24的乘積,如果再次計(jì)算會(huì)再次進(jìn)行計(jì)算,如果數(shù)據(jù)量比較大的話,會(huì)重復(fù)計(jì)算;
- 代理計(jì)算乘積
console.log(proxyMult( 1, 2, 3, 4 )); // 24
第一次計(jì)算會(huì)計(jì)算出24的乘積,并將其存到cache中,如cache["1,2,3,4"] = 24,第二次計(jì)算的時(shí)候,發(fā)現(xiàn)cache中有鍵為"1,2,3,4"的乘積,無(wú)需重復(fù)計(jì)算,直接返回。
3、跨域代理
在日常開發(fā)vue
項(xiàng)目的過(guò)程中,會(huì)和后端進(jìn)行接口的聯(lián)調(diào)。
如果我們直接訪問(wèn)后端接口,可能會(huì)出現(xiàn)跨域的問(wèn)題。
我們可以通過(guò)配置webpack
的devServer
配置,先訪問(wèn)本地的代理服務(wù)器,代理服務(wù)器去訪問(wèn)后端服務(wù)器。因?yàn)?,服?wù)器訪問(wèn)服務(wù)器沒(méi)有跨域的說(shuō)法,所以,通過(guò)本地代理服務(wù)器作為中介,我們就實(shí)現(xiàn)了前端訪問(wèn)后端接口的目的。
總結(jié)
在代理模式中本體和代理有著相同的訪問(wèn)接口或者執(zhí)行后有同樣的效果,那么,開發(fā)前無(wú)需刻意進(jìn)行代理模式的預(yù)測(cè),當(dāng)需要的時(shí)候再去對(duì)本體進(jìn)行代理功能的編寫。根據(jù)功能的不同,代理模式又可分為,緩存代理、防火墻代理、保護(hù)代理和跨域代理等模式。
以上就是代理模式在vue中的使用示例解析的詳細(xì)內(nèi)容,更多關(guān)于vue 代理模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Vue中的this.$options.data()和this.$data用法說(shuō)明
這篇文章主要介紹了Vue中的this.$options.data()和this.$data用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue - props 聲明數(shù)組和對(duì)象操作
這篇文章主要介紹了vue - props 聲明數(shù)組和對(duì)象操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07解決vue-cli + webpack 新建項(xiàng)目出錯(cuò)的問(wèn)題
下面小編就為大家分享一篇解決vue-cli + webpack 新建項(xiàng)目出錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue的rules驗(yàn)證部分可以部分又失效的原因及解決方案
vue的rules驗(yàn)證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個(gè)特別的,那就是prop沒(méi)有寫全,導(dǎo)致驗(yàn)證某一個(gè)失效,接下來(lái)就跟小編一起來(lái)看看這個(gè)失效的原因和解決方案吧2023-11-11解決vue單頁(yè)面應(yīng)用進(jìn)入頁(yè)面加載所有 js 的問(wèn)題
這篇文章主要介紹了解決vue單頁(yè)面應(yīng)用進(jìn)入頁(yè)面加載所有 js 的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue中v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒(méi)改變的解決方案
這篇文章主要介紹了vue中v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒(méi)改變的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06