8. 数据读取和处理

视频介绍

大家好，欢迎大家回到我们的山海鲸二次开发教程。今天，我们来给大家补充最后一个关于自定义属性面板的内容，即如何实现自定义数据属性，并一起探讨数据的读取和处理。

具体来说，我们将学习如何在二次开发中创建一个自定义的数据属性，并绑定数据。绑定数据后，我们将读取这些数据并进行一些运算，最终将结果显示在界面上。今天要演示的项目是绑定一些销售数据，通过计算得出这些数据的总和，并显示在界面上。

现在，我们这里已经添加了一个单行的文本。之前我们写了一些代码，今天我们可以在这个代码脚本上再挂载一个脚本。前面提到过，一个组件是可以挂载多个脚本的，既可以用上下显示的方式，也可以用Tab的显示方式。 挂载完脚本后，我们点击编辑，调出代码。调出代码后，我们首先来看一下如何创建一个数组类型的自定义数据属性。

我们可以到自定义属性面板里面，找到所有的自定义属性，然后找到我们的数据字段。通过这种方式，我们可以看到一个field和一个default。我们可以设置这个field可以绑定多少个字段。例如，表格可能可以绑定很多个字段，每一列一个字段；而有的可能只能绑定一个。这其实是一个很简单的设置，我们默认也可以不去设置，以保持灵活性。一般来说，大家对数据来说也不会去错误地绑定。

field有下面这些方法：default（创建）、read data（异步读取）、read data sync（同步读取，返回一个promise）以及static（直接读取，使用field.read data）。为什么我们需要一个static的方法呢？有时候，我们需要同时读取某几个字段，那就需要合并读取，这时就可以使用这种方式。这些都是一些高阶用法。

看完这些API后，我们可以到技术教程里面找到数据读取的完整案例，学习如何读取数据。今天，我们就以这个案例为准，一起来看一下。

首先，我们将这段数据复制出来，放到Excel里面，保存一下数据，就可以把它接入进来了。然后，我们创建一个field的属性。我们到二开里面去，把这个field的属性给创建出来。我们可以在注释代码中找到这个field，也可以直接去搜索，找到field debug5，然后取消注释。

接下来，我们需要去读取它。这里也有一个异步读取的方法，我们先看一下。在教程当中，会有一个说明，重点是两种读取数据的方式：read data和read data sync。read data是直接用回调的方式读取的，而read data sync是返回一个promise。虽然写法上read data sync会更加简洁，但我们依然推荐大家用read data方法。因为read data将在第一次读取的时候和数据发生变化的时候都会触发回调，这样我们就可以把数据处理的代码统一写在回调函数中，不需要在首次读写和数据变化时分别写代码。

read data有一个回调函数，叫callback on data changed。这个回调函数在数据内容变化或者设置项修改的时候都会触发，而且第一次也会触发。我们只需要在这里写数据处理的逻辑就可以了，不需要在首次进来时处理一次，数据变化时再写一段代码，这样会很重复。如果你去写read data sync，它相当于是一个主动触发的方法，没有这样的机制，所以写起来就会略显重复。

因此，我们直接用这个read data方法。我们找到这个read data的方法，取消注释。注意，一定是要这个callback on data changed为true，否则的话，数据变化的时候就不会回调。

然后，我们先不着急去处理它，就直接打印它。我们在这里面去绑定一下这个数据，选择我们刚刚的这个配置，然后刷新一下，数据就出来了。

数据出来之后，它到底在哪里设置呢？我们既可以直接点击它，在数据Tab下，它会对每一个二次开发的代码去生成一个数据的子Tab。当然，如果你里面没有数据字段，那它就没有了。像我们这个sample 3就没有，而sample 7就有，这里有debug 5。我们事先已经把我们之前的数据已经做好了，已经绑定进来了。如果大家不知道怎么绑定，我们直接点这个编辑，然后点Excel，选择我们这样的一个Excel数据。这里有个勾选框，叫“是否拷贝数据文件到根目录下”。这要看你的需求，比如说如果我们拷贝的话，我们以后导出这个项目，它就会把这个Excel一起带着，数据也带着去导出了。如果我们不拷贝的话，相当于它就在你本来的那个位置，比如说本来放桌面，那它就在桌面。默认我们就不拷贝吧，我们一会要改它。

这样子，我们就得到了这样的一个数据。我们中间因为要去修改它，所以我们可以一般来说，点击这里，然后就打开文件夹，那我们就可以打开它了。我们打开这个文件夹，因为这个是双屏的，现在它打开在另外一个屏幕上，我们把它拖进来。打开在这里，这就是我们刚刚的那个数据了。我们一会要改动它。

这个数据完成了之后呢，我们把我们的这个销量，大家看一下，销量这一列，我们把这个销量绑定在这个debug 5上。绑定上去，保存一下。理论上这时候就应该打印了。我们看一下它的打印，它打印出来是这样子的。

