一、进阶使用组件生命周期

DataSoli中，我们并没有对组件的生命周期做任何封装，完全沿用VUE中生命周期的定义，引用VUE官方的生命周期图示：

初始化运行脚本

在DataSoli中，我们对大部分组件均实现了在组件mounted钩子函数中进行自定义脚本，一般这个脚本都在组件的【交互】-【初始化运行脚本】中进行编辑

在初始化运行脚本中，可以通过this得到当前组件的vm实例，而如果是Echarts图表组件，可以通过this.chart得到Echarts图表的实例。

组件交互

组件交互主要涉及数据交互（数据钻取、数据联动）、DOM交互等。

DataSoli中提供了两种方式实现数据交互：事件总线、内直数据交互流，对于DOM交互，可以通过编辑原生JS或使用JQuery。

DOM交互

DataSoli内置了JQuery，具体JQuery的版本，可以前往API-$查看，大部分情况下我们都可以通过使用JQuery去操作页面中的DOM元素，当然，如果对原生JavaScript更熟悉的，也可以不使用JQuery，我们只是提供多一种选择。

下面通过一些简单的示例说明如何进行一些基本的DOM操作：

示例1：控制单个组件的显隐

操作步骤如下：

1. 先获取图表组件的布局块ID【e4a25c8cfdfe6f4a00ff00828dccec87】，需要注意：一般我们在进行DOM操作时，如果是需要使用ID去获取DOM节点，应该获取的是组件所属布局块的ID，而不是组件ID

2. 在按钮组件的【交互】-【鼠标单击时运行脚本】中添加如下代码

$('e4a25c8cfdfe6f4a00ff00828dccec87').toggle()

示例2：控制多个组件的显隐

此示例中，要求点击按钮之后，同时控制边框组件和柱状图组件的显示隐藏。

实现方式一：

与示例1中的操作同理，我们可以复制边框组件所属布局块的ID与柱状图组件所属布局块的ID，然后在按钮组件的交互脚本中添加如下代码：

// 操作边框组件的显隐

$('105638b80a960d47baf8ce9cb2828c1f').toggle()

// 操作状图组件的显隐

$('e4a25c8cfdfe6f4a00ff00828dccec87').toggle()

或

//JQuery的选择器的使用方式的区别

$('105638b80a960d47baf8ce9cb2828c1f,e4a25c8cfdfe6f4a00ff00828dccec87').toggle()

实现方式二：

实现方式一中是通过ID去查询DOM节点，当我们需要控制的组件显隐的数量比较多时，通过ID的方式就不方便，组件所属布局块中可以给布局块定义自定义Class，基于Class查询多个DOM节点则比较方便， 那么我们给边框组件和柱状图组件都定义Class名称为toggle-div

然后在按钮组件的交互脚本中添加如下代码：

$('.toggle-div').toggle()

事件总线

熟悉VUE的伙伴对于事件总线应该不陌生，DataSoli的事件总线本身就是基于VUE的事件总线EventBus去实现事件的分发，通过在发起事件总线事件时携带回调参数来实现组件之间的数据交互。

虽然通过事件总线的方式实现组件交互，需要用户具备一定的前端编程基础，但事件总线方式，也是最灵活的一种方式。

下面将通过一个【Tab列表组件与多行文本组件之间的数据交互】示例来说明如何使用事件总线

如上图所示，其中多行文本组件中的数据是通过API接口请求获取的数据，我们需要在用户点击Tab列表中的某项之后，改变多行文本组件的API请求参数。

首先多行文本组件的API接口地址为：

接口返回的数据为：

[

{

"value": "我是接口返回的数据，接收的参数：hello"

}

]

操作步骤如下：

1. 发送总线事件：

在Tab列表组件的【交互】-【点击标签项时触发】的脚本编辑框中添加如下代码

// 强烈推荐用法

EventBus.send("clickTabItem",value)

或

EventBus.$emit("clickTabItem",value)

当每一次点击Tab列表组件中的项时，就会执行以上代码，用于发送一次事件总线事件，事件名称为 clickTabItem ，事件总线名称可以任意命名（注意：虽说可以任意命名，但不可携带字符串pn_，因为此字符已经被平台内部占用）， 发送的数据为 value ，value 中存储的是Tab列表组件被点击的项的数据，需要注意，Tab列表组件的这个 value 存储的是一个数组。

