Ale.js

Data

开始

组件基础 文章中,相信你已经了解了一些基础的添加数据的方法。如果你还没有学习过这篇教程,请完成学习后再来吧!

在组件基础这篇教程里,你只学到了如何添加 data。那么,为什么要动态添加 data 呢?


其实很简单,因为模板是静态的,而数据是动态的。如果我们更改某一处数据,其实比更改模板简单得多!

例如我们先定义一个名为com1的组件,然后把它渲染出来:

1
2
3
4
5
6
7
8
9
10
11
12
Ale("com1", {
template: function(){
return "Hello " + this.data.name;
},
data: {
name: "World"
}
})

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

渲染结果如下:

那么我们既然知道了可以动态修改数据,那么如何修改呢?


很简单,我们只需要将 Ale.render 函数返回的结果(其实就是 Ale 组件对象)存储到一个变量里:

1
2
3
var app = Ale.render("com1", {
el: "#app"
})

然后再使用这个变量来操作 data 即可:

1
app.data.name = "Ale.js"; /* 重新赋值 */

现在让我们在控制台中输入 app.data.name = "Ale.js",然后你将会看到下方实例动态更新:

同时,我们的数据将会自动绑定在组件内的全部元素上,使用 this.data 即可访问,例如我们来做个记录点击次数的组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 定义组件 */
Ale("counter", {
template: function(){
/* 这里让 this.data.count 自增 */
return "<button onclick='this.data.count++'>You clicked me " + this.data.count + " times.";
},
data: {
count: 0
}
})

/* 渲染组件 */
Ale.render("counter", {
el: "#app"
})

其实数据不光可以应用在模板上,也可以应用在任何支持函数的属性上。当然,每当你更新数据时,这些绑定数据的属性也会得到更新。

具体有哪些属性可以应用数据,请继续往下查看教程!

高级

关于 Vue

如果你了解过 Vue,你将会发现,使用 Vue 设置数据需要添加一个函数,然后使用 return 返回需要的数据:

1
2
3
4
5
data: function () {
return {
/* 这里添加 data */
}
}

Vue 这么做是因为每次 JavaScript 引擎复制对象时,会连同对象的内存地址一块复制,这样会导致一个对象更新时另一个对象也会更新。这时如果我们使用函数每次返回一个对象,就而相当于每次新创建了一个内存地址不同的新对象,就不会有上述问题了。


可是这么做会导致你需要书写的代码量增多,而 Ale 使用深拷贝从对象根部进行扫描,并逐层创建一个全新的对象。这样做会造成一定的性能损耗(小数据量时忽略不计),但是同时也减少了你需要书写的代码量。


如果你需要多个组件共用一套数据,请尝试让一个组件在一次渲染时同时渲染多个元素,或使用 复合组件

更多

你也可以使用 app.data 这种格式设置组件的数据:

1
2
3
4
app.data = {
count: 1,
key: "val"
}

提升性能

在 1.0.0 版本里(及以后),我们让单组件data支持函数类型,能够在极大数据量时显著增加性能(因为不需要深拷贝),不过如果在渲染时动态设置data,那么函数优化将没有任何作用:

1
2
3
4
5
6
data: function(){
/* 需要使用 return 返回 */
return {
count: 0
}
}

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