This is the 7th day of my participation in Gwen Challenge
Simple bidirectional binding
The main method used is Object.defineProperties.
The Object.defineProperties() method defines new or modifies existing properties directly on an object, returning the object.
This method directly adds or modifies existing property values of the object. These include:
-
configurable
The default is false
True If and only if the type of the property descriptor can be changed and the property can be deleted from the corresponding object.
-
enumerable
The default is false
True If and only if an attribute on the corresponding object is enumerated.
-
value
The default value is undefined
The value associated with the property. It can be any valid JavaScript value (number, object, function, etc.).
-
writeable
The default is false
True if and only if the value associated with the property can be changed using assignment Operator.
-
get
The default value is undefined
As the getter for this property, undefined if there is no getter. The value returned by the function will be used as the value of the property.
-
set
The default value is undefined
A setter function as a property, or undefined if there is no setter. The function will only accept the new value assigned to the property by the argument.
The main principle of
The binding effect between components is realized by setting the get and set properties of the object.
<p>
input1=><input type="text" id="input1">
</p>
<p>
input2=><input type="text" id="input2">
</p>
<div>I increment the value of input1 by 1=><span id="span"></span>
</div>
Copy the code
The set attribute is triggered when the value of input1 changes, and the set of input2 is also executed, which changes the value of the span.
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oSpan = document.getElementById('span');
var obj = {};
Object.defineProperties(obj, {
val1: {
configurable: true.get: function() {
oInput1.value = 0;
oInput2.value = 0;
oSpan.innerHTML = 0;
return 0
},
set: function(newValue) {
oInput2.value = newValue;
oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0}},val2: {
configurable: true.get: function() {
oInput1.value = 0;
oInput2.value = 0;
oSpan.innerHTML = 0;
return 0
},
set: function(newValue) {
oInput1.value = newValue;
oSpan.innerHTML = Number(newValue)+1;
}
}
})
oInput1.value = obj.val1;
oInput1.addEventListener('keyup'.function() {
obj.val1 = oInput1.value;
}, false)
oInput2.addEventListener('keyup'.function() {
obj.val2 = oInput2.value;
}, false)
Copy the code
Proxy bidirectional binding
Proxy objects are used to create a Proxy for an object to intercept and customize basic operations (such as property lookup, assignment, enumeration, function calls, and so on).
Object.defineproperties has certain defects:
- Performance images are available when the data volume is large
- Unable to listen on array
- You can only listen for defined attributes, not new attributes
But es6’s new proxy solves this problem perfectly.
Proxy Indicates the parameters received by proxy
target
The target object (which can be any type of object, including a native array, function, or even another Proxy) that you want to wrap with a Proxy.
handler
An object that typically has functions as attributes, and the functions in each attribute define the behavior of agent P when performing various operations.
The get parameter
target
Target object.property
The name of the property to be obtained.receiver
Proxy or objects that inherit from Proxy
The set parameters
target
Target object.property
The name of the property or Symbol to be set.value
New property value.
Reflect
Reflect is a built-in object that provides methods to intercept JavaScript operations. These methods are the same as the proxy Handlers method. Reflect is not a function object, so it is not constructible.
example
<input type="text" id="input" />
<div id="text"></div>
Copy the code
let input = document.getElementById("input");
let text = document.getElementById("text");
let obj = new Proxy({}, {
get:function (target,key,receiver) {
return Reflect.get(target,key,receiver);
},
set:function (target,key,val,receiver) {
if(key === 'text'){
input.value = val;
text.innerText = val;
}
return Reflect.set(target,key,val,receiver); }}); input.addEventListener('keyup'.function (e) {
obj.text = e.target.value;
});
Copy the code