바인딩 원칙 뷰 양방향 데이터

   거물을보고 더 많은 데이터 레이어와 데이터가 인터넷 이전에 기록 될 때 업데이트와 함께보기 층 동기화, 실시간보기 층 이상, 아무 구속력없는 데이터가 너무 설명 양방향 소위 :

   

MVVM 결합 데이터 가로 채기를 사용하고, 결합 쌍방향 달성 가입자 모델 - 출판사 , 해당 모니터 가입자 Object.defineProperty ()에 의한 데이터의 변경을 트리거 할 때 발표 각 특성 설정 부, 게터를 탈취하는 방법 콜백. 에는 다음과 같은 점을 달성하기 위해 필요한
, 최신 값이 변경 될 수 있습니다 얻을 가입자에게 알릴 수 있습니다 모든 속성 데이터 객체를 수신 할 수있는 관찰자 청취자 데이터를 달성하기 위해, 일을
명령 파서 컴파일, 모든를 달성하기 위해 2, 명령어 주사 요소 노드는 데이터 교환 지시 템플릿에있어서, 및 바인딩 갱신 기능 대응 파싱
구독하고 수행 각 속성 변경 통지, 컴파일 및 옵저버를 연결하는 다리 3, 와쳐 달성을 콜백 바인딩보기를 업데이트하도록 지시를 해당

4, MVVM 입력 기능, 세 개 이상의 통합

 

네 단계, 각 단계 더미로 구분 많은 코드를 설명하지만, 난 그냥 정말이야 있었 진정한 과학 및 공학 학생들 하여 출판사의 텍스트보고, - 나는 다양한 바이두에 온라인 이래, 가입자 모드를 개인 이해는 작업이 게시자 setter 함수에 의해 수행되는 동안 작업, 감시자 가입자입니다 게터 기능을 수행한다는 것입니다, 나는 파도가 설명해 드리죠, 많은 사람들이 빈약하다 보았다 생각 :

ECMAScript를 두 가지 특성이있다 : 데이터 액세스 속성 및 속성 , 속성 데이터는 일반적으로 설정된 속성 접근에 대응하는 저장 데이터 값을 사용 / 아닌 직접 기억 된 데이터 값을 각각의 특성 조작을 얻고 다음과 같은 네 개의 특징을 포함 . 다음은 몇 가지 있습니다 :

속성 데이터

1 [구성] :.이 재산 삭제 삭제 여부를 보여줌으로써, 액세스 속성을 속성을 수정할 수 있습니다, 기본값은 false입니다. 속성이 잘못된 구성으로 설정하면 속성이 삭제 될 수 없습니다 삭제하고 더 이상 true로 구성하는 속성 다시없는
:. [Enumerable에서] []이 특성을 나타냅니다 여부 (열거 즉, 루프에서이 될 수 있는지 여부 위로) 거짓 기본적
. 3 [쓰기 가능는] :. 속성 기록 (즉, 속성 값)가 변경 될 수 있는지, 디폴트는 false 나타내는지를
. 4 [값] :.는 속성의 데이터 값은, 디폴트는 정의되지 않은

액세스 속성

1 [구성] :. 속성 데이터 속성을 수정할 수, 재산 삭제 삭제 여부를 보여줌으로써, 기본값은 false입니다. 속성이 잘못된 구성으로 설정하면 속성이 삭제 될 수 없습니다 삭제하고 더 이상 true로 구성하는 속성 다시없는
:. [Enumerable에서] []이 특성을 나타냅니다 여부 (열거 즉, 루프에서이 될 수 있는지 여부 맨), false로 기본
. 3 []가하기] 속성은 함수 호출을 읽을 :. 기본이 정의되어 있지 않습니다
. 4 [설정] :. 작성 기능이라고 기본값은 정의되어 있지 않습니다

ECMAScript를 5의 방법에 의해 필요할 때 특성 또는 액세스 속성을 정의하는 특성을 변경 : Object.defineProperty ()는,이 방법은 세 개의 파라미터를 취 객체 속성이있는 상기 특성 기술자 객체의 이름, 객체 정의 복수의 속성은, 복잡한 함수 표현을 사용한다 : Object.defineProperties를 ();

ES5 그래서이 방법으로 양방향 바인딩의 원리를 설명하는 것은 매우 간단하고 직접적으로 원유 될 수 있습니다 :

<input type="text" id="inp" /> <div id="box"></div> <script> let obj = {}; let oInp = document.getElementById('inp'); let oBox = document.getElementById('box'); Object.defineProperty(obj, 'name', { configurable: true, enumerable: true, get: function() { console.log(111) return val; }, set: function(newVal) { oInp.value = newVal; oBox.innerHTML = newVal; } }); oInp.addEventListener('input', function(e) { obj.name = e.target.value; }); obj.name = '苏日俪格'; 

따라서 코어 데이터를 달성하는 두 방법은 각 속성에 대한 바인딩 값 값을 반환 관찰하기 위하여, 게터 기능의 개체 가입자의 인스턴스를 만들고 사용하는, 세터 함수에서 수정 된 값을 기록하고 뷰를 갱신하는 갱신 메소드를 호출 데이터 값은 구성 Enumerable에서이 두 가지 특성 설명 기본값은 true로, 그래서 쓰기를하지 않습니다

function defineReactive (obj, key, val) { var dep = new Dep(); //这是一个构造函数 其原型是为属性添加订阅者 Object.defineProperty(obj, key, { get: function() { if(Dep.target) { dep.addSub(Dep.target); //添加订阅者到Dep实例对象 } return val; // 返回监听到的value值 }, set: function (newVal) { if(newVal === val) return; val = newVal; // 写入新的value值 dep.notify(); // 作为发布者发出通知 然后dep会迭代调用各自的update方法来更新视图 } }); } function observe(obj, vm) { Object.keys(obj).forEach(function(key) { defineReactive(vm, key, obj[key]); }); }