Shulou(Shulou.com)06/03 Report--

This article focuses on "how to achieve two-way data binding in js". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve two-way data binding with js".

Two-way binding:

Bidirectional binding is based on the MVVM model: model-view-viewModel

Model: model layer, responsible for business logic and interaction with the database

View: view layer, which is responsible for combining the data model with UI and displaying it on the page

ViewModel: view model layer, serving as a communication bridge between model and view

The meaning of two-way binding: when the model data changes, it will be notified to the view layer, and 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 listening, so here we also use accessor listening to achieve simple two-way binding of data.

The implementation of accessor monitoring mainly adopts the native method in javascript: Object.defineProperty, which can add accessor properties to an object, and when accessing or assigning values to the object properties, the accessor properties will be triggered, so using this idea, you can add handlers to the accessor properties.

Here we first implement a simple two-way data binding process of input tags, and first get a general idea of what two-way data binding is.

/ / get the input input box object let input = document.querySelector ('input'); / / create an object without a prototype chain to listen for 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 of changes in input.addEventListener (' blur',function () {model ['user'] = this.value) }) / / when the model layer data changes, notify the view layer data changes. Object.defineProperty (model, 'user', {set (v) {user = v; input.value = v;}, get () {return user;}})

The above code first acquires the Input tag object, and then adds a listening event (blur) to the input element object. When the event is triggered, that is, when the view layer changes, you need 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: to avoid misreading the data due to the existence of the prototype chain when obtaining an attribute).

Use the Object.defineProperty method to add an accessor property to the specified property of the object. When the property of the object is modified, the setter accessor will be triggered. Here, we can assign values to the data of the view layer and update the data of the view layer. Here the view layer refers to the attribute value of the Input tag.

Take a look at the effect:

Enter a data in the text box and print the 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'

At this point, you can see that the data text box has been modified accordingly, affecting the view layer.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.