【譯】Proxy及其優勢

劉小夕發表於2019-08-05

翻譯:劉小夕

原文連結:devinduct.com/blogpost/36…

更多文章可戳: github.com/YvetteLau/B…

什麼是 Proxy

通常,當談到JavaScript語言時,我們討論的是ES6標準提供的新特性,本文也不例外。 我們將討論JavaScript代理以及它們的作用,但在我們深入研究之前,我們先來看一下Proxy的定義是什麼。

MDN上的定義是:代理物件是用於定義基本操作的自定義行為(例如,屬性查詢,賦值,列舉,函式呼叫等)。

換句話說,我們可以說代理物件是我們的目標物件的包裝器,我們可以在其中操縱其屬性並阻止對它的直接訪問。 你可能會發現將它們應用到實際程式碼中很困難,我鼓勵你仔細閱讀這個概念,它可能會改變你的觀點。

術語

handler

包含陷阱(traps)的佔位符物件。

traps

提供屬性訪問的方法。這類似於作業系統中捕獲器的概念。

target

代理虛擬化的物件。(由代理物件包裝和操作的實際物件)

在本文中,我將為 getset 陷阱 提供簡單的用例,考慮到最後,我們將看到如何使用它們幷包含更復雜的功能,如API。

語法和用例

let p = new Proxy(target, handler);
複製程式碼

將目標和處理程式傳遞給Proxy建構函式,這樣就建立了一個proxy物件。現在,讓我們看看如何利用它。為了更清楚地看出Proxy的好處,首先,我們需要編寫一些沒有它的程式碼。

想象一下,我們有一個帶有幾個屬性的使用者物件,如果屬性存在,我們想要列印使用者資訊,如果不存在,則丟擲異常。在不使用代理物件時,判斷屬性值是否存在的程式碼也放在了列印使用者資訊的函式,即 printUser 中(這並不是我們所希望的),如下demo所示:

let user = {
    name: 'John',
    surname: 'Doe'
};

let printUser = (property) => {
    let value = user[property];
    if (!value) {
        throw new Error(`The property [${property}] does not exist`);
    } else {
        console.log(`The user ${property} is ${value}`);
    }
}

printUser('name'); // 輸出: 'The user name is John'
printUser('email'); // 丟擲錯誤: The property [email] does not exist
複製程式碼

get

通過檢視上面的程式碼,你會發現:將條件和異常移到其他地方,而printUser中僅關注顯示使用者資訊的實際邏輯會更好。這是我們可以使用代理物件的地方,讓我們更新一下這個例子。

let user = {
    name: 'John',
    surname: 'Doe'
};

let proxy = new Proxy(user, {
    get(target, property) {
        let value = target[property];
        if (!value) {
            throw new Error(`The property [${property}] does not exist`);
        }
        return value;
    }
});

let printUser = (property) => {
    console.log(`The user ${property} is ${proxy[property]}`);
};

printUser('name'); // 輸出: 'The user name is John'
printUser('email'); // 丟擲錯誤: The property [email] does not exist
複製程式碼

在上面的示例中,我們包裝了 user 物件,並設定了一個 get 方法。 此方法充當攔截器,在返回值之前,會首先對屬性值進行檢查,如果不存在,則丟擲異常。

輸出與第一種情況相同,但此時 printUser 函式專注於邏輯,只處理訊息。

set

代理可能有用的另一個例子是屬性值驗證。在這種情況下,我們需要使用 set 方法,並在其中進行驗證。例如,當我們需要確保目標型別時,這是一個非常有用的鉤子。我們來看一下實際使用:

let user = new Proxy({}, {
    set(target, property, value) {
        if (property === 'name' && Object.prototype.toString.call(value) !== '[object String]') { // 確保是 string 型別
            throw new Error(`The value for [${property}] must be a string`);
        };
        target[property] = value;
    }
});

user.name = 1; // 丟擲錯誤: The value for [name] must be a string
複製程式碼

這些是相當簡單的用例,以下場景,proxy均可以派上用場:

  • 格式化
  • 價值和型別修正
  • 資料繫結
  • 除錯
  • ...

現在是時候建立一個更復雜的用例了。

具有代理的API - 更復雜的示例

通過使用簡單用例中的知識,我們可以建立一個API包裝器,以便在我們的應用程式中使用。 當前只支援 getpost 請求,但它可以很容易地擴充套件。程式碼如下所示。

const api = new Proxy({}, {
    get(target, key, context) {
        return target[key] || ['get', 'post'].reduce((acc, key) => {
            acc[key] = (config, data) => {

                if (!config && !config.url || config.url === '') throw new Error('Url cannot be empty.');
                let isPost = key === 'post';

                if (isPost && !data) throw new Error('Please provide data in JSON format when using POST request.');

                config.headers = isPost ? Object.assign(config.headers || {}, { 'content-type': 'application/json;chartset=utf8' }) :
                    config.headers;

                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest();
                    xhr.open(key, config.url);
                    if (config.headers) {
                        Object.keys(config.headers).forEach((header) => {
                            xhr.setRequestHeader(header, config.headers[header]);
                        });
                    }
                    xhr.onload = () => (xhr.status === 200 ? resolve : reject)(xhr);
                    xhr.onerror = () => reject(xhr);
                    xhr.send(isPost ? JSON.stringify(data) : null);
                });
            };
            return acc;
        }, target)[key];
    },
    set() {
        throw new Error('API methods are readonly');
    },
    deleteProperty() {
        throw new Error('API methods cannot be deleted!');
    }
});
複製程式碼

讓我們解釋一下簡單實現,setdeleteProperty。 我們新增了一個保護級別,並確保每當有人意外或無意地嘗試為任何API屬性設定新值時,都會丟擲異常。

每次嘗試刪除屬性時都會呼叫 deleteProperty 方法。可以確保沒有人可以從我們的代理(即此處的 api)中刪除任何屬性,因為通常我們都不想丟失API方法。

get 在這裡很有趣,它做了幾件事。target 是一個空物件,get 方法將在第一次有人使用 api 時建立所有方法(如當前的 getpost請求),在 reduce 回撥中,我們根據提供的配置執行API規範所需的驗證和檢查。在此示例中,我們不允許空URL和釋出請求而不提供資料。這些檢查可以擴充套件和修改,但重要的是我們只能在這一個地方集中處理。

reduce 僅在第一次API呼叫時完成,之後都會跳過整個 reduce 程式,get 只會執行預設行為並返回屬性值,即API處理程式。每個處理程式返回一個Promise物件,負責建立請求並呼叫服務。

使用:

api.get({
    url: 'my-url'
}).then((xhr) => {
    alert('Success');
}, (xhr) => {
    alert('Fail');
});
複製程式碼
delete api.get; //throw new Error('API methods cannot be deleted!'); 
複製程式碼

結論

當您需要對資料進行更多控制時,代理可以派上用場。你可以根據受控規則擴充套件或拒絕對原始資料的訪問,從而監視物件並確保正確行為。

如果您喜歡這篇文章,請關注我的公眾號。可以在下面的評論部分中表達您的想法。

謝謝各位小夥伴願意花費寶貴的時間閱讀本文,如果本文給了您一點幫助或者是啟發,請不要吝嗇你的贊和Star,您的肯定是我前進的最大動力。github.com/YvetteLau/B…

關注公眾號,加入技術交流群

【譯】Proxy及其優勢

相關文章