当前位置: 首页 > 文档资料 > ThingJS 文档中心 >

组件 JavaScript 接口

优质
小牛编辑
140浏览
2023-12-01

ChartBuilder3.0版本的所有组件都提供JavaScript脚本编写和控制功能,ChartBuilder开放的组件控制接口包括如下几类:

  • 组件样式控制
  • 组件数据控制
  • 辅助工具调用
  • 组件动画控制

此文档适合ChartBuilder实施人员使用,在ChartBuilder工具上写JavaScript的时候,在输入this.之后,代码行也会给相应的API提示,选择API后再代码行里也会有辅助的注释一起添加到代码中供实施人员参考。

getOptions

接口简要描述:

通过该接口可以获取图表的样式配置参数,获取后可以根据用户的业务需求对配置参数进行修改,修改完成后立即生效

入参: 无

返回值: JSON对象

返回值示例:

Echarts&Highcharts返回值

{
    "legend": {
"orient": "vertical",
"left": "left",
"textStyle": {
"color": "auto"
},
"data": [
"直接访问2",
"邮件营销",
"联盟广告",
]
    }
    "tooltip": {
"formatter": "{a} <br/>{b} : {c} ({d}%)",
"trigger": "item"
    },
    "title": {
"x": "center",
"text": "某站点用户访问来源",
"textStyle": {
"color": "#ccc"
}
    },
    "color": [
"#2b908f",
"#90ee7e",
"#f45b5b",
"#7798BF",
"#aaeeee",
"#ff0066",
"#eeaaee",
"#55BF3B",
"#DF5353",
"#7798BF",
"#aaeeee"
    ]
}

自定义图表返回值(这里一文本组件为例)

{
    "backgroundColor": "rgba(0, 0, 0, 0)",
    "borderColor": "rgba(0, 0, 0, 0)",
    "whiteSpace": "normal",
    "color": "rgba(113,252,244,1)",
    "textAlign": "center",
    "letterSpacing": "0px",
    "textDecoration": "none",
    "fontStyle": "normal",
    "textIndent": "0px",
    "fontFamily": "sans-serif",
    "borderWidth": "0px",
    "fontSize": "18px",
    "lineHeight": "45px",
    "borderStyle": "none",
    "fontWeight": "normal",
    "height": "100%"
}

调用demo:

demo1:修改饼图的标题和标题字体大小

let options = this.getOptions()
//先判断options中是否存在title,如果不存在先创建个空对象
if(!options.hasOwnProperty('title')) {
    options['title'] = {}
}
options.title['text'] = '你想要的饼图标题'
//先判断字体样式的textStyle是否存在,如果不存在先创建个空对象
if(!options.title.hasOwnProperty('textStyle')) {
    options.title['textStyle'] = {}
}
//将标题的字体大小设置成12px
options.title.textStyle['fontSize'] = '12px'

demo2:修改文本组件的字体颜色和对其方式

//由于文本组件属于非Echarts和Highcharts组件,所以options只有一级,这里不用想demo1一样进行key是否存在判断,直接拿到options后进行设值即可
let options = this.getOptions()
options['color'] = 'rgba(255,0,0,1)' //这里可以设置hex格式颜色
options['textAlign'] = 'left' //设置成距左对其

备注:

返回的JSON对象中包含图表的各项样式控制参数,分为三类

  1. Echarts图表: 跟随echarts官网的各类options,Echarts的options一般都分为多层级,通过不同的分类对图表进行控制
  2. Highcharts图表: 跟随Highcharts官网的options,Highcharts的options一般都分为多层级,通过不同的分类对图表进行控制
  3. 自定义图表: 跟随css3的样式,自定义不表的样式都只有一级,opitons的key和css3相同

setOptions

接口简要描述:

通过该接口可设置当前组件的样式属性,这类操作一般用在空白自定义组件,空白Echarts,空白Highcharts中比较多,操作为完全定义一个新的options然后赋值给图表的options属性,当前在系统中定义好的图表也可以使用该操作重写系统预定义的options配置

入参: options:JSONObject

Echarts和Highcharts的options格式需要符合各自官网的options要求

自定义图表的options要符合css3的要求

返回值: 无

返回值示例: 无

调用demo:

使用空白Echarts组件创建一个饼图

