Ale.js

Async DOM

Introduction

In version 1.0.0 and later, we allow you to update the DOM using asynchronous queues, which means higher performance.

For example, we have a component that needs to be updated cyclically:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ale("test", {
template: function() {
return this.data.i;
},
data: {
i: 0
}
})

var app = Ale.render("test", {
el: "#app"
})

/* Updated 10,000 times here */
for(var i = 0; i < 10000; i++){
app.data.i++;
}

The component of the above instance will trigger a 10000 component view update in version 1.0-beta.1, and it will only be updated once, the last one in version 1.0.0+.

nextTick

But that means we can’t use innerHTML to get the content in the component, because we can’t detect when it’s finished updating.


Although Ale encourages developers to think alongside data-driven thinking. But I have to admit that sometimes you do need to get the component’s innerHTML. At this point you can use the Ale.nextTick function to add a callback function to Ale’s asynchronous DOM update queue:

1
2
3
Ale.nextTick(function(){
/* Add a callback function as a parameter here */
})

At this point you can get the innerHTML of the component:

1
2
3
Ale.nextTick(function(){
document.querySelector("#app").innerHTML;
})

Advanced

When you update components dynamically, Ale first checks to see if the asynchronous update queue has been created.

  • If the queue has already been created, Ale will update the storage component to a queue and wait for the current queue update to complete before updating.

  • If the queue is not created, Ale will directly create an update queue to complete the update.


Found some errors? Edit on Github!