【譯】Proxy及其優點

翻譯：劉小夕

原文連接：devinduct.com/blogpost/36…

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

什麼是 Proxy

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

MDN上的定義是：代理對象是用於定義基本操做的自定義行爲（例如，屬性查找，賦值，枚舉，函數調用等）。

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

術語

handler

包含陷阱（traps）的佔位符對象。

traps

提供屬性訪問的方法。這相似於操做系統中捕獲器的概念。

target

代理虛擬化的對象。(由代理對象包裝和操做的實際對象)

在本文中，我將爲 get 和 set 陷阱 提供簡單的用例，考慮到最後，咱們將看到如何使用它們幷包含更復雜的功能，如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包裝器，以便在咱們的應用程序中使用。 當前只支持 get 和 post 請求，但它能夠很容易地擴展。代碼以下所示。

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!');
    }
});
複製代碼

讓咱們解釋一下簡單實現，set 和 deleteProperty。 咱們添加了一個保護級別，並確保每當有人意外或無心地嘗試爲任何API屬性設置新值時，都會拋出異常。

每次嘗試刪除屬性時都會調用 deleteProperty 方法。能夠確保沒有人能夠從咱們的代理(即此處的 api)中刪除任何屬性，由於一般咱們都不想丟失API方法。

get 在這裏頗有趣，它作了幾件事。target 是一個空對象，get 方法將在第一次有人使用 api 時建立全部方法(如當前的 get 和 post請求)，在 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…

關注公衆號，加入技術交流羣