let options = {
    title: {
text: '自定义饼图'
textStyle: {
color: #ccc,
fontSize: 12
}
    },
    series:[{
type:'pie',
data:[]
    }]
}
//初始化饼图所需要的数据
let data = [
    {
"value": 18020,
"name": "综合医院"
    },
    {
"value": 3462,
"name": "中医医院"
    },
    {
"value": 6642,
"name": "专科医院"
    },
    {
"value": 926518,
"name": "基层医疗卫生机构"
    },
    {
"value": 34327,
"name": "社区卫生服务中心(站)"
    }
]
series[0].data = data
this.setOptions(options)

备注: 无

getDefaultColor

接口简要描述: 通过该接口可以获取该组件的默认色系数组,可以对默认色系的修改来创造自定义的色系

入参: 无

返回值:

JSON数组,数组中的每一项是颜色字符串,可以是rgba,rgb,hex格式的色值

返回值示例:

一下是系统默认的5个色系,用户可以根据需求自行修改或添加

[
[
  "#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"
],
[
  '#C1232B', '#27727B', '#FCCE10', '#E87C25', '#B5C334', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B'
],
[
  '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa', '#07a2a4'
],
[
  '#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487', '#7798BF', '#aaeeee', '#DF5353'
],
[
  '#E01F54', '#001852', '#f5e8c8', '#b8d2c7', '#c6b38e', '#a4d8c2', '#f3d999', '#d3758f', '#dcc392', '#2e4783', '#82b6e9'
]
      ]

调用demo:

修改默认色系中的一个颜色为正红色

let colors = this.getDefaultColor()
//修改数组中的第一项
colors[0][0] = 'rgba(255,0,0,1)'

备注:

setComponentSize

接口简要描述: 通过该接口可以设置组件的容器大小,修改组件容器的大小会影响容器内图表的大小(系统预定义组件全部根据容器的大小进行百分比渲染),如果是用户自定义组件则要看用户是否按照容器的百分比进行图表组件的渲染

入参:

width: 数值型,组件容器的宽度

height: 数值型,组件容器的高度

备注:两个参数必须同时传入,且顺序不可颠倒

返回值:

返回值示例:

调用demo:

修改默认色系中的一个颜色为正红色

//将组件的宽高分别设置为500px和500px
this.setComponentSize(500,500)

备注:

getDom

接口简要描述: 通过该接口可以获取组件的容器DOM节点,从而用户可以通过JQery等外部工具对DOM节点进行直接操作

入参:

返回值:

DOM对象

返回值示例:

调用demo:

向组件的容器中增加一个div

let dom = this.getDom
//通过jquery工具在dom节点上增加一个div
let JQuery = this.getJquery()
JQuery(dom).append('<div>Hello World!</div>')

备注:

clearDom

接口简要描述: 通过该接口可以清空组件容器中的任何内容,清空后组件的容器依然存在

入参:

返回值:

返回值示例:

调用demo:

清空组件容器

this.clearDom()

备注:

这样的操作需要慎重,因为清除后DOM节点中将不会有任何图表的存在

getComponentData

接口简要描述: 通过该接口可以获取当前图表的业务数据,该业务数据可能是静态JSON或者从RESTAPI、数据库、订阅其它组件的数据等,通过该接口获取图表的业务数据后,可以进行再次处理,处理后立即生效.

入参: 无

返回值: JSON对象或JSON数组

返回值示例:

JSON对象返回值

这类数据一般使用在自定义组件和饼图等分类展示的图表中,目的是表达每个分类中数据的分布状况

下面例子是国家统计局统计2016年各类医疗机构的数量分布

[
    {
"value": 18020,
"name": "综合医院"
    },
    {
"value": 3462,
"name": "中医医院"
    },
    {
"value": 6642,
"name": "专科医院"
    },
    {
"value": 926518,
"name": "基层医疗卫生机构"
    },
    {
"value": 34327,
"name": "社区卫生服务中心(站)"
    }
]

JSON数组返回值

这类数据一般使用在Echarts和Highcharts的统计类的趋势图或者分布对比图等,例如:统计2012-2016连续5年国家综合医院数量和专科医院数量用多柱状图比较合适,再例如:统计连续3年1-12月份平均气温对比则使用多线条图则比较好

这类数据一般都会有多个系列,和一个表达时间跨度的X轴,所以下面的数据name一般为X轴的数据,除name之外的其它数组序列则表示不同的系列

下面例子是国家统计局统计近5年综合医院和专科医院的数量趋势对比

{
    "name": [
"2016",
"2015",
"2014",
"2013",
"2012"
    ],
    "综合医院数": [
18020,
17430,
16524,
15887,
15021
    ],
    "专科医院数": [
6642,
6023,
5478,
5127,
4665
    ]
}

