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