VUE 未來代理操作：ES6 Proxy代理

GeekQiaQia發表於2019-04-11
Vue

ES6 新特性：Proxy

功能：類似於設計模式中的代理模式，Proxy 物件用於定義基本操作的自定義行為（如屬性查詢，賦值，列舉，函式呼叫等）。；

機制：當訪問目標代理物件的時候，Proxy可以對外界的訪問進行攔截過濾或者進行一些非核心邏輯處理；

優點：由代理物件的Handle,來處理非核心邏輯；example:get某些屬性之前，進行操作記錄日誌，或者set代理物件的屬性之前，進行某種規則的校驗，或者訪問許可權控制等邏輯處理；

可以讓物件只需關注於核心邏輯，達到關注點分離，降低物件複雜度等目的。

let p=new Proxy(target,handler);

引數：

	target： 用Proxy 包裝的被代理物件,ps:可以為任何型別的物件；包括函式、原生陣列，或者另外一個物件；

    handler： 是一個物件，宣告瞭代理target的一些操作，屬性是當執行一個操作時，定義代理的行為的邏輯函式；包含陷阱（traps）的佔位符物件。
     
	traps：提供屬性訪問的方法。這類似於作業系統中陷阱的概念。

p 是代理後的物件，當外界每次對P進行操作時，就會執行handle 物件上的方法；  	
複製程式碼

hangdler：代理方法：

handler.apply()
handler.construct()
handler.defineProperty()
handler.deleteProperty()
handler.enumerate()
handler.get()
handler.getOwnPropertyDescriptor()
handler.getPrototypeOf()
handler.has()
handler.isExtensible()
handler.ownKeys()
handler.preventExtensions()
handler.set()
handler.setPrototypeOf()
複製程式碼

舉例:在進行代理物件的屬性set 之前，進行校驗規則處理：

let validator = {
      set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
    throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
    throw new RangeError('The age seems invalid');
      }
    }
    
    // The default behavior to store the value
    obj[prop] = value;
      }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age); 
// 100

person.age = 'young'; 
// 丟擲異常: Uncaught TypeError: The age is not an integer

person.age = 300; 
// 丟擲異常: Uncaught RangeError: The age seems invalid
複製程式碼

developer.mozilla.org/zh-CN/docs/…

相關文章