JavaScript 프록시 객체 프록시 첫 번째 경험 간단한 데이터 기반 보기 개요

이 글은 JS 프록시 객체 Proxy의 간단한 데이터 기반 뷰를 주로 소개합니다. 필요한 친구들이 함께 살펴보시기 바랍니다. 모두에게 도움이 될 것입니다.

마스터 과정에 대한 프런트 엔드(vue) 항목: 학습 항목 입력

JQuery는 이벤트 기반입니다. 즉, 데이터 조각이 DOM의 특정 콘텐츠와 연결될 때 데이터 변경 후 동기화를 위해 DOM을 작동해야 합니다.

 <div id="data">데이터</div>

 var 데이터 = "데이터"
//일종의 이벤트로 인해 데이터가 변경되었습니다. 데이터 = "새 데이터"
$("#data").text = 데이터

간단한 상호작용에서는 이 방법이 여전히 편리해 보이지만 상호작용이 커지면 코드가 비대해집니다.

졸업을 앞두고 Angular, Vue, React가 등장하면서 데이터 기반이라는 새로운 방식을 발견했습니다. 즉, DOM과 데이터의 "바인딩"을 통해 데이터를 직접 수정할 수 있고, DOM 콘텐츠를 직접 수정할 수 있습니다.

 <div>{{데이터}}</div>

 var 데이터 = "데이터"
// ...어떻게든 바인딩됨 data = "새 데이터"

DOM의 콘텐츠는 바로 새로운 데이터가 됩니다. 사용하기 매우 편리하고 코드도 비교적 간결합니다. 당시에는 마술처럼 보였습니다.

데이터 기반 프레임워크마다 바인딩 원칙과 프로세스가 다르며 모두 상대적으로 복잡합니다. 하지만 오늘은 이를 단순화하고 JS의 Proxy 객체를 사용하여 데이터 드라이브를 구현하겠습니다. (그런데, Vue3의 반응형 데이터는 이 원리를 사용합니다. 물론 오늘의 예보다 훨씬 더 복잡할 것입니다)

프록시 객체란 무엇입니까?

Proxy 개체는 기본 작업(예: 속성 조회, 할당, 열거, 함수 호출 등)의 차단 및 사용자 정의를 구현하기 위해 개체에 대한 프록시를 만드는 데 사용됩니다. 구체적인 사용 방법은 다음과 같습니다.

 new Proxy(프록시할 객체, 프록시의 이벤트 객체)

다음 이벤트를 위임할 수 있습니다.

프록시를 사용하여 간단한 데이터 기반 보기 작성

이제 프록시의 기본 사용법을 이해했으므로 이를 사용하여 객체의 setter 프록시하여 데이터 드라이브를 구현할 수 있습니다.

먼저 데이터와 동일한 ID를 사용하여 DOM 요소를 정의합니다.

 <div id="firstName"></div>
<div id="나이"></div>

data 에 대한 프록시 프록시를 설정하고 해당 setter 프록시하고 그 안에서 DOM을 작동합니다.

 변수 데이터 = {
이름: "",
나이: 0
}
var p_data = 새 프록시(데이터, {
집합: 함수(obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // 원래 논리를 구현하는 것을 잊지 마세요 return true; // 프록시 요구 사항 설정, 성공적인 처리 후 true 반환
}
})

그런 다음 초기값을 설정하고 관련 상호작용을 설정하고 data 대신 에이전트 p_data 작동된다는 점에 유의하세요.

 p_data.firstName = "2초 후에 이름이 표시됩니다..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "린 유첸"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}

이러한 방식으로 데이터 드라이브가 실현됩니다. p_data 의 속성 값을 임의로 수정하면 DOM의 내용을 직접 변경할 수 있습니다.

JS

 변수 데이터 = {
이름: "",
나이: 0
}
var p_data = 새 프록시(데이터, {
집합: 함수(obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval;
true를 반환
}
})
p_data.firstName = "2초 후에 이름이 표시됩니다..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "린 유첸"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}