Ale.js

生命周期

开始

在 Ale 中,一个组件共有六种生命状态,分别对应着它们的同名生命周期函数:

  • using(组件被使用时)
  • mounting(组件被插入真实 DOM 时)
  • unmounting(组件移出真实 DOM 时)
  • rendering(组件被渲染时)
  • updating(组件更新时)
  • destroy(组件被销毁时)
  • staticDataUpdating(静态数据更新时)

你可以在定义组件时添加一个名为 life 的属性,并在 life 属性里添加函数:

1
2
3
4
5
6
7
8
9
10
Ale("test", {
template: "test",
life: {
/* 这里添加life属性,需要为object */
/* 添加using函数,当组件被使用时触发 */
using: function(){
alert("using!");
}
}
})

高级

除了 using 函数,其他的函数都将自动绑定 Ale 组件对象。如果你需要更改 data,请使用 this.data 这种形式更改:

1
2
3
4
5
6
7
8
9
10
Ale("test", {
template: "test",
life: {
/* 这里添加life属性,需要为object */
/* 添加rendering函数,当组件被渲染时触发 */
rendering: function(){
console.log(this.data); /* 打印data */
}
}
})

在线实例

让我们来制作一个定时器,输出当前时间,每秒更新一次:在jsfiddle上查看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ale("timer", {
template: function(){
return "Now Time: " + this.data.time
},
data: {
time: new Date().toLocaleTimeString()
},
life: {
mounting: function(){
/* 这里需要使用箭头函数,因为不会绑定 this */
this.timer = setInterval(() => {
this.data.time = new Date().toLocaleTimeString();
}, 1000);
},
unmounting: function(){
clearInterval(this.timer);
}
}
})

Ale.render("timer", {
el: "#app"
})

上方定时器不会应用 Ale 内置的 diff 算法,因为你需要将不需要更新的元素用 DOM 标签包裹起来:

1
2
3
template: function(){
return "<span>Now Time: </span>" + this.data.time
}

现在你可以打开控制台,对比一下这两个实例 DOM 的刷新,你会发现这个实例的 Now Time: 并没有更新。


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