js realizes two-way data binding (accessor monitoring)
|
This article example shares the specific code of js to achieve two-way data binding for your reference. The specific content is as follows Two-way binding:Two-way binding is based on the MVVM model: model-view-viewModel Model: Model layer, responsible for business logic and interaction with the database The meaning of two-way binding is: when the model data changes, the view layer will be notified; when the user modifies the data in the view layer, it will be reflected in the model layer. The advantage of two-way data binding is that it only focuses on data operations and reduces DOM operations. The principle of Vue.js implementation is to use accessor monitoring, so accessor monitoring is also used here to achieve simple two-way data binding. The implementation of accessor monitoring mainly uses the native method in JavaScript: Object.defineProperty. This method can add accessor properties to an object. When the object property is accessed or assigned a value, the accessor property will be triggered. Therefore, using this idea, a handler can be added to the accessor property. Here we first implement a simple two-way data binding process for the input tag, and first have a general understanding of what two-way data binding is.
<input type="text">
<script>
// Get the input box object let input = document.querySelector('input');
// Create an object without a prototype chain to monitor changes in a property of the object let model = Object.create(null);
// When the mouse moves away from the input box, the view layer data notifies the model layer data changes input.addEventListener('blur',function() {
model['user'] = this.value;
})
// When the model layer data changes, notify the view layer of the change.
Object.defineProperty(model, 'user', {
set(v) {
user = v;
input.value = v;
},
get() {
return user;
}
})
</script>In the above code, the Input tag object is first obtained, and then a listening event (blur) is added to the input element object. When the event is triggered, that is, when the view layer changes, it is necessary to notify the model layer to update the data. The model layer here uses an empty object without a prototype (the reason for using an empty object is to avoid misunderstanding of data when obtaining a certain attribute due to the existence of the prototype chain). Use the Object.defineProperty method to add accessor properties for the specified properties of the object. When the property of the object is modified, the setter accessor will be triggered. Here we can assign values to the view layer data and update the view layer data. The view layer here refers to the attribute value of the Input tag. Take a look at the effect: Enter a data in the text box and print model.user in the console to see that the data has affected the model layer.
Then manually modify the data of the model layer in the console: model.user = '9090';
Well, the simplest two-way data binding for text boxes is implemented. We can find the following implementation logic from the above case: ①. To achieve data communication from the view layer to the model, you need to know the data changes in the view layer and the value of the view layer, but generally you need to get the value of the tag itself, unless there is a built-in attribute, such as the value attribute of the input tag, which can get the input value of the text box ②. Use Object.defineProperty to implement communication from the model layer to the view layer. When the data is modified, the accessor property setter will be triggered immediately, so that all view layers that use the property can be notified to update their current data (observers) ③. The bound data needs to be a property of an object, because Object.defineProperty is an accessor feature enabled for the properties of an object. Based on the above summary, we can design a two-way data binding mode similar to vue.js: The implementation here involves three main functions:
Implementation code: html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two-way data binding</title>
<style>
#app {
text-align: center;
}
</style>
<script src="/js/eBind.js"></script>
<script>
window.onload = function () {
let ebind = new EBind({
el: '#app',
data: {
number: 0,
person:
age: 0
}
},
methods: {
increment: function () {
this.number++;
},
addAge: function () {
this.person.age++;
}
}
})
}
</script>
</head>
<body>
<div id="app">
<form>
<input type="text" e-model="number">
<button type="button" e-click="increment">Increase</button>
</form>
<input e-model="number" type="text">
<form>
<input type="text" e-model="person.age">
<button type="button" e-click="addAge">Add</button>
</form>
<h3 e-bind="person.age"></h3>
</div>
</body>
</html>eBind.js
function EBind(options) {
this._init(options);
}
// Initialize the two-way data binding according to the given custom parameters EBind.prototype._init = function (options) {
// options are the data for initialization, including el, data, method
this.$options = options;
// el is the Element object that needs to be managed, el:#app this.$el:id is the Element object of app this.$el = document.querySelector(options.el);
// data this.$data = options.data;
//Methods this.$methods = options.methods;
// _binding stores the mapping between model and view, that is, the Wachter instance. When the model is updated, the corresponding view is updated
this._binding = {};
// Override the get and set methods of this.$data this._obverse(this.$data);
// Parsing instructions this._compile(this.$el);
}
// The function is to monitor all the attributes in this.$data, accessor monitoring, and realize data communication from model to view layer. When the model layer changes, notify the view layer EBind.prototype._obverse = function (currentObj, completeKey) {
// Save context var _this = this;
// currentObj is the object that needs to rewrite get/set. Object.keys obtains the properties of the object and obtains an array. // Traverse the array Object.keys(currentObj).forEach(function (key) {
// If and only if the object's own properties are monitored if (currentObj.hasOwnProperty(key)) {
// If it is a property of an object, it needs to be saved in the form of person.age var completeTempKey = completeKey ? completeKey + '.' + key : key;
// Establish the association of the attributes that need to be monitored_this._binding[completeTempKey] = {
_directives: [] // Stores all places where this data is used};
// Get the value of the current attribute var value = currentObj[key];
// If the value is an object, iterate through it and fully monitor each object attribute if (typeof value == 'object') {
_this._obverse(value, completeTempKey);
}
var binding = _this._binding[completeTempKey];
// Modify the get and set of each property of the object, and add processing events in get and set Object.defineProperty(currentObj, key, {
enumerable: true,
configurable: true, // avoid defaulting to false
get() {
return value;
},
set(v) {
// value saves the value of the current attribute if (value != v) {
// If the data is modified, it is necessary to notify each place that uses the data to update the data, that is, the model notifies the view layer, and the Watcher class acts as the middle layer to complete the operation (notification operation)
value = v;
binding._directives.forEach(function (item) {
item.update();
})
}
}
})
}
})
}
// The function is to compile custom instructions, add native listening events to them, and realize data communication from view to model layer, that is, notify model layer data update when view layer data changes // Implementation principle: Get all child nodes through the managed element object: this.$el, traverse all child nodes, check whether they have custom attributes, and if they have custom attributes with specified meanings // For example: e-bind/e-model/e-click will add listening events according to the different custom attributes added to the node // e-click adds native onclick event. The main point here is: the context this of the method specified in this.$method needs to be changed to this.$data
// e-model is bound data update, only input and textarea tags are supported here, reason: data communication from view to model layer is realized by using the value attribute of the tag itself // e-bind
EBind.prototype._compile = function (root) {
// Save the execution context var _this = this;
// Get all child nodes of the managed node element, including only element nodes var nodes = root.children;
for (let i = 0; i < nodes.length; i++) {
// Get the child nodes/in order var node = nodes[i];
// If the current node has child nodes, continue to process the child nodes layer by layer if (node.children.length) {
this._compile(node);
}
// If the current node is bound to the e-click attribute, you need to bind the onclick event to the current node if (node.hasAttribute('e-click')) {
// hasAttribute can get custom attributesnode.addEventListener('click',(function () {
// Get the attribute value of the current node, that is, the method var attrVal = node.getAttribute('e-click');
// Since the data in the bound method needs to use the data in data, the context of the executed function, that is, this, needs to be changed to this.$data
// The reason for using bind instead of call/apply is that the onclick method needs to be triggered before it is executed, rather than immediately executing return _this.$methods[attrVal].bind(_this.$data);
})())
}
// Two-way binding can only be applied to input and textarea tag elements, because the built-in value attribute of these two tags is used to implement two-way binding if (node.hasAttribute('e-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
// Add an input event listener to the element object. The second parameter is an immediately executed function. It gets the index value of the node, executes the code inside the function, and returns the event handler node.addEventListener('input', (function (index) {
// Get the attribute value of the current node, that is, the method var attrVal = node.getAttribute('e-model');
// Add a mapping of the model to the view layer for the current element object_this._binding[attrVal]._directives.push(new Watcher({
name: 'input',
el: node,
eb: _this,
exp: attrVal,
attr: 'value'
}))
// If the input tag value changes, the model layer data needs to be updated, that is, the change from the view layer to the model layer return function () {
// Get the bound attribute, using . as the separator. If it is just a value, directly get the current value. If it is in the form of an object (obj.key), the binding is actually the value of the key in the obj object. At this time, you need to get the key and assign it to the value of the changed input tag var keys = attrVal.split('.');
// Get the last attribute in the set of attributes obtained in the previous step (the last attribute is the actual bound value)
var lastKey = keys[keys.length - 1];
// Get the parent object of the value that is actually bound // Because if it is an object, such as: obj.key.val, you need to find the reference of key, because what you want to change here is val
// Change the value of val by referencing key, but if you directly obtain the reference to val, val is a numerical storage. When assigning it to another variable, it actually opens up a new space. // You cannot directly change the data in the model layer, that is, this.$data. If you reference the data storage, assign it to another variable, and the modification of the other variable will affect the original referenced data. // So here you need to find the parent object of the actual bound value, that is, the obj value in obj.key var model = keys.reduce(function (value, key) {
// If it is not an object, return the attribute value directly
if (typeof value[key] !== 'object') {
return value;
}
return value[key];
// Here we use the model layer as the starting value, because keys records the attributes in this.$data, so we need to find the target attribute from the parent object this.$data}, _this.$data);
// model is the parent object mentioned earlier, the obj in obj.key, and lastkey is the actual bound attribute. Once found, it needs to be updated to the value of the node.
// The modification of the model layer here will trigger the accessor property setter in _observe, so if this property is used elsewhere, it will also change accordingly model[lastKey] = nodes[index].value;
}
})(i))
}
// Bind e-bind to the node and add a mapping from model to view. The reason is that e-bind implements data communication from model to view, and in this._observer, // it has been implemented through definePrototype, so here you only need to add communication to facilitate implementation in _oberver.
if(node.hasAttribute('e-bind')) {
var attrVal = node.getAttribute('e-bind');
_this._binding[attrVal]._directives.push(new Watcher({
name: 'text',
el: node,
eb: _this,
exp: attrVal,
attr: 'innerHTML'
}))
}
}
}
/**
* options property:
* name: node name: text node: text, input box: input
* el: DOM element corresponding to the instruction* eb: EBind instance corresponding to the instruction* exp: value corresponding to the instruction: e-bind="test"; test is the value corresponding to the instruction* attr: bound attribute value, for example: the attribute bound by e-bind will actually be reflected in innerHTML, and the tag bound by v-model will be reflected in value*/
function Watcher(options) {
this.$options = options;
this.update();
}
Watcher.prototype.update = function () {
// Save context var _this = this;
// Get the bound object var keys = this.$options.exp.split('.');
// Get the attribute to be changed on the DOM object and change it this.$options.el[this.$options.attr] = keys.reduce(function (value, key) {
return value[key];
}, _this.$options.eb.$data)
}Result:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Alibaba Cloud applies for a free SSL certificate (https) from Cloud Shield
>>: Example of how to retrieve the latest data using MySQL multi-table association one-to-many query
Recommend
DOCTYPE element detailed explanation complete version
1. Overview This article systematically explains ...
HTML is actually the application of learning several important tags
After the article "This Will Be a Revolution&...
MySQL recursion problem
MySQL itself does not support recursive syntax, b...
Detailed explanation of invisible indexes in MySQL 8.0
Word MySQL 8.0 has been released for four years s...
Implementation of Vue 3.x project based on Vite2.x
Creating a Vue 3.x Project npm init @vitejs/app m...
Nginx learning how to build a file hotlink protection service example
Preface Everyone knows that many sites now charge...
Basic operation tutorial of files and permissions in centos
Preface Before we begin, we should briefly unders...
Summary of knowledge points related to null (IFNULL, COALESCE and NULLIF) in MySQL
This article uses examples to explain the knowled...
Basic Implementation of AOP Programming in JavaScript
Introduction to AOP The main function of AOP (Asp...
MySQL users and permissions and examples of how to crack the root password
MySQL Users and Privileges In MySQL, there is a d...
React concurrent function experience (front-end concurrent mode)
React is an open-source JavaScript library used b...
A detailed introduction to Tomcat directory structure
Open the decompressed directory of tomcat and you...
Join operation in Mysql
Types of joins 1. Inner join: The fields in the t...
Solution to the problem of passing values between html pages
The first time I used the essay, I felt quite awkw...
Basic reference types of JavaScript advanced programming
Table of contents 1. Date 2. RegExp 3. Original p...