代理模式在vue中的使用示例解析
引言
當本體處于保護、緩存、虛擬或者過濾等情況下時，一個數(shù)據(jù)不適合被訪問或者一個方法不能被直接調用，可以采用代理模式，先創(chuàng)建一個代理（本體對象或者方法的替身），作為訪問者和本體之間的中介或者橋梁。
本體訪問和代理訪問的區(qū)別
不使用代理：訪問 ==> 本體
使用代理：訪問 ==> 代理 ==> 本體
1、圖片預加載
// 本體
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( '預加載的圖片' );
img.src = src;
}
}
})();
以上是本體和代理，都有相同的接口setSrc，有以下兩種訪問方式：
- 直接訪問本體
myImage.setSrc("目標圖片地址")
如果網(wǎng)速不太好，直接訪問本體，那么會出現(xiàn)圖片一截一截出現(xiàn)的情況。
- 訪問代理對象
proxyImage.setSrc("目標圖片地址")
如果網(wǎng)速不太好，可以先顯示默認的loading圖，給用戶以預期。當目標圖片加載完成的時候，再將當前的loading圖換成目標圖片地址。
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的乘積，如果再次計算會再次進行計算，如果數(shù)據(jù)量比較大的話，會重復計算；
- 代理計算乘積
console.log(proxyMult( 1, 2, 3, 4 )); // 24
第一次計算會計算出24的乘積，并將其存到cache中，如cache["1,2,3,4"] = 24,第二次計算的時候，發(fā)現(xiàn)cache中有鍵為"1,2,3,4"的乘積，無需重復計算，直接返回。
3、跨域代理
在日常開發(fā)vue項目的過程中，會和后端進行接口的聯(lián)調。
如果我們直接訪問后端接口，可能會出現(xiàn)跨域的問題。
我們可以通過配置webpack的devServer配置，先訪問本地的代理服務器，代理服務器去訪問后端服務器。因為，服務器訪問服務器沒有跨域的說法，所以，通過本地代理服務器作為中介，我們就實現(xiàn)了前端訪問后端接口的目的。
總結
在代理模式中本體和代理有著相同的訪問接口或者執(zhí)行后有同樣的效果，那么，開發(fā)前無需刻意進行代理模式的預測，當需要的時候再去對本體進行代理功能的編寫。根據(jù)功能的不同，代理模式又可分為，緩存代理、防火墻代理、保護代理和跨域代理等模式。
以上就是代理模式在vue中的使用示例解析的詳細內容，更多關于vue 代理模式的資料請關注腳本之家其它相關文章！
相關文章
Elementui?el-input輸入框校驗及表單校驗實例代碼
輸入框是使用非常多的元素,用來輸入用戶名、密碼等等信息,Element提供了功能和樣式豐富的輸入框,下面這篇文章主要給大家介紹了關于Elementui?el-input輸入框校驗及表單校驗的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue祖孫組件如何實現(xiàn)傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決
這篇文章主要介紹了在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
淺談vue的iview列表table render函數(shù)設置DOM屬性值的方法
下面小編就為大家?guī)硪黄獪\談vue的iview列表table render函數(shù)設置DOM屬性值的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了關于elementUI select控件綁定多個值(對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了詳解vue-cli中配置sass ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本文主要介紹了vue中watch監(jiān)聽不到變化的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
本文主要介紹了vue2實現(xiàn)傳送門效果的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04