调用demo:

由于2016年医院数量统计的误差(此事纯属虚构),将每类医院加20

let data = this.getComponentData()
//循环每个对象,将每个对象的value+20
if(Array.isArray(data) {
    for(let i = 0 ; i < data.length ; i++) {
if(data[i].hasOwnProperty('value')) {
value += 20
}
    }
}
//这样处完的data就每项value增加了20,并且立即生效

备注: 无

getSceneData

接口简要描述: 通过该接口可以获取当前场景中所有图表的业务数据,可以对业务数据进行二次处理,处理后立即生效

警示:这里处理完会立即生效,所以慎重操作,并且如果数据量大的情况下会造成卡顿,如果只需要对仅有的几个图表数据进行处理,请使用下一个API:getSceneDataById

入参: 无

返回值: {key:value}

key:场景中各个组件的ID

value:场景中各个组件对应的业务数据

返回值示例:

{
    'epie-00010abcd0-aaa':[
        {
            "value": 18020,
            "name": "综合医院"
        },
        {
            "value": 3462,
            "name": "中医医院"
        },
        {
            "value": 6642,
            "name": "专科医院"
        },
        {
            "value": 926518,
            "name": "基层医疗卫生机构"
        },
        {
            "value": 34327,
            "name": "社区卫生服务中心(站)"
        }
    ]
}

调用demo:

获取场景中所有图表的业务数据

let data = this.getSceneData()
//这里就可以使用js对data进行各种处理了,处理完成后立即生效

备注:

返回值中的key是每个图表的ID,前几个字母是组件的类型,例如上面例子中的epie则表示该组件是一个echarts的饼图,如果是hpie则表示是一个highcharts的饼图

getSceneDataById

接口简要描述: 通过该接口可以获取当前场景中某个组件的业务数据

入参:

id:字符串类型,目标组件的id,可以在组件工具条上点击复制组件ID按钮进行复制

返回值:

JSON对象或者JSON数组,根据该组件的业务数据类型返回

返回值示例:

{
    "name": [
"2016",
"2015",
"2014",
"2013",
"2012"
    ],
    "综合医院数": [
18020,
17430,
16524,
15887,
15021
    ],
    "专科医院数": [
6642,
6023,
5478,
5127,
4665
    ]
}

调用demo:

获取场景中统计2012-2016综合医院和专科医院数量双柱图的业务数据

let data = this.getSceneDataById('ebar-abcd-def')
//这里就可以使用js对data进行各种处理了,处理完成后立即生效

备注:

返回值就是目标组件的业务数据

getSceneDataByAlias

接口简要描述: 通过该接口可以按照组件别名获取当前场景中某个组件的业务数据

入参:

alias:字符串类型,目标组件的别名,可以打开组件对接数据面板去获取别名

返回值:

JSON对象或者JSON数组,根据该组件的业务数据类型返回

返回值示例:

{
    "name": [
"2016",
"2015",
"2014",
"2013",
"2012"
    ],
    "综合医院数": [
18020,
17430,
16524,
15887,
15021
    ],
    "专科医院数": [
6642,
6023,
5478,
5127,
4665
    ]
}

调用demo:

获取场景中统计2012-2016综合医院和专科医院数量双柱图的业务数据

let data = this.getSceneDataByAlias('ebar-abcd-def')
//这里就可以使用js对data进行各种处理了,处理完成后立即生效

备注:

返回值就是目标组件的业务数据

getPublishData

接口简要描述: 通过该接口可以获取当前场景中所有接数组件所发布的数据

备注:场景中不仅仅业务数据可以接数,在3.0版本的ChartBuilder中 还增加了接数组件,通过接数组件接进来的业务数据会自动发布到ChartBuilder的场景中,同场景中其它的图表组件可以通过订阅的方式来获取接数组件的数据

入参: 无

返回值:

{key:value}

key:接数组件的id

value:接数组件所接如的业务数据

返回值示例:

{
    'cdata-00010abcd0-aaa':[
        {
            "value": 18020,
            "name": "综合医院"
        },
        {
            "value": 3462,
            "name": "中医医院"
        },
        {
            "value": 6642,
            "name": "专科医院"
        },
        {
            "value": 926518,
            "name": "基层医疗卫生机构"
        },
        {
            "value": 34327,
            "name": "社区卫生服务中心(站)"
        }
    ]
}

调用demo:

获取场景中某接数组件的数据,并复制一份给该图表使用

let data = this.getPublishData()
//从返回的众多数据中找到我需要的某个接数组件数据(需要预先知道接数组件ID)
let goalData = data['cdata-00010abcd0-aaa']
//深度拷贝一份id为cdata-00010abcd0-aaa的数据,这里要借助于JQuery工具进行深度复制
let JQuery = this.getJquery()
let cpData = null
if(goalData) {
    //如果goalData是一个对象可以入下复制,如果是一个数组则需要将下一行代码的{}修改为[]即可
    cpData = JQuery.extend(true,{},goalData)
}
//如果cpData为真则可以将该数据该本图表使用(这里假设本图表为一个饼图)
//先获取饼图的options
let options = this.getOptions()
options.series[0]['data'] = cpData
//这样就会立即使用新数据去渲染该饼图

备注:

通过订阅获得的数据,最好深度拷贝一份出来进行处理,要不然在一个组件中进行处理后,原始数据就变了,其余组件无法使用

getPublishDataById

接口简要描述: 通过该接口可以获取当前场景中某个接数组件所发布的数据

备注:场景中不仅仅业务数据可以接数,在3.0版本的ChartBuilder中 还增加了接数组件,通过接数组件接进来的业务数据会自动发布到ChartBuilder的场景中,同场景中其它的图表组件可以通过订阅的方式来获取接数组件的数据

入参: id:字符串类型,为接数组件的id,需要提前知道

返回值:

接入的业务数据类型,可以是JSON对象或者JSON数组

返回值示例:

{
    "name": [
"2016",
"2015",
"2014",
"2013",
"2012"
    ],
    "综合医院数": [
18020,
17430,
16524,
15887,
15021
    ],
    "专科医院数": [
6642,
6023,
5478,
5127,
4665
    ]
}

调用demo:

获取场景中某接数组件的数据,并复制一份给该图表使用

let data = this.getPublishDataById('cdata-00010abcd0-aaa')
//从返回的众多数据中找到我需要的某个接数组件数据(需要预先知道接数组件ID)
let goalData = data
//深度拷贝一份数据,这里要借助于JQuery工具进行深度复制
let JQuery = this.getJquery()
let cpData = null
if(goalData) {
    //如果goalData是一个对象可以入下复制,如果是一个数组则需要将下一行代码的{}修改为[]即可
    cpData = JQuery.extend(true,{},goalData)
}
//如果cpData为真则可以将该数据该本图表使用(这里假设本图表为一个饼图)
//先获取饼图的options
let options = this.getOptions()
options.series[0]['data'] = cpData
//这样就会立即使用新数据去渲染该饼图

备注:

通过订阅获得的数据,最好深度拷贝一份出来进行处理,要不然在一个组件中进行处理后,原始数据就变了,其余组件无法使用

getPublishDataByAlias

接口简要描述: 通过该接口可以获取当前场景中某个接数组件所发布的数据

备注:场景中不仅仅业务数据可以接数,在3.0版本的ChartBuilder中 还增加了接数组件,通过接数组件接进来的业务数据会自动发布到ChartBuilder的场景中,同场景中其它的图表组件可以通过订阅的方式来获取接数组件的数据

入参: alias:字符串类型,为接数组件的别名,需要提前知道

返回值:

接入的业务数据类型,可以是JSON对象或者JSON数组

返回值示例:

{
    "name": [
"2016",
"2015",
"2014",
"2013",
"2012"
    ],
    "综合医院数": [
18020,
17430,
16524,
15887,
15021
    ],
    "专科医院数": [
6642,
6023,
5478,
5127,
4665
    ]
}

调用demo:

获取场景中某接数组件的数据,并复制一份给该图表使用

let data = this.getPublishDataByAlias('cdata-00010abcd0-aaa')
//从返回的众多数据中找到我需要的某个接数组件数据(需要预先知道接数组件ID)
let goalData = data
//深度拷贝一份数据,这里要借助于JQuery工具进行深度复制
let JQuery = this.getJquery()
let cpData = null
if(goalData) {
    //如果goalData是一个对象可以入下复制,如果是一个数组则需要将下一行代码的{}修改为[]即可
    cpData = JQuery.extend(true,{},goalData)
}
//如果cpData为真则可以将该数据该本图表使用(这里假设本图表为一个饼图)
//先获取饼图的options
let options = this.getOptions()
options.series[0]['data'] = cpData
//这样就会立即使用新数据去渲染该饼图

备注:

通过订阅获得的数据,最好深度拷贝一份出来进行处理,要不然在一个组件中进行处理后,原始数据就变了,其余组件无法使用

getEcharts

接口简要描述:

通过该接口可以获取Echarts工具,因此您可以按照自己的逻辑在空白组件中去生成和渲染自己的图表组件

入参:

返回值:

Echarts4.1.1版本工具包

返回值示例:

调用demo:

获取Echarts工具

let ec = this.getEcharts()

备注:

新手慎用,因为在对Echarts不了解或者对ChartBuilder业务数据处理不了解的状况下贸然行事,很容易造成内存泄露或者死循环

getHightcharts

接口简要描述:

通过该接口可以获取Highcharts工具,因此您可以按照自己的逻辑在空白组件中去生成和渲染自己的图表组件

入参:

返回值:

Highcharts6.X版本工具包

返回值示例:

调用demo:

获取Highcharts工具

let hc = this.getHightcharts()

备注:

新手慎用,因为在对Highcharts不了解或者对ChartBuilder业务数据处理不了解的状况下贸然行事,很容易造成内存泄露或者死循环

getJquery

接口简要描述:

通过该接口可以获取JQuery1.8.3工具,因此您可以按照自己的逻辑在空白组件中去生成和渲染自己的图表组件

入参:

返回值:

JQuery1.8.3版本工具包

返回值示例:

调用demo:

获取Jquery工具

let jq = this.getJquery()

备注:

该组件一般在用户在空白组件上创作自己新组件的时候用到的比较多,可以用于二次数据绑定

doComponentAnimate

接口简要描述:

执行组件动画,3.0版本ChartBuilder每个组件(包含空白组件)都会绑定ChartBuilder动画编排系统,因此用户可以通过该API去自由执行组件动画,系统的动画系统使用TWEEN.js

入参:

obj: JSON对象,动画的过度参数包含:rotate,scale,translateX,translateY,opacity 5个参数

ctime: 数值型,动画执行时长,单位为毫秒

animateType: 字符型,动画类型,包含show/hidden/move,move为自定义动画

callback: 函数类型,动画执行完成后执行的回调函数,此项可以为null

waitingTime: 数值型,默认值为0,动画执行完成后等待多长时间执行回调函数

返回值:

返回值示例:

调用demo:

让当前组件左移500像素,动画执行过程800毫秒

let obj = {opacity: 1, rotate: 1, scale: 1, translateX: -500, translateY: 0}
this.doComponentAnimate(obj,800,'move',null,0)

备注:

该组件一般在用户在空白组件上创作自己新组件的时候用到的比较多,可以用于二次数据绑定

getChartsInstance

接口简要描述:

改组件只对图表类组件有效,返回当前组件Echarts或者Highchart的实例

入参:

返回值:

Echarts或者Highchart的实例

返回值示例:

调用demo:

let instance = this.getChartsInstance()

备注:

该API只对图表组件起作用,对空白组件和文本组件等无效

renderCharts

接口简要描述:

重新渲染Echarts或者Highchart,当组件的数据改变,或者option改变后,需要手动刷新图表的,调用此API即可,比如:需要在队列中变化组件实例数据或者option的时候,可以将此函数在队列函数中调用

当订阅组件的数据变化时,系统会统一执行刷新动作,不需要手动调用该API

入参:

返回值:

返回值示例:

调用demo:

让当前组件左移500像素,动画执行过程800毫秒

this.renderCharts()

备注:

该API只对图表组件起作用,对空白组件和文本组件等无效

addCBToStackAllPool

接口简要描述:

将组件的回调函数加入到回调总队列中,从而在执行回调总队列的时候执行该函数

入参:

callback: 回调函数

返回值:

返回值示例:

调用demo:

将当前组件的回调函数加入到回调总队列

let cb = function (){
    //以更新文本组件为例
    this.setComponentData = '新文本'
}
this.addCBToStackAllPool(cb)

备注:

注意只传函数名称即可,不要加括号

clearFromStackAllPool

接口简要描述:

清除回调总队列中当前组件的所有回调函数,在加入回调总队列之前执行

入参:

返回值:

返回值示例:

调用demo:

清除回调总队列中当前组件的所有回调函数

this.clearFromStackAllPool()

备注:

callCBPAStack

接口简要描述:

执行总回调队列中的回调函数

入参:

stackArg: 回调队列中函数接受的值

返回值:

返回值示例:

调用demo:

将组件中回调函数加入到回调总队列,再执行回调总队列

//清除回调总队列中的当前组件所有回调
this.clearFromStackAllPool()

let data = this.getComponentData()
//需要回调的函数
let cb = function (){
    //接收参数
    let arg = arguments
    if(arg){
      data.value = arg[0]
    }
}

//将回调函数添加到回调总队列
this.addCBToStackAllPool(cb)
//执行回调总队列并给队列内所有函数传入参数,可以不传参
this.callCBPAStack('params')

备注:

addCBToStackHostPool

接口简要描述:

将组件的回调函数加入到宿主组件的回调队列中,从而宿主组件在执行回调队列的时候执行该函数

入参:

callback: 回调函数名称 hostID: 宿主组件ID

返回值:

返回值示例:

调用demo:

将当前组件中回调函数加入到某宿主组件的回调队列

let cb = function (){
    let option = this.getOptions()
    option.color = 'rgb(255,0,0)'
}
//复制组件ID
let hostID = 'ctextd0ff19c6-211f-a329-ceb7-bddbd00029bd'
this.addCBToStackHostPool(cb, hostID)

备注:

注意只传函数名称即可,不要加括号

addCBToStackGIVPool

接口简要描述:

将组件的回调函数加入到宿主组件的回调队列中,从而宿主组件在执行回调队列的时候执行该函数

入参:

callback: 回调函数名称 GIVStackName: GIV队列名称,便于GIV执行该函数

返回值:

返回值示例:

调用demo:

将当前组件中回调函数加入到GIV的回调队列

let cb = function (){
    let data = this.getComponentData()
    let option = this.getOptions()
    option.series[0].data = data.value
}
//队列名称
let GIVStackName = 'changeState'
this.addCBToStackGIVPool(cb, GIVStackName)

备注:

注意只传函数名称即可,不要加括号

clearFromStackHostPool

接口简要描述:

清除宿主组件回调队列和GIV回调队列中当前组件的所有回调函数,在加入宿主组件、GIV回调队列之前执行

入参:

hostID/GIVStackName 宿主组件ID或GIV队列名称

返回值:

返回值示例:

调用demo:

清除宿主组件和GIV回调队列中当前组件的所有回调函数

this.clearFromStackHostPool(hostID)

备注:

callCBPCStack

接口简要描述:

执行组件回调队列中的回调函数

入参:

stackArg: 回调队列中函数接受的值

返回值:

返回值示例:

调用demo:

将组件中回调函数加入到宿主组件或GIV回调队列,再在宿主组件或GIV中执行回调队列

队列组件代码

//清除宿主组件或GIV回调队列中的当前组件回调
let hostID = 'text-xxxx-xxxx'
this.clearFromStackHostPool(hostID)

//需要回调的函数
let cb = function (){
    //接收参数
    let arg = arguments
    if(arg){
this.setComponentData = arg[0]
    }
}

//将回调添加到组件回调队列
this.addCBToStackHostPool(cb,hostID)

宿主组件代码

let dom = this.getDom()
let panel = document.createElement('div')
let style = {
    width: '100px',
    height: '50px',
    backgroundColor: 'red'
}
//给dom节点设置样式
this.setStyle(panel, style)
dom.appendChild(panel)

//监听click事件
panel.addEventListener('click',() => {
    //执行宿主回调队列并给队列内所有函数传入参数,可以不传参
    this.callCBPCStack('params')
})

备注:

callCBStack

接口简要描述:

全局的回调队列调用函数,用window.callCBStack即可调用

入参:

stackArg: 回调队列名称+回调函数接受的参数,格式为: '回调队列名称|回调函数中接受的参数1|回调函数中接受的参数2'

返回值:

返回值示例:

调用demo:

队列组件代码

//将回调添加到组件回调队列
window.callCBStack(''回调队列名称|回调函数中接受的参数1|回调函数中接受的参数2'')

备注:

getCallbackPool

接口简要描述:

获取回调队列池

入参:

返回值:

Object对象

返回值示例:

{
    all: [{id:'id1',callback:callback},{id:'id2',callback:callback}], 
    hostID: [{id:'id3',callback:callback},{id:'id4',callback:callback}],
    givName: [{id:'id5',callback:callback},{id:'id6',callback:callback}]
}

调用demo:

查看回调池中所有回调函数

console.log(this.getCallbackPool())

备注: