The so-called two-way data binding, nothing more than the data layer and the view layer synchronization, real-time view layer along with updated when data is written before the Internet to see bigwigs are so described:
1, to achieve a data listener Observer, capable of listening to all the attribute data objects, you can get the latest values are subject to change and notify subscribers
2, to achieve a command parser Compile, every instruction scanning elements and nodes parsed data according to the replacement instruction templates, and corresponding binding update function
3, a Watcher to achieve, as a bridge connecting the Compile and Observer, can subscribe and be notified of changes in each property, performed callback bindings corresponding instruction so as to update the view
Was divided into four steps, each step piles and explain a lot of code, but I'm really just a veritable science and engineering students , to see the text of the publisher - subscriber mode, Ever since I go online to various Baidu personal understanding is that the tasks performed getter function which is the watcher subscribers, while the task is performed by the publisher setter function; I believe many people have seen this is scanty, a wave Let me explain:
ECMAScript There are two properties: the data access attributes and attributes , attribute data is generally used to store data values corresponding to the attribute accessor is set / get operations, not directly storing data values, each attribute and contain the following four characteristics . Here are some:
Property data
1 [[Configurable]]:. By showing whether delete the property delete, can modify the property to access the properties, default is false. When the property is set to false Configurable, delete the attribute can not be deleted and no longer have the property back to Configurable to true
2 [[Enumerable]]:. Attribute indicates whether enumerated (i.e., whether the loop can be for in Back), default to false
. 3 [[the Writable]]:. attribute indicates whether the write (i.e., whether the attribute value can be changed), defaults to false
. 4 [[the value]]:. a data value of the property, the default is undefined
Access Properties
1 [[Configurable]]:. By showing whether delete the property delete, can modify the attribute data attribute, the default is false. When the property is set to false Configurable, delete the attribute can not be deleted and no longer have the property back to Configurable to true
2 [[Enumerable]]:. Attribute indicates whether enumerated (i.e., whether the loop can be for in Back), default to false
. 3 [[the Get]]:. attribute read function call, the default is undefined
. 4 [[the Set]]:. writing function called default is undefined
Modifying the properties or characteristics to define access properties when required by means of a method in ECMAScript 5: Object.defineProperty (), this method takes three parameters: Object property is located, the name of the attribute, descriptor object; defined for the object a plurality of attributes, to use complex function wording: Object.defineProperties ();
So ES5 by this method can be very simple and crude directly to explain the principles of two-way binding:
<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 = '苏日俪格'; So to achieve the core data is to use two-way binding for each attribute creates an instance of an object subscriber in order to observe, getter function which returns a value value, writes the modified value in the setter function and call the update method to update the view data values, Configurable Enumerable these two characteristics and descriptors defaults to true, so do not write
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]); }); }