JavaScript에서 DOM 데이터 바인딩 구현
데이터 바인딩은 현재 응용 프로그램에서 덧셈이 수학에 중요하듯이 중요합니다. 그것 없이 중요한 응용 프로그램을 만드는 것은 미친 것처럼 보일 것입니다.
데이터 바인딩에 연결된 Model-View-Controller 패턴은 수백 가지 자손을 제공한 가장 기본적인 아키텍처 패턴 중 하나입니다.
이 문서에서는 JavaScript의 데이터 바인딩에 대해 설명하고 다양한 방법을 공유합니다.
JavaScript의 단방향 데이터 바인딩
존재하는 JavaScript 프레임워크에 대한 많은 동기는 JavaScript의 인식된 결점에서 비롯되며 그 중 많은 수가 있었습니다. 그러나 언어로서 JavaScript는 프레임워크의 필요성이 크게 줄어들 정도로 성장했습니다.
데이터 바인딩의 개념은 매우 기본적입니다. 한쪽에는 데이터 모델이 있고 다른 한쪽에는 종종 뷰라고 하는 인터페이스가 있습니다.
목표는 일부 데이터를 뷰의 무언가에 “바인딩"하여 데이터가 변경되면 뷰도 변경되도록 하는 것입니다. 이는 읽기 전용 데이터에서 일반적입니다.
모델과 뷰가 변경될 때만 단방향 데이터 바인딩이 발생합니다.
가장 단순해 보이지만 단방향 데이터 바인딩은 속성에 대한 JavaScript getter 및 setter에 연결해야 하기 때문에 수행하기 가장 어려울 수 있습니다. Object.defineProperty는 JavaScript에서 오랫동안 사용되었습니다.
이 메서드를 사용하면 개발자가 개체에 대한 사용자 지정 getter 및 setter를 빌드하고 기존 항목을 대체할 수 있습니다. 예를 들어 이 함수는 다음 코드에서 이전에 지정된 속성에 대한 getter 및 setter를 변경하는 데 사용됩니다.
function Binding(b) {
_this = this this.element = b.element this.value =
b.object[b.property] this.attribute = b.attribute this.valueGetter =
function() {
return _this.value;
} this.valueSetter =
function(val) {
_this.value = val
_this.element[_this.attribute] = val
}
Object.defineProperty(
b.object, b.property,
{get: this.valueGetter, set: this.valueSetter});
b.object[b.property] = this.value;
this.element[this.attribute] = this.value
}
코드를 살펴보십시오. 이 코드는 Binding 개체에 값을 저장하기 위해 그림자 속성을 만든 다음 defineProperty를 사용하여 속성에 대한 getter 및 setter를 설정합니다. 이제 등호(=)를 사용하여 속성을 설정할 때마다 setter 메서드가 호출됩니다.
마지막으로 함수는 속성과 DOM 요소를 지정된 값으로 설정합니다. 이 링크를 통해 이 코드의 작동을 볼 수 있습니다.
JavaScript의 제한된 양방향 데이터 바인딩
뷰나 모델이 변경되면 양방향 데이터 바인딩이 발생합니다. 동일한 기본 코드를 사용하여 양방향 바인딩을 구축할 수 있습니다.
바인딩에는 DOM 피드백을 수신하기 위해 수신할 이벤트가 필요합니다. addEventListener 함수가 호출되는 위치를 기록해 두십시오.
그러면 전달된 요소에 이벤트 리스너가 추가됩니다. 이벤트 처리기는 이벤트가 호출될 때마다 요소에 데이터 바인딩된 개체 값의 섀도 복사본을 설정합니다.
모델을 변경하면 DOM 요소도 업데이트됩니다.
function Binding(b) {
_this = this this.element = b.element this.value =
b.object[b.property] this.attribute = b.attribute this.valueGetter =
function() {
return _this.value;
} this.valueSetter =
function(val) {
_this.value = val
_this.element[_this.attribute] = val
}
if (b.event) {
this.element.addEventListener(b.event, function(event) {
_this.value = _this.element[_this.attribute]
})
}
Object.defineProperty(
b.object, b.property, {get: this.valueGetter, set: this.valueSetter});
b.object[b.property] = this.value;
this.element[this.attribute] = this.value
}
이 링크를 통해 이 코드의 작동을 볼 수 있습니다.
그러나 이 코드는 요소 및 특성에 대해 단일 단방향 또는 양방향 데이터 바인딩만 허용한다는 점에서 상대적으로 제한적입니다.
JavaScript에서 더 나은 양방향 데이터 바인딩
속성이 하나 이상의 항목에 연결되도록 허용하는 것이 양방향 데이터 바인딩에 대한 더 나은 접근 방식입니다. 이는 DOM 이벤트가 호출되거나 모델이 변경될 때 값이 변경될 때 데이터 바인딩이 DOM의 수많은 항목을 업데이트할 수 있음을 의미합니다.
또한 새로 도입된 addBinding 메소드에 주목하십시오. 이제 이벤트와의 바인딩에 새 구성 요소를 추가할 수 있습니다.
이들은 elementBindings 배열에 추가됩니다. setter 메서드는 새 값이 설정되고 속성이 수정될 때 elementBindings 배열에서 반복됩니다.
또한 addBinding을 실행할 때 event 옵션을 누락하여 단방향 데이터 바인딩을 생성하는 데 사용할 수 있습니다.
function Binding(b) {
_this = this this.elementBindings = [] this.value =
b.object[b.property] this.valueGetter =
function() {
return _this.value;
} this.valueSetter =
function(val) {
_this.value = val
for (var i = 0; i < _this.elementBindings.length; i++) {
var binding = _this.elementBindings[i]
binding.element[binding.attribute] = val
}
} this.addBinding =
function(element, attribute, event) {
var binding = { element: element, attribute: attribute } if (event) {
element.addEventListener(event, function(event) {
_this.valueSetter(element[attribute]);
})
binding.event = event
}
this.elementBindings.push(binding)
element[attribute] = _this.value
return _this
}
Object.defineProperty(
b.object, b.property,
{get: this.valueGetter, set: this.valueSetter});
b.object[b.property] = this.value;
}
이 링크를 통해 이 코드의 작동을 볼 수 있습니다.
이 구현은 더 좋지만 여전히 해야 할 일이 많습니다. 예를 들어 데이터 유효성 검사, 템플릿, 배열 지원, 사용자 정의 UI 설정자 또는 UI 포맷터 및 기타 많은 제한 사항이 없습니다.
이 모든 것을 결합하면 “프레임워크"라는 용어가 형성되기 시작하고 많은 프레임워크가 존재합니다. 그러나 이와 같은 간단한 스크립트는 많은 요구 사항에 대한 데이터 바인딩에 필요한 것을 처리하기에 충분합니다.