객체 나 배열에서 값을 제어 할 수있는 상황이 있습니까? 어쩌면 특정 유형의 데이터를 차단하고 데이터를 객체에 저장하기 전에 데이터를 검증하기를 원할 수도 있습니다. 들어오는 데이터 나 심지어 나가는 데이터에 어떤 식 으로든 반응하고 싶습니까? 예를 들어, 데이터가 변경되므로 결과를 표시하여 DOM을 업데이트하거나 스타일을 변경하는 클래스를 스왑하려고합니다. Vue 또는 React와 같은 프레임 워크의 기능 만 필요하지만 새로운 앱을 시작하고 싶지 않은 간단한 페이지 아이디어 나 부분을 작업하고 싶었던 적이 있습니까?
그러면 JavaScript 프록시가 정확히 필요한 것일 수 있습니다!
먼저 성명서를 작성하겠습니다. 저는 프론트 엔드 기술 에서 더 많은 UI 개발자가 설명되어 있습니다. 브라우저에서 일관된 아름다운 프로젝트 만 만들고 모든 관련 기능을 갖고 싶습니다. 따라서 순수한 JavaScript 기능에 관해서는 더 깊어지지 않는 경향이 있습니다.
그러나 나는 여전히 연구를 좋아하고 항상 새로운 학습 목록에 추가 할 무언가를 찾고 있습니다. JavaScript Proxy는 흥미로운 주제입니다. 기본 사항을 되돌아 보면이 기능을 활용하는 방법에 대한 많은 가능성을 열어주기 때문입니다. 그럼에도 불구하고 언뜻보기에 코드는 빠르게 무거워 질 수 있습니다. 물론, 그것은 모두 당신의 요구에 달려 있습니다.
프록시 객체의 개념은 꽤 오랫동안 주변에있었습니다. 내 연구에서 나는 몇 년 전부터 참고 문헌을 찾을 수 있습니다. 그러나 Internet Explorer에서는 지원되지 않았기 때문에 내 목록에서는 높지 않습니다. 이에 비해 수년에 걸쳐 다른 모든 브라우저에서 훌륭하게 지원되었습니다. 프록시가 최신 VUE 프로젝트에 사용되기 때문에 VUE 3이 Internet Explorer 11과 호환되지 않는 이유 중 하나입니다.
그렇다면 프록시 객체는 정확히 무엇입니까?
MDN은 프록시 객체를 다음과 같이 설명합니다.
[…] 해당 객체의 기본 작업을 가로 채고 재정의하는 다른 객체에 대한 프록시를 만들 수 있습니다.
일반적인 아이디어는 객체를 사용할 때 발생하는 일반적인 동작을 제어 할 수있는 기능을 갖춘 객체를 만들 수 있다는 것입니다. 가장 일반적인 두 가지는 객체에 저장된 값을 얻고 설정하는 것입니다.
const myobj = {
Mykey : '가치'
}
console.log (myobj.mykey);
myobj.mykey = '업데이트'; // "KEY의 값을 '업데이트'합니다.따라서 프록시 객체에서 이러한 작업을 가로 채고 달성하고자하는 기능을 수행하기 위해 "트랩"을 생성합니다. 그러한 함정이 최대 13 개가 있습니다. 나는이 함정을 모두 다루는 것은 아닙니다. 아래의 모든 함정을 아래에 제공하는 간단한 예제에 필요한 것은 아닙니다. 다시 말하지만, 그것은 컨텐츠를 만드는 특정 컨텍스트에 필요한 것에 달려 있습니다. 나를 믿으십시오. 단지 기본 사항을 마스터하는 것은 먼 길을 갈 수 있습니다.
위의 예제를 확장하여 프록시를 만들려면 다음을 수행합니다.
const myobj = {
Mykey : '가치'
}
const handler = {
get : function (target, prop) {
반환 대상 [prop];
},
설정 : 함수 (대상, 소품, 값) {
대상 [prop] = 값;
진실을 반환하십시오.
}
}
const proxy = 새로운 프록시 (myobj, handler);
console.log (proxy.mykey);
proxy.mykey = '업데이트';먼저 표준 객체부터 시작하겠습니다. 그런 다음 일반적으로 트랩으로 알려진 핸들러 기능을 보유하는 핸들러 객체를 만듭니다. 이 경우 전통적인 객체,이 경우에는 변경없이 콘텐츠를 전달하는 동작을 나타냅니다. 그런 다음 대상 객체 및 핸들러 객체가있는 생성자를 사용하여 프록시를 만듭니다. 당시 프록시 객체를 참조하여 원래 대상 객체 MyOBJ의 프록시가 될 값을 얻고 설정할 수 있습니다.
세트 트랩의 끝에서 True를 기록하십시오. 이것은 설정 값이 성공적으로 간주되어야한다는 것을 프록시에게 알리기위한 것입니다. 경우에 따라 설정 값 설정을 방지하려면 (확인 오류를 고려) False를 반환해야합니다. 또한 콘솔 오류가 발생하고 TypeError를 출력합니다.
이제이 패턴을 기억해야 할 한 가지는 원래 대상 객체를 사용할 수 있다는 것입니다. 즉, 프록시를 우회하고 프록시를 사용하지 않고 객체 값을 변경할 수 있습니다. 프록시 객체 사용에 대해 읽는 동안이 문제에 도움이되는 몇 가지 유용한 패턴을 발견했습니다.
myobj = {
Mykey : '가치'
}
const handler = {
get : function (target, prop) {
반환 대상 [prop];
},
설정 : 함수 (대상, 소품, 값) {
대상 [prop] = 값;
진실을 반환하십시오.
}
}
myobj = 새로운 프록시 (myobj, handler);
console.log (myobj.mykey);
myobj.mykey = '업데이트'; // "KEY의 값을 '업데이트'합니다.이 모드에서는 대상 객체를 프록시 생성자의 대상 객체를 참조하는 동안 대상 객체를 프록시 객체로 사용합니다. 네, 그게 다야. 이것은 작동하지만 무슨 일이 일어나고 있는지 혼동하기가 쉽습니다. 프록시 생성자에서 대상 객체를 만들어 봅시다.
const handler = {
get : function (target, prop) {
반환 대상 [prop];
},
설정 : 함수 (대상, 소품, 값) {
대상 [prop] = 값;
진실을 반환하십시오.
}
}
const 프록시 = 새로운 프록시 ({
Mykey : '가치'
}, 핸들러);
console.log (proxy.mykey);
proxy.mykey = '업데이트';실제로 원하는 경우 생성자에 대상 객체 및 핸들러 객체를 만들 수 있습니다.
const 프록시 = 새로운 프록시 ({
Mykey : '가치'
}, {
get : function (target, prop) {
반환 대상 [prop];
},
설정 : 함수 (대상, 소품, 값) {
대상 [prop] = 값;
진실을 반환하십시오.
}
});
console.log (proxy.mykey);
proxy.mykey = '업데이트';실제로 이것은 아래 예제에서 가장 자주 사용하는 패턴입니다. 고맙게도 프록시 객체를 만드는 방법은 유연합니다. 자신에게 맞는 모드 만 사용하십시오.
다음은 기본 데이터 유효성 검사에서 Fetch 사용, 폼 데이터 업데이트에 이르기까지 JavaScript 프록시 사용을 다루는 몇 가지 예입니다. 이 예는 JavaScript 프록시의 기본 사항을 다루고 있습니다. 경우에 따라 프록시 오브젝트에서 정기적 인 JavaScript 코드를 작성하여 정기적 인 JavaScript 작업을 수행합니다. 데이터를 더 많이 제어하여 일반적인 JavaScript 작업을 확장하는 방법으로 생각하십시오.
나의 첫 번째 예는 내가 항상 생각한 것을 다소 간단하고 이상한 코딩 인터뷰 질문 : 문자열을 반전시키는 것을 다룹니다. 나는이 질문을 좋아하지 않았으며 인터뷰 중에이 질문을 한 적이 없습니다. 이런 종류의 현재에 반대하는 것을 좋아하는 사람으로서 나는 비 전통적인 솔루션을 시도했습니다. 당신은 때때로 재미를 위해 때때로 그것을 던지기 위해, 솔루션 중 하나는 훌륭한 프론트 엔드 재미입니다. 또한 프록시 사용 방법을 보여주는 간단한 예제를 제공합니다.
입력을 입력하면 유형이 아래의 역방향으로 인쇄되어 있음을 알 수 있습니다. 분명히, 사용할 수있는 줄을 뒤집는 방법에는 여러 가지가 있습니다. 그러나 나의 이상한 반전 방법을 살펴 보겠습니다.
const reverse = 새로운 프록시 (
{
값: ''
},
{
설정 : 함수 (대상, 소품, 값) {
대상 [prop] = 값;
document.querySelectorall ( '[data-reverse]'). foreach (item => {
el = document.createelement ( 'div');
el.innerhtml = '\ u {202e}'value;
item.innertext = el.innerhtml;
});
진실을 반환하십시오.
}
}
))
document.querySelector ( 'input'). addeventListener ( '입력', e => {
Reverse.value = e.target.value;
});먼저 새 프록시를 만듭니다. 대상 객체는 입력에 입력 한 것을 보유하는 단일 키 값입니다. Get Trap은 존재하지 않습니다. 왜냐하면 우리는 그것을 바인딩 할 실제 기능이 없기 때문에 간단한 통과 만 필요하기 때문입니다. 이 경우 아무것도 필요하지 않습니다. 나중에 이것에 대해 논의 할 것입니다.
세트 트랩의 경우 수행 할 기능이 있습니다. 평소와 같이 대상 객체의 값 키로 값이 설정되는 간단한 통과가 여전히 있습니다. 그런 다음 데이터 반대 데이터 속성이있는 페이지의 모든 요소를 찾는 QuerySelectorall이 있습니다. 이를 통해 한 번에 페이지의 여러 요소를 찾아 업데이트 할 수 있습니다. 이것은 우리 모두가 좋아하는 프레임 워크와 같은 바인딩 작업을 제공합니다. 이것은 또한 적절한 양방향 바인딩 유형의 경우 위치 입력으로 업데이트 될 수 있습니다.
이곳은 현악기를 뒤집는 기발한 방식이 시작됩니다. div는 메모리에서 생성 된 다음 String으로 요소의 내부 html로 업데이트됩니다. 문자열의 첫 번째 부분은 특수 유니 코드 소수점 코드를 사용하여 실제로 모든 것을 뒤로 역전시켜 오른쪽에서 왼쪽으로 만듭니다. 그런 다음 페이지의 실제 요소의 내부 텍스트는 Memory Div의 내부 html을 얻습니다. 이것은 입력에 무언가를 입력 할 때마다 실행되므로 데이터 반대 속성이있는 모든 요소가 업데이트됩니다.
마지막으로, 입력 값 (즉, 이벤트 대상)에 의해 대상 객체의 값 키를 설정하는 입력에 이벤트 리스너를 설정합니다.
마지막으로, 값을 객체로 설정하여 페이지의 DOM에서 부작용을 실행하는 매우 간단한 예입니다.
일반적인 UI 패턴은 입력 값을 문자 및 숫자 문자열보다 더 정확한 시퀀스로 포맷하는 것입니다. 이것의 예는 전화 입력입니다. 때로는 타이핑 된 전화 번호가 전화 번호처럼 보이면 보이고 기분이 좋아집니다. 그러나 트릭은 입력 값을 형식화 할 때 여전히 형식화되지 않은 버전의 데이터가 필요할 수 있다는 것입니다.
이것은 JavaScript 프록시의 쉬운 작업입니다.
입력에 숫자를 입력하면 표준 미국 전화 번호로 형식화됩니다 (예 : (123) 456-7890). 위의 리버스 스트링 예제와 마찬가지로 전화 번호는 일반 텍스트의 입력 아래에 표시됩니다. 이 버튼은 형식화 된 데이터의 데이터 및 비 형식 버전을 콘솔에 출력합니다.
따라서 프록시 코드는 다음과 같습니다.
const phone = 새로운 프록시 (
{
_깨끗한: '',
숫자: '',
get clean () {
reply._clean;
}
},
{
get : function (target, prop) {
if (! prop.startswith ( '_')) {
반환 대상 [prop];
} 또 다른 {
'입장을 찾을 수 없습니다!'
}
},
설정 : 함수 (대상, 소품, 값) {
if (! prop.startswith ( '_')) {
target._clean = value.replace (/\ d/g, '') .substring (0, 10);
const 섹션 = {
영역 : target._clean.substring (0, 3),
접두사 : target._clean.substring (3, 6),
라인 : target._clean.substring (6, 10)
}
대상 .number =
target._clean.length> 6? ($ {sections.area}) $ {sections.prefix}-$ {sections.line}`:
target._clean.length> 3?
target._clean.length> 0?
document.querySelectorall ( '[data-phone_number]'). foreach (item => {
if (item.tagname === 'input') {
item.value = target.number;
} 또 다른 {
item.innertext = target.number;
}
});
진실을 반환하십시오.
} 또 다른 {
거짓을 반환합니다.
}
}
}
);이 예에는 더 많은 코드가 있으므로 해체하겠습니다. 첫 번째 부분은 프록시에서 내부적으로 초기화하는 대상 객체입니다. 세 가지 측면이 있습니다.
{
_깨끗한: '',
숫자: '',
get clean () {
reply._clean;
}
},첫 번째 키 _clean은 데이터의 데이터 버전을 보유하는 변수입니다. 전통적인 변수 명명 패턴으로 시작하여 "개인"으로 취급합니다. 우리는 정상적인 상황에서 사용할 수 없게 만들고 싶습니다. 우리가 더 깊이 갈수록, 우리는 이것을 더 소개 할 것입니다.
두 번째 키 번호는 단순히 형식의 전화 번호 값을 저장합니다.
세 번째 "키"는 이름이 깨끗한 get 함수입니다. 이것은 개인 _clean 변수의 값을 반환합니다. 이 경우 우리는 그 가치를 반환하지만, 이것은 우리가 원한다면 다른 작업을 수행 할 수있는 기회를 제공합니다. 이것은 프록시 게터의 프록시 게터와 같습니다. 이것은 이상하게 보일지 모르지만 데이터를 쉽게 제어 할 수있는 방법을 제공합니다. 특정 요구에 따라이 상황을 처리하는 상당히 간단한 방법이 될 수 있습니다. 여기에서 간단한 예제에 효과적이지만 추가 단계가 필요할 수 있습니다.
이제 프록시의 트랩입니다.
get : function (target, prop) {
if (! prop.startswith ( '_')) {
반환 대상 [prop];
} 또 다른 {
'입장을 찾을 수 없습니다!'
}
},먼저, 들어오는 소품 또는 객체 키를 확인하여 밑줄로 시작 하지 않는지 확인합니다. 밑줄로 시작하지 않으면 반품하면됩니다. 밑줄로 시작하면 항목을 찾을 수 없음을 나타내는 문자열을 반환합니다. 이러한 유형의 음수 반환은 필요에 따라 다른 방식으로 처리 할 수 있습니다. 문자열을 반환하거나 오류를 반환하거나 부작용이 다른 코드를 실행합니다. 그것은 전적으로 특정 상황에 달려 있습니다.
내 예에서 주목해야 할 한 가지는 프록시의 개인 변수로 간주되는 것과 함께 사용될 수있는 다른 프록시 트랩을 다루지 않는다는 것입니다. 이 데이터를보다 완전하게 보호하려면 [defineproperty] ( //m.sbmmt.com/link/cd69510f4a69bc0ef6ba504331b9d546 또는 onskeys와 같은 다른 함정을 고려해야합니다 y.하지만 다른 사람이라면 가능한 많은 콘텐츠를 잠그는 것을 고려할 수 있습니다.
이제이 예에서 대부분의 마법이 발생하는 곳입니다.
설정 : 함수 (대상, 소품, 값) {
if (! prop.startswith ( '_')) {
target._clean = value.replace (/\ d/g, '') .substring (0, 10);
const 섹션 = {
영역 : target._clean.substring (0, 3),
접두사 : target._clean.substring (3, 6),
라인 : target._clean.substring (6, 10)
}
대상 .number =
target._clean.length> 6? ($ {sections.area}) $ {sections.prefix}-$ {sections.line}`:
target._clean.length> 3?
target._clean.length> 0?
document.querySelectorall ( '[data-phone_number]'). foreach (item => {
if (item.tagname === 'input') {
item.value = target.number;
} 또 다른 {
item.innertext = target.number;
}
});
진실을 반환하십시오.
} 또 다른 {
거짓을 반환합니다.
}
}먼저 프록시의 개인 변수에 대해 동일한 점검을 수행하십시오. 나는 실제로 다른 유형의 소품을 테스트하지는 않지만 여기서이 작업을 수행하는 것을 고려하고 싶을 수도 있습니다. 프록시 대상 객체의 숫자 키 만 조정할 것이라고 가정합니다.
전달 된 값 (입력 된 값)은 숫자 문자를 제외한 모든 것을 벗겨 내고 _clean 키로 저장합니다. 그런 다음이 값은 프로세스 전체에서 형식의 값으로 재구성하기 위해 사용됩니다. 기본적으로 입력 할 때마다 전체 문자열이 예상 형식으로 실시간으로 재건됩니다. 기판 메소드는 숫자를 10 자리 숫자로 고정시킵니다.
그런 다음 미국 전화 번호의 고장에 따라 전화 번호의 다른 부분을 저장하기 위해 섹션 객체를 작성하십시오. _clean 변수의 길이가 증가함에 따라 그 당시보고 싶은 형식 패턴으로 숫자를 업데이트합니다.
QuerySelectorall은 Data-Phone_Number 데이터 속성이있는 모든 요소를 찾고 있으며 Foreach 루프를 통해 실행합니다. 요소가 값을 업데이트하기위한 입력 인 경우 다른 요소의 내부 텍스트가 업데이트됩니다. 이것이 텍스트가 입력 아래에 나타나는 방식입니다. 해당 데이터 속성에 다른 입력 요소를 배치하려면 해당 값이 실시간으로 업데이트됩니다. 이것은 요구 사항에 따라 일방 통행 또는 양방향 바인딩을 생성하는 방법입니다.
마지막으로, 모든 것이 잘 진행되고 있음을 프록시에게 알리려면 참으로 돌아 오십시오. 들어오는 소품 또는 키가 밑줄로 시작되면 False를 반환합니다.
마지막 으로이 작업을하는 이벤트 리스너 :
document.querySelectorall ( 'input [data-phone_number]'). foreach (item => {
item.addeventListener ( '입력', (e) => {
전화 .number = e.target.value;
});
});
document.querySelector ( '#get_data'). addEventListener ( 'click', (e) => {
Console.log (전화 .number);
Console.log (전화); // 1234567890
});첫 번째 그룹은 특정 데이터 속성으로 모든 입력을 찾고 이벤트 리스너를 추가합니다. 각 입력 이벤트에 대해 프록시 번호 키 값은 현재 입력 된 값으로 업데이트됩니다. 입력 값을 보낼 때마다 입력 값을 포맷하므로 숫자가 아닌 문자를 삭제합니다.
출력을 검색하는 두 번째 버튼 세트는 두 세트의 데이터 세트 (필요에 따라)와 콘솔로 출력합니다. 이것은 요구에 따라 필요한 데이터를 요청하기 위해 코드를 작성하는 방법을 보여줍니다. 바라건대, 폰 .Clean은 대상 객체에서 프록시 get 함수를 참조하고있는 것이 분명합니다. Phone.clean ()과 같은 함수로 호출되지 않습니다. 프록시에서 Get 프록시 역할을하기 때문입니다.
배열을 대상 대상 대상 대상 대상으로 사용할 수 있습니다. 배열이되므로 고려해야 할 사항이 몇 가지 있습니다. 배열 (푸시 ()와 같은)의 기능은 프록시의 세터 트랩에서 어떻게 든 처리됩니다. 또한이 경우 대상 객체 개념에서 사용자 정의 함수를 만드는 것은 실제로 작동하지 않습니다. 그러나 배열과 대상과 관련하여 유용한 것들이 있습니다.
물론 배열에 숫자를 저장하는 것은 새로운 것이 아닙니다. 확실히. 그러나 중복 값을 허용하지 않고 숫자 만 허용하는 것과 같은이 숫자 스토리지 배열에 일부 규칙이 추가됩니다. 또한 정렬, 합산, 평균화 및 청소와 같은 출력 옵션도 제공합니다. 그런 다음이 모든 것을 제어하는 작은 사용자 인터페이스를 업데이트하십시오.
다음은 프록시 객체입니다.
const 번호 = 새로운 프록시 ([],
{
get : function (target, prop) {
message.classlist.remove ( '오류');
if (prop === 'sort') return [... target] .sort ((a, b) => a -b);
if (prop === 'sum') return [... target] .reduce ((a, b) => ab);
if (prop === '평균') return [... target] .reduce ((A, B) => ab) / target.length;
if (prop === 'clear') {
message.innertext =`$ {target.length} 번호 $ {target.length === 1? '';
target.splice (0, target.length);
collection.innerText = 대상;
}
반환 대상 [prop];
},
설정 : 함수 (대상, 소품, 값) {
if (prop === 'length') true를 반환합니다.
datainput.value = '';
message.classlist.remove ( '오류');
if (! number.isinteger (value)) {
Console.error ( '제공된 데이터는 숫자가 아닙니다!');
message.innertext = '제공된 데이터는 숫자가 아닙니다!';
message.classlist.add ( 'error');
거짓을 반환합니다.
}
if (target.includes (value)) {
console.error (`숫자 $ {value}가 이미 제출되었습니다!`);
message.innertext =`번호 $ {value}가 이미 제출되었습니다!`;
message.classlist.add ( 'error');
거짓을 반환합니다.
}
대상 [prop] = 값;
collection.innerText = 대상;
message.innertext =`숫자 $ {value} 추가!`;
진실을 반환하십시오.
}
});이 예에서는 세터 트랩으로 시작하겠습니다.
가장 먼저해야 할 일은 길이 속성이 배열로 설정되어 있는지 확인하는 것입니다. 그것은 평범한 방법으로 일어날 수 있도록 TRUE를 반환합니다. 설정 길이에 반응 해야하는 경우 언제나 올바른 위치에 코드를 추가 할 수 있습니다.
다음 두 줄의 코드는 QuerySelector를 사용하여 페이지에 저장된 두 개의 HTML 요소를 나타냅니다. Datainput은 입력 요소이며 입력 할 때마다 지우려고합니다. 메시지는 배열 변경에 대한 응답을 보유하는 요소입니다. 오류 상태의 개념이 있으므로 입력 할 때마다 해당 상태가 아닌지 확인합니다.
첫 번째 if는 입력이 실제로 숫자인지 확인합니다. 그렇지 않다면 몇 가지를 수행합니다. 문제를 나타내는 콘솔 오류가 발생합니다. 메시지 요소는 동일한 진술을받습니다. 그런 다음 메시지는 CSS 클래스를 통해 오류 상태를 입력합니다. 마지막으로, False를 반환하여 에이전트가 자체 오류를 콘솔에 발행하게합니다.
두 번째 경우 입력이 이미 배열에 존재하는지 확인하십시오. 중복이있는 경우 첫 번째 IF가 발생하는 것과 동일한 메시지가 전달됩니다. 메시지 전달은 템플릿 리터럴이므로 중복 값을 볼 수 있기 때문에 약간 다릅니다.
마지막 부분은 모든 것이 잘 진행되고 계속 될 수 있다고 가정합니다. 값은 평소와 같이 설정된 다음 수집 목록을 업데이트합니다. 컬렉션은 페이지의 또 다른 요소를 나타냅니다.이 요소는 배열의 현재 숫자 모음을 보여줍니다. 마찬가지로 메시지는 추가 된 항목으로 업데이트됩니다. 마지막으로, 우리는 프록시에게 모든 것이 잘 진행되고 있음을 알리기 위해 True를 반환합니다.
이제 Get Trap은 이전 예와 약간 다릅니다.
get : function (target, prop) {
message.classlist.remove ( '오류');
if (prop === 'sort') return [... target] .sort ((a, b) => a -b);
if (prop === 'sum') return [... target] .reduce ((a, b) => ab);
if (prop === '평균') return [... target] .reduce ((A, B) => ab) / target.length;
if (prop === 'clear') {
message.innertext =`$ {target.length} 번호 $ {target.length === 1? '';
target.splice (0, target.length);
collection.innerText = 대상;
}
반환 대상 [prop];
},여기서 일어나는 것은 "소품"은 정상적인 배열 방법이 아니라는 것입니다. 예를 들어, 첫 번째 "소품"은이 이벤트 리스너에 의해 트리거됩니다.
DataSort.addeventListener ( 'Click', () => {
message.innerText = 숫자 .SORT;
});따라서 정렬 버튼을 클릭하면 메시지 요소의 내부 텍스트가 숫자로 반환 된 컨텐츠를 사용하여 업데이트됩니다. 비정형 배열 관련 결과에 대한 프록시 인터셉트로 작용하고 getters를 반환합니다.
메시지 요소의 잠재적 오차 상태를 삭제 한 후 비표준 배열 페치 작동이 발생할 것으로 예상되는지 결정합니다. 각 작업은 원래 배열을 변경하지 않고 원래 배열 데이터에서 작업을 반환합니다. 이는 대상의 확장 연산자를 사용하여 새 배열을 생성 한 다음 표준 배열 메소드를 사용하여 수행됩니다. 각 이름은 정렬, 합, 평균 및 명확한 일을 암시해야합니다. 글쎄, 청산은 표준 배열 방법이 아니지만 좋은 소리가납니다. 항목을 순서대로 정렬 할 수 있으므로 항목에서 정렬 된 목록을 제공하거나 수학적 기능을 수행 할 수 있습니다. 예상대로 배열을 지우는 것이 간단합니다.
버튼의 다른 이벤트 리스너는 다음과 같습니다.
dataform.addeventListener ( '제출', (e) => {
e.preventDefault ();
숫자 .push (number.parseint (datainput.value));
});
dataSubmit.addeventListener ( 'click', () => {
숫자 .push (number.parseint (datainput.value));
});
DataSort.addeventListener ( 'Click', () => {
message.innerText = 숫자 .SORT;
});
datasum.addeventListener ( 'click', () => {
message.innertext = numbers.sum;
});
dataaverage.addeventListener ( 'click', () => {
message.innertext = 숫자.
});
DataClear.addeventListener ( 'Click', () => {
숫자.
});여러 가지 방법으로 배열에 기능을 확장하고 추가 할 수 있습니다. 나는 끝까지 계산되는 음수 인덱스로 항목을 선택할 수있는 배열의 예를 보았습니다. 객체 내의 속성 값을 기반으로 객체 배열에서 항목을 찾으십시오. 배열에 존재하지 않는 값을 얻으려고 할 때 정의되지 않은 대신 메시지를 반환하십시오. 배열에 대한 대리를 활용하고 탐색 할 아이디어가 많이 있습니다.
주소 양식은 웹 페이지의 매우 표준적인 것입니다. 재미 (및 비표준) 확인을 위해 상호 작용을 추가합시다. 또한 단일 객체에서 양식 값에 대한 데이터 수집 역할을 할 수 있으며, 이는 주문형으로 요청할 수 있습니다.
다음은 프록시 객체입니다.
const model = 새로운 프록시 (
{
이름: '',
주소 1 : '',
주소 2 : '',
도시: '',
상태: '',
zip : '',
getData () {
반품 {
이름 :이. 이름 없음!
주소 1 : address1 ||
주소 2 : address2 ||
City : this.city ||
상태 : this.State ||
zip : zip ||
};
}
},
{
get : function (target, prop) {
반환 대상 [prop];
},
설정 : 함수 (대상, 소품, 값) {
대상 [prop] = 값;
if (prop === 'zip'&& value.length === 5) {
페치 (`https://api.zippopotam.us/us/$ {value}`)
.Then (응답 => response.json ())
. 그런데 (data => {
model.city = data.places [0] [ 'Place Name'];
document.querySelector ( '[data-model = "city"]'). value = target.city;
model.state = data.places [0] [ 'State Abbreviation'];
document.querySelector ( '[data-model = "state"]'). value = target.state;
});
}
document.querySelectorall (`[data-model = "$ {prop}"]`) .foreach (item => {
if (item.tagname === 'input'|| item.tagname === 'select') {
item.value = value;
} 또 다른 {
item.innertext = value;
}
})
진실을 반환하십시오.
}
}
);대상 객체는 매우 간단합니다. 각 항목은 양식에 입력됩니다. getData 함수는 객체를 반환하지만 속성 값이 빈 문자열이라면 "항목 없음"으로 변경되지만이 기능은 프록시 객체의 상태를 얻는 것보다 더 명확한 객체를 제공합니다.
Getter 기능은 평소와 같이 콘텐츠를 전달합니다. 이 작업을 수행 할 필요는 없지만 완료하기 위해 포함하고 싶습니다.
세터 함수는 값을 소품으로 설정합니다. 그러나 설정 될 소품이 우편 번호인지 확인하는 경우. 그렇다면 값 길이가 5인지 확인합니다. True로 평가되면 우편 번호 히트 주소 파인더 API를 사용하는 페치를 실행합니다. 리턴 된 값은 객체 속성, 도시 입력 및 선택 요소의 상태에 삽입됩니다. 이는 사용자가 이러한 값을 입력하지 않아도되는 편리한 바로 가기 예입니다. 이 값은 필요한 경우 수동으로 변경할 수 있습니다.
다음 섹션에서는 입력 요소의 예를 살펴 보겠습니다.
<code></code>
프록시에는 QuerySelectorAll이있어 데이터 속성이 일치하는 요소를 찾습니다. 이것은 이전에 본 리버스 문자열 예와 동일합니다. 일치를 찾으면 입력 값 또는 요소의 내부 텍스트를 업데이트합니다. 이것은 로타리 카드가 실시간으로 업데이트되어 완성 된 주소의 모양을 표시하는 방법입니다.
주목해야 할 것은 입력의 데이터 모델 속성입니다. 이 데이터 속성의 값은 실제로 작동 중에 잠금 키의 에이전트를 알려줍니다. 에이전트는 관련 키를 기반으로 관련 요소를 찾습니다. 이벤트 리스너는 프록시에 사용되는 키를 알리면 동일한 작업을 수행합니다. 이것은 다음과 같은 것입니다.
document.querySelector ( 'main'). addEventListener ( 'input', (e) => {
모델 [E.TARGET.DATASET.MODEL] = E.TARGET.VALUE;
});따라서 기본 요소 내의 모든 입력이 위치하고 입력 이벤트가 트리거되면 에이전트가 업데이트됩니다. 데이터 모델 속성의 값은 위치를 찾을 프록시의 어떤 키를 결정하는 데 사용됩니다. 실제로 우리는 모델 시스템을 사용하고 있습니다. 이런 종류의 것을 어떻게 더 많이 사용할 수 있는지 고려하십시오.
"데이터 가져 오기"버튼은? GetData 함수의 간단한 콘솔 로그입니다 ...
getDatabtn.addeventListener ( 'click', () => {
console.log (model.getData ());
});이것은 개념을 탐구하기 위해 구축하고 사용하는 흥미로운 예입니다. 이것은 JavaScript 프록시로 내가 구축 할 수있는 것에 대해 생각하게하는 예입니다. 때로는 데이터 수집/보호 기능이있는 작은 위젯 만 필요하며 단순히 데이터와 상호 작용하여 DOM을 조작 할 수 있습니다. 예, Vue 또는 React를 사용할 수 있지만 때로는 간단한 것에 너무 복잡 할 수 있습니다.
"그냥 그게 다야"는 그것이 당신 각자에 달려 있고 JavaScript 프록시를 더 깊이 파고들 것인지에 대한 의미입니다. 이 기사의 시작 부분에서 말했듯이, 나는이 기능의 기본 만 다루었습니다. 더 많은 기능을 제공 할 수 있으며 내가 제공하는 예보다 클 수 있습니다. 경우에 따라 틈새 솔루션을위한 소규모 도우미 프로그램의 기초를 제공 할 수 있습니다. 이러한 예제는 동일한 기능을 수행하는 기본 기능을 사용하여 쉽게 만들 수 있습니다. 내 샘플 코드의 대부분조차도 프록시 객체와 일반 JavaScript와 혼합되어 있습니다.
그러나이 요점은 프록시를 사용하여 데이터 상호 작용에 반응하는 방법을 보여주는 예를 제공하는 것입니다. 즉, 데이터를 보호하고 데이터를 검증하고 DOM을 조작하고 새로운 데이터를 얻는 방법을 기반으로 데이터를 보호하기 위해 이러한 상호 작용에 반응하는 방법을 제어하는 것입니다. 이것은 장기적으로 매우 강력 할 수 있으며 더 큰 라이브러리 나 프레임 워크가 필요하지 않을 수있는 간단한 응용 프로그램을 만들 수 있습니다.
따라서 UI와 같이 UI에 더 집중하는 프론트 엔드 개발자라면 일부 기본 사항을 탐색하여 JavaScript 프록시의 혜택을 누릴 수있는 작은 프로젝트가 있는지 확인할 수 있습니다. JavaScript 개발자가 더 많으면 대규모 프로젝트를 위해 에이전트를 더 깊이 파고들 수 있습니다. 새로운 프레임 워크 나 도서관일까요?
그냥 아이디어 ...
위 내용은 JavaScript 프록시에 대한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