2. 接收总线事件：

在多行文本组件的【交互】-【初始化运行脚本】的脚本编辑框中添加如下代码

// 强烈推荐用法

EventBus.receive(["clickTabItem"], (params) => {

this.component.compConfigData.ds_apiPath = ";+params[0]

this.redrawComp()

})

或

EventBus.$on(["clickTabItem"], (params) => {

this.component.compConfigData.ds_apiPath = ";+params[0]

this.redrawComp()

})

此代码在多行文本组件初始化阶段，通过 EventBus.receive 监听了名称为 clickTabItem 的事件总线事件，回调函数中通过 this.component.compConfigData.ds_apiPath=... 去动态的修改了组件的API接口地址，然后执行 this.redrawComp() 对组件进行重绘。

注：当我们去动态修改组件的数据源相关的配置（ds_apiPath、ds_apiHeaders、ds_apiPostData、ds_sql...等）后，都要执行一次重绘操作来使用新的配置进行数据请求。

初始化运行脚本中特有变量

大部分情况下，在组件初始化运行脚本中有以下几个特定的属性变量：

· original_ds_apiPath：当组件能够使用API数据源，那么此变量存储组件原始的（或者叫首次请求的）API接口地址

· original_ds_sql：当组件能够使用直连数据库数据源，那么此变量存储组件原始的（或者叫首次请求的）SQL语句

· original_ds_resultObj：当组件可以配置数据源结果集，那么此变量存储组件原始的（或者叫默认绑定）的数据源结果集

初始化运行脚本中特有变量的作用说明

在讲解事件总线的使用章节中，接收事件总线事件的代码段里，我们看到以下这么一段代码

this.component.compConfigData.ds_apiPath=";+params[0]

这段代码的作用是根据接收到的事件总线传过来的参数去动态修改组件的API接口地址，这里边存在一个问题：我们在动态修改地址的过程中，对整个地址都进行了重新赋值！某些情况下可能我们不想要这样做，而是在原本的API地址之后添加新的参数或拼接新的字符， 我们将多行文本组件的API接口地址改为 ，默认不携带参数str参数，然后总线接收代码的编写改为如下所示：

EventBus.receive(["clickTabItem"], (params) => {

this.component.compConfigData.ds_apiPath = original_ds_apiPath + "?str=" + params[0]

this.redrawComp()

})

内置数据交互流

提示

相比于事件总线的方式，内置数据交互流更为方便快捷，且无需具备太多编程基础即可实现组件之间的数据交互，但为了让编程人员更为灵活的去使用内置交互流，我们还是贴心的为内置数据交互流实现了两种使用方式：一种是【纯配置化方式】，另外一种是【通过脚本手动发起方式】

我们还是通过事件总线中的示例【Tab列表组件与多行文本组件之间的数据交互】来讲解内置交互流的使用方法。

纯配置化方式

一次内置交互流必须具备发送端和接收端，在示例中，Tab列表组件作为发送端发送内置交互流，多行文本组件则作为接收端接收内置交互流

发送端：

我们在Tab列表组件的【交互】-【点击标签项时触发】中进行如下配置

发送方要发送内置交互流，必须勾选上【开启发送权限】，然后配置【绑定到交互变量】，目的是将组件的value值绑定到内置交互流上的特定变量上，这个变量名称必须不能与数据源字段同名，如果上图配置中，我们将value数据源字段绑定到了tabValue交互变量上， 当Tab列表组件的标签项点击时，就会发起一次内置交互流，此交互流中则会将标签项的value值绑定到tabValue变量上发送出去。

接收端：

接收端要接收内置交互流，首先需要在【交互】-【内置数据交互流】中勾选【开启接收权限】

开启接收权限后，我们就可以在组件的API接口地址中通过{{}}语法去读取内置交互变量，下面我们将多行文本组件的API接口地址做如下修改

{{tabValue|hello}}

其中tabValue对应的就是Tab列表组件中配置的tabValue变量名，而|中下划线后面的字符则代表默认值

为什么会使用中下划线设置默认值？

一般情况下，内置交互流属于主动触发，也就是当页面加载完成后，在用户没有进行任何组件的交互操作之前， 是不会发起内置交互流的，那么这个时候，当多行文本组件的API接口地址中使用到了内置交互变量tabValue时，首次加载是读取不到tabValue中有任何值的，这时候就可以使用中下划线来给接口地址设置一个默认请求的值

通过以上的配置，即完成了Tab列表组件与多行文本组件之间的内置交互流数据交互了，当我们点击Tab列表项时，Tab列表会发起一次内置交互流，由于多行文本组件中开启了内置交互流的接收权限，并且在API接口地址中配置了{{}}语法读取了交互流变量，那么系统会自动为多行文本组件使用接收到的内置交互变量对组件进行重绘操作。

通过脚本手动发起方式

DataSoli中提供了工具函数 PnUtil.manuallaunchinteractionstream() 来实现脚本方式发起内置交互流，使用方式与纯配置化的方式区别在于发送端，接收端不需要变动，发送端关闭【内置数据交互流】中的发送权限

然后在【点击标签项时触发】中的脚本编辑框中添加如下代码即可：

PnUtil.manualLaunchInteractionStream("tabValue",value[0])

与配置化的方式同理，manualLaunchInteractionStream函数中第一个参数为绑定的交互变量名，第二个参数则是变量值，置于为什么是value[0]，因为前面章节已说明过，Tab列表中【点击标签项时触发】的脚本中，通过value获取的值是一个数组，在纯配置化方式中，系统默认处理了这个数组值。

双大括号语法

在组件交互章节中讲解到通过使用{{}}语法来读取内置交互变量，需要特别注意：在DataSoli中，此语法仅在以下列出的几种场景中使用：

· 当组件使用API接口数据源时，在API接口地址、API接口的Headers请求头，API接口POST请求参数体中可以使用

· 当组件使用数据库数据源时，编辑SQL语句时可以使用

· 页面轮播组件的页面地址中可以使用

后续可能还会逐步添加更多的适用场景！

使用中下划线配置默认值

{{}}语法主要用于特定场景下读取内置交互变量，在纯配置化方式实现内置数据交互流章节中，提到通过使用|来为读取内置交互变量时设置默认值，其语法解构如下所示：

{{内置交互变量|默认值}}

或

{{内置交互变量|js:一段计算取值的JS脚本}}

值得注意的是：其中设置的默认值通过DataSoli内置的解析器解析后，均转换为字符串类型

提示

DataSoli于20220506版本更新后，已支持在默认值中使用js:语法运行JavaScript代码

js:语法

一般情况下，通过{{}}语法都是为了读取内置交互变量，但某些情况下，我们希望在编辑API接口地址时，或编辑SQL语句时，去运行一段JS代码，读取一些全局变量或做一些简单的逻辑运算构建变量数据时，就可以使用js:语法实现

例如以下API接口地址：

{{js:window.globalStr}}

此接口地址中，使用了js:语法运行一段JS代码，代码中读取全局变量globalStr赋值给str参数。

虽说{{}}语法主要是为了读取内置交互变量，但可以看出，上面的接口地址示例中，和读取内置交互变量没有任何关系，这就是{{}}语法的特别之处，它可以解决我们在编辑API接口地址，或SQL语句时，提供更多的可扩展性。

注意

目前虽说js:语法能够运行JS代码块，但是并不是任何代码均可运行，必须确保这段JS脚本是可取值的，js:语法中无法运行类似一个if语句，或者一段复杂的JS脚本，而此脚本没有任何返回值。

什么是可取值的？ 例如：

· 读取全局变量

· 读取当前页面URL参数

· 运行一段JS运算，例如1+1、"hello"+"world"

内置交互启动器

在内置数据交互流章节中，有简单提到过DataSoli中的内置数据交互流属于主动触发式交互，也就是说必须用户与组件进行交互后，才会发起内置数据交互流，例如页面加载完成后，用户点击了Tab列表组件中某一项时，才会发起一次内置数据交互流。

有没有什么办法可以页面加载完成后，不需要用户做任何操作即可发起一次或多次内置数据交互流呢？内置交互启动器就是为了解决此场景而存在的。

提示

本章节基于内置数据交互流中讲解的示例为基础，如果对内置数据交互流不了解，可以先前往进行查阅了解。

内置交互启动器

使用内置交互启动器，对原有示例中的配置不需要做任何修改，仍然保持原本Tab列表与多行文本组件之前的配置，确保发送端打开发送权限，并且配置发送的内置交互变量，接收端打开接收权限，API接口地址中通过{{}}语法读取内置交互变量， 然后在页面中添加一个内置交互启动器的组件

之后我们即可对内置交互启动器进行配置，目的是在页面中显示的去触发一次内置数据交互流，内置交互启动器中可以添加多个交互队列，一个交互队列的类型可以分为【采用预设】与【完全自定义】，下面分别对其进行讲解说明

采用预设

通过配置预设的配置项来决定本队列需要发起的内置交互流的相关信息，值得注意的是：一个采用预设的配置只能发起一次内置交互流，如需要一次发起一组内置交互流，请使用完全自定义

配置项说明：

· 发起的交互变量：指定当前队列发送的内置交互流绑定的内置交互变量。（根据内置数据交互流章节中的示例，这里我们配置为 tabValue）

· 延迟发起：可以设置延迟发起来延迟执行发起交互流

· 发起值：发起值通过JS代码编辑，默认格式为value=''，发起值可以通过一系列JS代码进行计算赋值，最终必须将计算结果赋值给value变量，否则发起的内置交互流中，绑定的交互变量将会默认使用undefined值。

配置完成之后，我们打开预览查看一下页面的网络请求

通过查看网络请求，我们看到其中调用了两次 getText 接口，第一次的str参数值为hello，这一次调用是多行文本组件自身默认起始加载调用的默认接口地址， 第二次的str参数值为123456，这一次调用则是由内置交互启动器发起的，说明我们的内置交互启动器已经生效了，在页面加载完成后，又由内置交互启动器发起了一次内置交互流来触发多行文本组件的重绘加载。

完全自定义

如果队列采用完全自定义类型，那么发起内置交互流的操作将完全由用户自定义编写的JS来执行，当我们发起内置交互流的逻辑比较复杂的时候，例如需要在一次异步调用之后发起内置交互流，或者需要发起一组内置交互流，就需要使用完全自定义类型

通过脚本方式发起交互流的写法如下所示：

// 手动发起一次内置交互流

// 第一参数：发起的交互变量；第二参数：发送值

PnUtil.manualLaunchInteractionStream(bindingVariateName, value)

// 手动发起一组内置交互流

// 参数为一个数组，其中包含多个数据对象表示每一次交互流的相关数据

// bindingVariateName：发起的交互变量

// value：发送值

PnUtil.multiManualLaunchInteractionStream([

{bindingVariateName: '', value: ''},

{bindingVariateName: '', value: ''}

])

根据此前的实例，完全自定义的写法如下所示：

PnUtil.manualLaunchInteractionStream("tabValue", "123456")

受控模式

细心的伙伴应该会发现，我们使用内置交互启动器来发起内置交互流的时候，由于组件自身默认会请求一次API接口，然后又由内置交互启动器触发了一次内置交互流促使多行文本组件进行重绘又发起了一次接口请求，总共发起了两次请求，显然第一次请求是多余的， 通过【受控模式】，则可以解决此种多余请求的问题。

受控模式解释：当页面处于预览或发布状态下，组件自身初始化时将不请求数据也不执行任何初始化运行脚本，由其他地方的JS脚本或内置交互流启动器来控制发起首次请求

在以上的示例中，我们可以在多行文本组件中打开组件的受控模式，如下图所示：

打开多行文本组件的受控模式之后，页面初始化完成后，多行文本组件将不会进行自身的默认请求，后续由内置交互启动器来触发重绘进行请求，预览一下页面，再次查看网络请求：

可以看到，多行文本组件默认的str参数为hello的请求已经没有了，只有一次str=123456的请求。

共享数据源

共享数据源旨在解决多组件共同使用同一数据源的场景中避免重复请求浪费网络资源的问题！

提示

假设有这么一个场景：页面中存在多个数字滚动器组件，这数个组件中，均使用的是同一个API接口地址去请求数据，接口返回一系列值，这数个数字滚动器组件只是绑定这一个接口返回数据中的不同属性值。

在不使用共享数据源的情况下，我们需要为每一个数字滚动器都绑定API数据源，并各自结合结果集过滤器来读取API请求结果中的属性值，这种实现方式存在以下问题：

· 多余的HTTP请求造成网络资源浪费

· 当API接口地址出现变动，我们需要逐个去修改数字滚动器组件中绑定的API接口地址

使用共享数据源后，我们就可以将API的请求放在共享数据源中，多个数字滚动器组件均绑定此共享数据源，由共享数据源来请求数据统一分发。

下面我们通过一个示例来讲解如何使用共享数据源：

步骤1：首先使用NodeJS开发一个测试接口，接口地址为：，接口代码如下：

// 引入express

let express = require('express')

let app = express()

// 开启跨域

app.all('*', (req, res, next) => {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By", '3.2.1')

res.header("Content-Type", "application/json;charset=utf-8");

next();

});

// 定义接口，接口返回一个JSON对象，其中包含三个属性值num1,num2,num3

app.get('/getNumbers', function(req, res) {

res.send({

num1: 1000,

num2: 2000,

num3: 3000

})

})

// 启动应用

app.listen(8800, function () {

console.log("已启动，根路径：;);

})

步骤2：在画布中拖入三个数字滚动器组件，并各自为其设置标题num1,num2,num3，效果如下图所示：

步骤3：画布中拖入共享数据源组件

然后我们在共享数据源组件的【数据源配置】中配置API接口请求数据，配置结果如下图所示

为了方便其他组件绑定此共享数据源，我们可以为其配置一个备注名称

提示

一般页面发布后都不需要显示这个共享数据源组件，我们可以在发布前将其隐藏

步骤4：为每一个数字滚动器组件配置数据源，使用共享数据源类型，然后选择名称为【统一获取数字信息】的共享数据源，配置结果如下图所示，其中还配置了结果集过滤器来构建数字滚动器所需的结果集格式，如果不了解结果集过滤器的使用，可以前往配置结果集过滤器章节进行查看

上图中仅配置了标题为num1的数字滚动器组件，后面两个也同理进行配置即可，最后呈现出来的效果为

最后我们对页面进行预览，然后打开浏览器控制台，查看【network】栏看看网络请求如下图所示，可以看到，仅进行了一次接口getNumbers的请求

共享数据源如何使用定时轮询

当我们的功能组件绑定了共享数据源之后，组件自身即无法配置定时轮询，因为数据的请求已经转移至共享数据源由共享数据源进行请求并分发数据，因此我们应该在共享数据源中来配置定时轮询

共享数据源采用静态数据类型

当共享数据源使用的是静态数据类型时，我们必须为其配置一个【静态数据延迟加载】的配置属性，默认这个配置属性使用的值为200毫秒，一般情况下我们不需要修改。

为什么要配置【静态数据延迟加载】？

在DataSoli中，共享数据源与其他功能组件一样，作为一个普通功能组件，在页面加载的时候，共享数据源组件和页面内的其他组件的加载顺序是不分先后顺序的，静态数据作为同步数据，如果不配置延迟属性，则会出现某些特殊情况下，绑定了共享数据源的功能组件 先于共享数据源组件加载了，但由于共享数据源组件并没有加载，所以就会造成功能组件找不到对应的共享数据源的静态数据。

代码编辑器使用技巧

我们在使用DataSoli的过程中，经常会需要在线编辑一些JS脚本或CSS去实现我们需要的各种功能效果，那么在DataSoli中，我们贴心的对代码编辑器内置了代码提示和代码补全功能。

代码补全提示

编辑器内置了一些基础的语法校验和代码补全功能，在此技术上我们扩展了pn关键字来使用DataSoli中独有的代码补全，在编辑器中输入关键字pn即可显示这些代码补全提示

自定义Echarts图表

使用【自定义图表】组件，可以在线编辑JS脚本实现Echarts图表的构建，当我们提供的内置图表组件无法满足需求的情况下，自定义图表组件可作为备选方案使用。

注意：自定义图表的所有逻辑都只能通过运行时编写，故难以规避某些语法陷阱导致设计出的页面存在某些无法预知的问题，因此在编写JS脚本过程中尽量注意代码编辑器中的语法错误提示

在画布中拖入【自定义图表】组件，如下图所示：

接下来便可以对图表进行自定义编码配置

使用前须知

1、自定义图表组件中，渲染出的图表不受DataSoli平台中工程图表主题与页面图表主题的影响

2、不建议在自定义图表组件中使用Echarts全局变量进行主题注册（registerTheme）、地图注册（registerMap）、语言注册（registerLocale）等操作，否则会影响整个平台下的其他内置图表主题