Ale.js

异步队列

介绍

在 1.0.0 版本及以后,我们允许你使用异步队列更新DOM,这意味着更高的性能。

例如我们有一个需要循环更新的组件:

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"
})

/* 这里更新10000次 */
for(var i = 0; i < 10000; i++){
app.data.i++;
}

上方实例的组件在 1.0-beta.1 版本中将会触发 10000 次的组件视图更新,而在 1.0.0+ 版本中,它只会更新一次,也就是最后的一次。

nextTick

但是这也就意味着我们无法使用 innerHTML 来获取组件里的内容,因为我们无法检测到它到底什么时候完成更新。


虽然 Ale 鼓励各位开发者沿着数据驱动的思维来思考。但是不得不承认的是,有的时候你确实需要获取组件的innerHTML。这时你就可以使用 Ale.nextTick 函数来给 Ale 的异步DOM更新队列添加一个回调函数:

1
2
3
Ale.nextTick(function(){
/* 这里添加一个回调函数作为参数 */
})

这时你就可以获取组件的innerHTML了:

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

高级

当你动态更新组件时,Ale 首先会检测是否异步更新队列已经被创建了。

  • 如果队列已经被创建了,那么 Ale 将会存储组件更新到一个队列中,并等待当前队列更新完成再更新。

  • 如果队列没有被创建,那么 Ale 会直接创建一个更新队列以完成更新。


找到了一些错误?在Github上编辑!