Summary of three methods to implement two-way Data Binding in javascript and three methods to implement javascript

Summary of three methods to implement two-way Data Binding in javascript and three methods to implement javascript

Two-way binding of front-end data

The front-end view layer and data layer sometimes require bidirectional binding, such as mvvm framework, data-driven view, and view state machine, I have studied several mainstream two-way data binding frameworks and summarized them. Currently, two-way data binding is implemented in the following three types.

1. Manually bind

The old implementation method is somewhat like the observer programming mode. The main idea is to define the get and set methods on the Data Object (of course there are other methods ), when calling the get or set data manually, the rendering operation on the UI Layer is started after the data is changed. In scenarios where views drive data changes, the main applications and elements such as input, select, and textarea are used, when the UI Layer changes, you can listen to dom changes, keypress, keyup, and other events to change the data at the data layer. The entire process is completed through function calls.

<! DOCTYPE html> 
2. Dirty checking mechanism

Angularjs, a typical mvvm framework, is used to update operations on the UI Layer by checking dirty data. For more information about angular dirty detection, see-the dirty detection mechanism does not use timed detection. -The dirty data is detected when the data changes. -Angular encapsulates common dom events and xhr events to trigger the digest process of angular. -In the digest process, all watcher instances are retrieved from the rootscope. (For details about angular design, refer to other documents. Here we only discuss data binding.) let's take a look at how to perform dirty Detection: it is mainly to find all the elements related to the data through the set data, and then compare the data changes. If the data changes, perform the command operation.
<! DOCTYPE html> 
3. Hijacking)

The third method is the data hijacking method used by frameworks such as aveon. The basic idea is to use Object. defineProperty listens to the get and set attributes of Data Objects. When there is data read and value assignment, it calls the node command so that the most common = equal sign value can be used. The specific implementation is as follows:
<! DOCTYPE html> 
But it is worth noting that defineProperty supports browsers over IE8. here we can use _ defineGetter _ and _ defineSetter _ for compatibility But browser compatibility reasons, use defineProperty directly. Internet Explorer 8 still needs to use other methods for hack. Run the following code to hack IE8 and defineProperty supports IE8. For example, you can use es5-shim.js. (Ignore in IE 8 or earlier browsers)
4. Summary

First, the example here is just a simple implementation. Readers can deeply understand the similarities and differences between the three methods. A complicated framework also uses this basic idea to snowball roll.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.