Ale.js

调试模式

更新信息

1.0.0 版本已经移除了 debug 配置。如果想实现类似效果,请使用 proxy 参数。

开始

当你有一个庞大的前端系统时,如果没有办法监测数据的变化,那么调试就将变成噩梦。

debug 参数的出现很好地解决了这个问题,你可以在组件定义渲染时添加debug参数(渲染时的debug参数将会完全覆盖定义时设置的debug参数):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 在定义时添加 */
Ale("test", {
/* ...... */
debug: {

}
})

/* 或者在渲染时动态添加 */
Ale.render("test", {
/* ...... */
debug: {

}
})

debug参数内置有两个函数:settergetter,分别监测组件数据的设置和获取 (其中,setter和getter各需要一个参数,用来接收值)

1
2
3
4
5
6
7
8
9
10
11
Ale("test", {
/* ...... */
debug: {
setter: function(val){
console.log("你设置了我为:"+val);
},
getter: function(val){
console.log("你获取了我:"+val);
}
}
})

上方实例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Ale("test", {
template: "在控制台中获取或重设 app.data.data1 的值,然后查看控制台中的输出信息",
debug: {
setter: function(val){
console.log("你设置了我为:"+val);
},
getter: function(val){
console.log("你获取了我:"+val);
}
},
data: {
data1: "Hello"
}
})

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

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