这样子的是一个什么样的数据结构呢？我们继续来看我们的文档。文档中说了，我们一共有三种读取方式，哪三种呢？分别叫object、row和column。这三种在我们的代码注释中有详细的解释。我们默认就是row，我们现在打印出来就是row。我们看一下，只针对这样一个数据表格，如果它是row的话，那就是A1、B1、C1，就这样一排一排的数组，A2、B2、C2，A3、B3、C3，就这样子的。

我们这里之所以打印出来是这个呢，是因为我们只绑定了一个字段。看一下，我们绑定了一个字段销量，那么它就打印出销量，然后每一个销量它都是一个字段。那我们如果再拉一个字段上去，好，可以看到咖啡329、橙汁725、酸梅汁363、开心果619，这就是我们的row的方式。

我们再看一下object方式。object方式其实更加干净、更加整洁。也就是说，我们一般来说，如果你希望你的代码完全不出错，并且不是很hack，那我们其实也推荐object方式。在写代码的时候会有什么区别呢？比如说我这里要去加它，那我可能就是轮询到每一个row，然后用row下标一来拿到这个销量。那这样子呢，它好处就是非常简单，不好的地方就在于，假设我这个数据绑定变了，它不是一了，对吧？它是又多了一个，前面又多了一个，那它可能是2了，那就不是很稳定。这段代码如果用我们的object方式，它就很稳定。我们直接可以用它的key值，然后来获取它的value值。这样子，它就算是绑这整个顺序发生变化，字段的数量发生变化，它都不会导致我这段代码失效。

column是另外一种情况，就是它跟row是对应的。你看，它每它是每一列作为一个数组，那它是这a列作为A1、A2、A3，然后作为一个数组，然后b列B1、B2、B3，c列C1、C2、C3。所以说如果我们加权这一列，其实我们用column也很方便，对吧？我们用column之后呢，我们把这一列直接拿出来，这个数组直接sum就完了。这是一个非常非常方便的方式。但今天呢，我们既然默认是row，我们就带大家写row的模式。其他两种模式，大家可以去自己探索一下。

好，我们回到我们这里的代码。我们刚刚已经结束试了，现在我们已经打印了row的方式。我前面说了，它最大的问题就在于它的兼容性不好。所以呢，我们要看我们现在绑定的是什么数据，也就是它对这个数据的绑定是有要求的。比如我现在绑定的是这样的数据，代表着我需要拿到的这个销量是在下划线一上。那我们来for循环一下，首先我们for一个row of data，然后我们每一个的销量sale number等于row下划线一，然后我们在外面定一个sum，然后我们在这里加上sale number，然后在结束的时候，把它设置给它的文字属性。就像我们前面一样，点击这个样式，找到这个文本，调用设置项，我们把它贴上去，然后我们把这个sum放进来。严谨一点呢，那我们再给它做一个类型转换，这样子会更好。直接设置其实也是可以的。我们来看一下我们这段代码有没有生效呢？我们到代码这边来刷新，其实这边直接打印的是代表它生效了。我们看到，哎，我们这个已经加权加出来了。我们看一下加的对不对，这是1000，这是1000，这也是1000，非常好，这加是对的，那就是我们的总销量了。

那这个时候我们来测试一下，我们这个代码如果数据变化的时候，会不会自动变化哈。我们找到我们的数据，点编辑数据，点它点打开文件夹，这我刚刚演示过了，我直接点开我们刚刚那个数据。好注意，大家一定要注意，就是说如果大家在刚刚用Excel这种数据的形式的时候，如果大家是在勾选了那个拷贝的情况下，大家一定不要去编辑原文件，因为那个相当于原文件已经失去了跟这个数据的关系了。大家要看根据我刚刚的这种方式，点它然后点这个文件夹去打开它。哎，我这里本来就是原文件，所以我就直接给它加1000保存。我们回到这里，这就要看设置了。如果说我们设置的是我们这个数据每秒刷新，那么在真正播放的时候（注意不是在编辑的时候，在预览的时候，或者你最终交付给你客户的时候），它就会每秒刷新的，那我们就不需要去做什么操作了，它一会就一秒就刷新掉了。如果说比如其他的数据，比如Web SOCKET这种，那它就直接会根据你的push去刷新。那这里我们在编辑状态下，并且我们是Excel的，那这个我们需要去手动刷新一下，我们点击这个数据刷新。我们看到这边刷新了，这边正好加了1000，这个就是完整的一个我们如何去绑定我们的数据自定义属性。

看一下绑定一个数据自定义属性，在这里有一个设置项，我们把它开出来之后，在这里可以绑定。绑定数据之后呢，我们在代码当中对整个数据用read data回调的方式进行一个计算，并且设置到我们的文本组件上去。而且大家记得，read data那么它是每次数据内容变化或者数据事项修改的时候都会触发这个回调，所以我们可以把所有的数据处理代码就写在这一遍就好了。

好，今天的课程就到这里，谢谢大家。