javascript 데이터 양 방향 연결 을 실현 하 는 세 가지 방식 소결
전단 의 시각 도 층 과 데이터 층 은 때때로 양 방향 연결(to-way-binding)을 실현 해 야 한다.예 를 들 어 mvvm 프레임 워 크,데이터 구동 보기,보기 상태 기 등 은 현재 주류 의 데이터 양 방향 연결 프레임 워 크 를 연구 하여 정리 했다.현재 데이터 의 양 방향 연결 을 실현 하 는 것 은 주로 다음 과 같은 세 가지 가 있다.
1.수 동 바 인 딩
비교적 오래된 실현 방식 은 관찰자 프로 그래 밍 모델 과 같 습 니 다.주요 한 사 고 는 데이터 대상 에서 get 과 set 방법(물론 다른 방법 도 있 습 니 다)을 정의 하고 호출 할 때 get 또는 set 데 이 터 를 수 동 으로 호출 하여 데 이 터 를 바 꾼 후에 UI 층 의 렌 더 링 작업 을 출발 하 는 것 입 니 다.보기 로 데이터 변 화 를 구동 하 는 장면 은 input,select,textarea 등 요 소 를 사용 합 니 다.UI 층 이 변 할 때 dom 의 change,keypress,keyup 등 사건 을 감청 하여 데이터 층 의 데 이 터 를 변경 합 니 다.전체 과정 은 함수 호출 을 통 해 이 루어 집 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data-binding-method-set</title>
</head>
<body>
<input q-value="value" type="text" id="input">
<div q-text="value" id="el"></div>
<script>
var elems = [document.getElementById('el'), document.getElementById('input')];
var data = {
value: 'hello!'
};
var command = {
text: function(str){
this.innerHTML = str;
},
value: function(str){
this.setAttribute('value', str);
}
};
var scan = function(){
/**
*
*/
for(var i = 0, len = elems.length; i < len; i++){
var elem = elems[i];
elem.command = [];
for(var j = 0, len1 = elem.attributes.length; j < len1; j++){
var attr = elem.attributes[j];
if(attr.nodeName.indexOf('q-') >= 0){
/**
* ，
*/
command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
elem.command.push(attr.nodeName.slice(2));
}
}
}
}
/**
*
*/
function mvSet(key, value){
data[key] = value;
scan();
}
/**
*
*/
elems[1].addEventListener('keyup', function(e){
mvSet('value', e.target.value);
}, false);
scan();
/**
*
*/
setTimeout(function(){
mvSet('value', 'fuck');
},1000)
</script>
</body>
</html>
전형 적 인 mvvm 프레임 워 크 angularjs 를 대표 로 angular 는 더러 운 데 이 터 를 검사 하여 UI 층 의 조작 업 데 이 트 를 진행 합 니 다.angular 의 더러 운 검 측 에 대해 몇 가지 알 아야 할 것 이 있 습 니 다.-더러 운 검 측 체 제 는 정시 검 사 를 사용 하 는 것 이 아 닙 니 다.-더러 운 검 사 는 데이터 가 변 할 때 진행 된다.-angular 는 자주 사용 하 는 dom 이벤트,xhr 이벤트 등 을 패키지 하여 안에서 angular 에 들 어 가 는 digest 프로 세 스 를 촉발 합 니 다.-digest 프로 세 스에 서 rootscope 부터 옮 겨 다 니 며 모든 watcher 를 검사 합 니 다.(angular 의 구체 적 인 디자인 은 다른 문 서 를 볼 수 있 습 니 다.여 기 는 데이터 바 인 딩 만 토론 합 니 다).그러면 우 리 는 더러 운 검 사 를 어떻게 해 야 하 는 지 보 겠 습 니 다.주로 설 정 된 데 이 터 를 통 해 이 데이터 와 관련 된 모든 요 소 를 찾 은 다음 에 데이터 변 화 를 비교 하고 변화 하면 명령 작업 을 해 야 합 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data-binding-drity-check</title>
</head>
<body>
<input q-event="value" ng-bind="value" type="text" id="input">
<div q-event="text" ng-bind="value" id="el"></div>
<script>
var elems = [document.getElementById('el'), document.getElementById('input')];
var data = {
value: 'hello!'
};
var command = {
text: function(str) {
this.innerHTML = str;
},
value: function(str) {
this.setAttribute('value', str);
}
};
var scan = function(elems) {
/**
*
*/
for (var i = 0, len = elems.length; i < len; i++) {
var elem = elems[i];
elem.command = {};
for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
var attr = elem.attributes[j];
if (attr.nodeName.indexOf('q-event') >= 0) {
/**
*
*/
var dataKey = elem.getAttribute('ng-bind') || undefined;
/**
*
*/
command[attr.nodeValue].call(elem, data[dataKey]);
elem.command[attr.nodeValue] = data[dataKey];
}
}
}
}
/**
*
* @param {[type]} elems [description]
* @return {[type]} [description]
*/
var digest = function(elems) {
/**
*
*/
for (var i = 0, len = elems.length; i < len; i++) {
var elem = elems[i];
for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
var attr = elem.attributes[j];
if (attr.nodeName.indexOf('q-event') >= 0) {
/**
*
*/
var dataKey = elem.getAttribute('ng-bind') || undefined;
/**
* ， ， ，
*/
if(elem.command[attr.nodeValue] !== data[dataKey]){
command[attr.nodeValue].call(elem, data[dataKey]);
elem.command[attr.nodeValue] = data[dataKey];
}
}
}
}
}
/**
*
*/
scan(elems);
/**
*
*/
function $digest(value){
var list = document.querySelectorAll('[ng-bind='+ value + ']');
digest(list);
}
/**
*
*/
if(document.addEventListener){
elems[1].addEventListener('keyup', function(e) {
data.value = e.target.value;
$digest(e.target.getAttribute('ng-bind'));
}, false);
}else{
elems[1].attachEvent('onkeyup', function(e) {
data.value = e.target.value;
$digest(e.target.getAttribute('ng-bind'));
}, false);
}
setTimeout(function() {
data.value = 'fuck';
/**
* $digest $digest
*/
$digest('value');
}, 2000)
</script>
</body>
</html>
세 번 째 방법 은 avalon 등 프레임 워 크 에서 사용 하 는 데이터 납치 방식 이다.기본 적 인 사 고 는 Object.defineProperty 를 사용 하여 데이터 대상 에 대해 속성 get 과 set 의 감청 을 하 는 것 입 니 다.데이터 읽 기와 할당 작업 이 있 을 때 노드 의 명령 을 호출 합 니 다.이렇게 하면 가장 통용 되 는=등호 할당 을 사용 하면 됩 니 다.구체 적 인 실현 은 다음 과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data-binding-hijacking</title>
</head>
<body>
<input q-value="value" type="text" id="input">
<div q-text="value" id="el"></div>
<script>
var elems = [document.getElementById('el'), document.getElementById('input')];
var data = {
value: 'hello!'
};
var command = {
text: function(str) {
this.innerHTML = str;
},
value: function(str) {
this.setAttribute('value', str);
}
};
var scan = function() {
/**
*
*/
for (var i = 0, len = elems.length; i < len; i++) {
var elem = elems[i];
elem.command = [];
for (var j = 0, len1 = elem.attributes.length; j < len1; j++) {
var attr = elem.attributes[j];
if (attr.nodeName.indexOf('q-') >= 0) {
/**
*
*/
command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
elem.command.push(attr.nodeName.slice(2));
}
}
}
}
var bValue;
/**
*
*/
var defineGetAndSet = function(obj, propName) {
try {
Object.defineProperty(obj, propName, {
get: function() {
return bValue;
},
set: function(newValue) {
bValue = newValue;
scan();
},
enumerable: true,
configurable: true
});
} catch (error) {
console.log("browser not supported.");
}
}
/**
*
*/
scan();
/**
*
*/
defineGetAndSet(data, 'value');
/**
*
*/
if(document.addEventListener){
elems[1].addEventListener('keyup', function(e) {
data.value = e.target.value;
}, false);
}else{
elems[1].attachEvent('onkeyup', function(e) {
data.value = e.target.value;
}, false);
}
setTimeout(function() {
data.value = 'fuck';
}, 2000)
</script>
</body>
</html>
4.소결
먼저 이곳 의 예 는 간단 한 실현 일 뿐 독자 들 은 세 가지 방식 의 공통점 과 차이 점 을 깊이 느 낄 수 있 고 복잡 한 구조 도 이런 기본 적 인 사고방식 을 통 해 눈 덩이 를 굴 리 는 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
