Ale.js

In-depth responsive principle

Introduction

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.

Limit

Affected by modern JavaScript (and 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:

1
2
3
4
5
6
7
data: {
a: 1
}

data.a = 2; /* Responsive */

data.b = 2; /* Non-responsive */

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:

1
2
3
4
data: {
a: 1,
b: '' /* Need to be set to empty here */
}

Specific

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 content \ attribute [1.1.0 version will only compare content \ id \ class \ 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!


Found some errors? Edit on Github!