Skip to content

执行寄连 ​

描述 ​

寄连就是一段js代码。

在做页面的时候,会写一些逻辑处理代码,无论是定义一个函数,循环遍历一个对象,还是发起一个请求,或者做一些初始化操作等。

我们都可以将它们封装成一个一个的处理单元,然后在需要它们的时候进行调用。

我们将一个能够重复使用的代码片段抽离出来,并把它叫做执行寄连,他可以是纯净的函数,也可以是一个复杂的逻辑。

一个页面可以配置很多个寄连,可以在页面整个生命周期内的任意位置和时机进行选择调用,它也能够根据配置自己自动执行。

寄连可以在不同的时间节点执行一些预设的功能,可以把它想象成是一个一个的函数,能够在页面中不同的生命周期来做一些事情。

主要是用来减少系统的业务代码,并达到高复用的目的。

寄连信息列表.png

根据页面查询寄连 ​

根据页面查询寄连.png

点击页面右上角的放大镜图标,可以输入页面的id,然后查询出该页面所配置的所有寄连。

新建 ​

点击右上角新增图标,即可打开新增弹窗。

新建寄连图标.png

寄连包含寄连编码、寄连策略、用途描述、寄连内容等字段。

新建寄连.png

寄连编码 这个比较重要,但是非必填。因为寄连可以是自动执行的。

但如果需要手动执行寄连,那么在页面中需要通过 P.runIt('code', 参数1, 参数2, ...) 来调用,这里用到的code就是对应的寄连编码。

填写完基本信息之后,可以切换到寄连内容选项卡,在该编辑器中编写寄连内容。

寄连内容.png

在这里能够获取到页面所有信息和变量、方法等。它的内容为一个函数,有它自己的this,也能够接收参数,并给予返回值。

比如可以填入如下代码:

js
function _(hot) {
  return this.R.requestData.songList.filter(item => {
    return item.hot > hot
  })
}

其中参数hot就是调用执行寄连时传递过来的,songList 是请求链接返回的数据,它被挂载到 requestData 对象下面,可以通过 this 获取到请求对象 R,然后拿到它下面的请求返回数据对象 requestData。

操作 ​

寄连操作.png

包含了可以对该寄连进行的各种操作。

1. 查看

寄连信息.png

可以查看寄连的详细信息。

2. 编辑

可以编辑基础信息与寄连内容。

3. 复制

可以对该寄连进行复制,以达到快速新建并复用的目的。

4. 删除

删除寄连.png

删除该寄连,并有删除前的信息确认。

5. 视图

如果有视图绑定了该寄连,那么能查看绑定该寄连的所有视图的列表。

5. 页面

如果有页面添加了该寄连,那么能够反查出所有绑定该寄连的页面的列表。

查询 ​

寄连查询.png

可以通过寄连编码、用途描述、寄连内容以及ID进行寄连的查询,支持模糊查询。

点击空格即可唤出查询窗口,输入条件后按回车键执行查询。

可以多个条件同时输入,支持清空条件。

寄连执行策略 ​

初始化执行(未设置策略):获取完页面配置,还未发起任何请求,也未解析视图时,执行该部分代码,可以理解为最先执行的代码。只能获取到页面的初始化配置信息以及一些公共方法属性等,无法获取数据视图及接口返回等的数据。

准备完成(before):此时请求已经发送出去,视图也已经解析完毕,但是还没有开始渲染,执行这部分代码。相比于初始化获取的变量范围,还多了对数据视图的获取,如果一个数据视图绑定了该寄连,那么此阶段执行的寄连将能够直接访问到所绑定的数据视图的配置数据。

最终完成(after):此时接口已经返回数据,页面也渲染完成,最终执行该处代码。已经能够获取到最大范围内的所有变量的访问。

手动执行(handle):当需要执行一个函数或者其他逻辑操作的时候,可以通过code来手动触发它们。

js
{
  /*
   strategy 取值有 before(准备加载)、after(加载完成)、handle(手动触发)。
   除此之外,未设值或者其他值代表初始化执行
  */
  strategy:'before'
}

寄连的内容,在指定为非 handle 值时,寄连的内容直接就是函数体,也就是我们可以直接书写运行的代码即可。

js
this.collectionData.dialogVisible = true;
...

当指定为 handle 值时,我们可以把寄连内容设定为一个函数,可以通过 P.runIt('code',参数) 来进行传参,第一个参数为 code,也就是要执行的寄连,从第二个参数开始,都是传递进寄连函数的参数。

js
function(a, b){
  //处理逻辑
}

寄连代码手动执行的需要写在 function(){} 中,可给 function 添加参数。

寄连中可以访问所有暴露出来的对象:

寄连this对象.png

比如在一个点击事件中可以使用如下方式调用寄连。

js
this.P.runIt("寄连编码", 参数a, 参数b)

可参考 示例