快捷導(dǎo)航

代理模式在vue中的使用示例解析

更新時(shí)間：2022年12月22日 09:58:03 作者：qb

這篇文章主要為大家介紹了代理模式在vue中的使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

當(dāng)本體處于保護(hù)、緩存、虛擬或者過濾等情況下時(shí)，一個(gè)數(shù)據(jù)不適合被訪問或者一個(gè)方法不能被直接調(diào)用，可以采用代理模式，先創(chuàng)建一個(gè)代理（本體對(duì)象或者方法的替身），作為訪問者和本體之間的中介或者橋梁。

本體訪問和代理訪問的區(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)速不太好，直接訪問本體，那么會(huì)出現(xiàn)圖片一截一截出現(xià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 ); 
    } 
})();

以上是本體和代理，都可以通過傳遞參數(shù)計(jì)算乘積，有以下兩種訪問方式：

本體計(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)目的過程中，會(huì)和后端進(jìn)行接口的聯(lián)調(diào)。

如果我們直接訪問后端接口，可能會(huì)出現(xiàn)跨域的問題。

我們可以通過配置webpack的devServer配置，先訪問本地的代理服務(wù)器，代理服務(wù)器去訪問后端服務(wù)器。因?yàn)椋?wù)器訪問服務(wù)器沒有跨域的說(shuō)法，所以，通過本地代理服務(wù)器作為中介，我們就實(shí)現(xiàn)了前端訪問后端接口的目的。

總結(jié)

在代理模式中本體和代理有著相同的訪問接口或者執(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)文章！

您可能感興趣的文章: