JavaScript에서 양방향 데이터 바인딩을 구현하는 세 가지 방법 공유
- 黄舟원래의
- 2017-03-21 14:41:001914검색
이 글에서는 주로 데이터의 양방향 바인딩을 달성하기 위한 javascript의 세 가지 방법을 요약하여 소개합니다. 프런트엔드 뷰 레이어와 데이터 레이어는 때때로 두 가지를 구현해야 합니다. -방향 바인딩 현재 데이터가 구현되어 있습니다. 양방향 바인딩에는 세 가지 주요 유형이 있습니다. 관심 있는 분들은 이에 대해 알아볼 수 있습니다.
프런트엔드 데이터의 양방향 바인딩 방법
프런트엔드의 뷰 레이어와 데이터 레이어는 양방향 바인딩을 구현해야 하는 경우가 있습니다. (양방향 바인딩), 예를 들어 mvvm 프레임워크, 데이터 기반 뷰, 뷰 상태 머신 등을 통해 현재 주류인 몇 가지 양방향 데이터 바인딩 프레임워크를 연구하고 요약했습니다. 현재 양방향 데이터 바인딩을 구현하는 세 가지 주요 방법이 있습니다.
1. 수동 바인딩
이전 구현 방법은 관찰자프로그래밍 모드와 약간 비슷합니다. 데이터객체에 대한 get 및 set 메소드(물론 다른 메소드도 있음), 호출 시 수동으로 get 또는 set 데이터를 호출하고, 데이터를 변경한 후 UI 레이어의 렌더링 작업을 시작하는 것이 주로 사용됩니다. 뷰가 데이터 변경을 주도하는 시나리오에서 입력, 선택, 텍스트 영역 및 기타 요소를 사용하면 UI 레이어가 변경되면 변경, 키 누르기, 키업 및 기타 DOM 이벤트와 같은 이벤트가 모니터링되어 데이터의 데이터를 변경하는 이벤트가 발생합니다. 층. 전체 프로세스는 함수 호출을 통해 완료됩니다.
<!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">
<p q-text="value" id="el"></p>
<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>2. 더티 검사 메커니즘
전형적인 mvvm 프레임워크 angularjs로 표현되는 Angle은 더티 데이터를 검사하여 UI를 수행합니다. 작업이 업데이트됩니다. Angular의 더티 감지에 대해 알아야 할 몇 가지 사항이 있습니다. - 더티 감지 메커니즘은 예약된 감지를 사용하지 않습니다. - 더티 검출 시점은 데이터가 변경되는 시점입니다. - Angular는 일반적으로 사용되는 DOM 이벤트, XHR 이벤트 등을 캡슐화하고 다이제스트 프로세스를 트리거하여 Angular로 진입합니다. - 다이제스트 프로세스에서는 루트스코프에서 순회하여 모든 감시자를 확인합니다. (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">
<p q-event="text" ng-bind="value" id="el"></p>
<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>3. 프런트엔드 데이터 하이재킹(Hijacking)
세 번째 방법은 다음과 같은 프레임워크에서 사용됩니다. Avalon 데이터 하이재킹 방법. 기본 아이디어는 Object.defineProperty를 사용하여 데이터 객체의 속성 가져오기 및 설정을 모니터링하는 것입니다. 데이터 읽기 및 할당 작업이 있는 경우 이러한 방식으로 가장 일반적인 = 등호 할당이면 충분합니다. 구체적인 구현은 다음과 같습니다:
<!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">
<p q-text="value" id="el"></p>
<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>그러나 DefineProperty는 IE8 이상의 브라우저를 지원한다는 점에 주목할 가치가 있습니다. 여기서는 호환성을 위해 DefineGetter 및 DefineSetter를 사용할 수 있습니다. 그러나 브라우저 호환성으로 인해 DefineProperty를 직접 사용하십시오. IE8 브라우저의 경우 해킹하려면 여전히 다른 방법을 사용해야 합니다. 다음 코드는 IE8을 해킹할 수 있으며, DefineProperty는 IE8을 지원합니다. 예를 들어 es5-shim.js를 사용하세요. (IE8 이하의 브라우저에서는 무시됨)
4. 요약
우선 여기에 나온 예제는 단순한 구현일 뿐이며 독자는 유사점을 깊이 느낄 수 있습니다. 세 가지 방법의 차이점, 복잡한 프레임워크도 이 기본 아이디어를 통해 눈덩이처럼 불어납니다.
위 내용은 JavaScript에서 양방향 데이터 바인딩을 구현하는 세 가지 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!