In-depth responsive principle
Ale adds setters and getters to objects using ES5’s new
defineProperty property. At the same time Object.defineProperty is a feature in ES5 that cannot be shim, not syntactic sugar, which is why Ale does not support IE8 and lower browsers.
Object.observe has also been deprecated), Ale cannot detect the addition or deletion of object properties. Since Ale will perform a getter/setter conversion procedure on the property when it initializes the instance, the property must exist on the data object in order for Ale to convert it so that it is responsive. E.g:
So when you set the data, Required sets the value that needs to have responsive effect data, even if it’s just a null value:
When you trigger the setter (when the operation data is updated), Ale first updates the data, then calculates the updated attribute results and updates them in a loop.
Among them, the
template attribute is special. When the data update is completed, Ale will call the function of
diff algorithm and generate a
pseudo DOM structure. Ale’s diff algorithm will compare
pseudo DOM structure and
reality. The difference between DOM structure and only update DOM elements with differences.
In addition, the diff comparison will only be done in the peer DOM. Once a level change occurs, Ale will not continue to compare, but update the entire layer directly. This can effectively increase the contrast performance of diff and reduce the time of comparison.
Another point is that Ale’s
diff algorithm compares the element’s
attribute [1.1.0 version will only compare
name] is it the same, when you dynamically update other types of content, the
diff algorithm does not compare the differences, and the elements are not updated. At this point you can manually turn off the
diff algorithm when the element is updated and open it when the element update is complete!