Javascript의 프록시 패턴

Proxy object를 사용하려면 다음과 같이 하십시오. một 값 가져오기 또는 một 값 설정.

이 객체person는 John Doe의 이름입니다.

const person = {
  name: "John Doe",
  age: 42,
  nationality: "American"
};

Thay vì tương tác trực tiếp với object này, tôi muốn tác với một proxy object . Trong javascript, tôi có thể tạo một proxy bằng cách sử dụng từ khóanew Proxy

const person = {
  name: "John Doe",
  age: 42,
  nationality: "American"
};

const personProxy = new Proxy(person, {});

Argument thứ 2 của proxy là một object đại diện được gọi là handler . 처리기 개체에서 처리기 개체를 처리할 수 있습니다. Mặc dù có nhiều methods mà tôi có thể thêm vào Proxy handler, 2 method phổ biến nhất là get 및 set:

get : được gọi khi cố gắng access một property

set được gọi khi muốn 수정 một 속성
Quy trình sẽ xảy ra như xau:

Thay vì tương tác trực tiếp với object person, tôi sẽ tác với personProxy .
다음은 proxyHandler 및 핸들러입니다. 속성을 수정할 때 프록시 방법set을 수정하고 프록시 값을 변경하여 속성 값을 변경합니다.
속성에 액세스하려면 속성, 방법get에 프록시, 프록시에 액세스하려면 속성에 키와 값이 포함되어 있습니다.

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${obj[prop]}`);
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    obj[prop] = value;
  }
});

Xem đoạn 코드는 dưới dây, điều gì sẽ xảy ra?

const person = {
  name: "John Doe",
  age: 42,
  nationality: "American"
};

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${obj[prop]}`);
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    obj[prop] = value;
    return true;
  }
});

personProxy.name; //The value of name is John Doe 
personProxy.age = 43; //Changed age from 42 to 43 

Khi 액세스name , 프록시 trả về một câu:The value of name is John Doekhi 수정age, 프록시 인Changed age from 42 to 43
Ngoài ra có thể bắt các validation của 메소드 프록시

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    if (!obj[prop]) {
      console.log(
        `Hmm.. this property doesn't seem to exist on the target object`
      );
    } else {
      console.log(`The value of ${prop} is ${obj[prop]}`);
    }
  },
  set: (obj, prop, value) => {
    if (prop === "age" && typeof value !== "number") {
      console.log(`Sorry, you can only pass numeric values for age.`);
    } else if (prop === "name" && value.length < 2) {
      console.log(`You need to provide a valid name.`);
    } else {
      console.log(`Changed ${prop} from ${obj[prop]} to ${value}.`);
      obj[prop] = value;
    }
  }
});

Hãy xem đoạn code dưới day, điều gì sẽ xảy ra?

const person = {
  name: "John Doe",
  age: 42,
  nationality: "American"
};

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    if (!obj[prop]) {
      console.log(`Hmm.. this property doesn't seem to exist`);
    } else {
      console.log(`The value of ${prop} is ${obj[prop]}`);
    }
  },
  set: (obj, prop, value) => {
    if (prop === "age" && typeof value !== "number") {
      console.log(`Sorry, you can only pass numeric values for age.`);
    } else if (prop === "name" && value.length < 2) {
      console.log(`You need to provide a valid name.`);
    } else {
      console.log(`Changed ${prop} from ${obj[prop]} to ${value}.`);
      obj[prop] = value;
    }
    return true;
  }
});

personProxy.nonExistentProperty; //Hmm.. this property doesn't seem to exist
personProxy.age = "44"; //Sorry, you can only pass numeric values for age. 
personProxy.name = ""; //You need to provide a valid name. 

Proxy made sure tôi không sủa đổi object person với các value không hợp lệ, điều này giúp tôi giữ cho dữ liệu của tôi tinh khiết(데이터 순수)
비추다
Js cung cấp một object gọi là Reflect, giúp tôi thao tác với đối tượng đích dễ dàng hơn khi làm việc với proxy.
이 경우 수정 및 액세스 속성이 프록시 객체로 변경되어 get , set {}에 액세스할 수 있습니다. 지금까지 Reflect를 사용하세요. 메서드 trên Reflect có cùng tên với các 메서드 trên object đang xử lý.
Thay vì 액세스 속성 thông qua obj[prop] , tôi có thể 액세스 hoặc 수정 속성 thông qua Reflect.get() 및 Reflect.set() . Các 방법 nhận các 인수 dưới dạng 방법 trên 핸들 obejct.

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`);
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    Reflect.set(obj, prop, value);
  }
});

Hãy xem đoạn code dưới dây:

const person = {
  name: "John Doe",
  age: 42,
  nationality: "American"
};

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`);
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    return Reflect.set(obj, prop, value);
  }
});

personProxy.name; //The value of name is John Doe 
personProxy.age = 43; //The value of name is John Doe 
personProxy.name = "Jane Doe"; //The value of name is John Doe 

프록시는 객체의 동작을 제어합니다. 대부분의 프록시는 유효성 검사, 서식 지정, 알림, 디버깅을 지원하지 않습니다.
프록시는 앱의 성능을 향상시키기 위해 핸들러 메서드를 사용합니다. Tốt nhất cũng không nên sử dụng 프록시 cho các đoạn 코드 quan trọng về hiệu suất.