JS规范

javascript有且仅有一个入口文件:main.js

js中应包含一个匿名函数，所有的代码在这个匿名函数中，我们把这个函数叫做外层函数，后面文档中会提到这个外层函数

如main.js：

(function(options){
/*js代码放在该匿名函数中*/
})

云视界会在加载完main.js后调这个外层函数。

调用外层函数时，会将其他js文件的引用，当作入参传递过来。

比如在目录下除了main.js还包含一个sub.js。

那么在main.js中的外层函数的入参options下可以拿到这个sub的引用

(function(options){
var sub=options['sub'];
sub();//调用这个函数。
})

这里的sub，实际上是函数的地址引用，需要被调用才会执行。

钩子函数

  • 入口文件 main.js

外层函数中必须 return 一个对象

(function(options=null){
var container=document.querySelector("#__visroot__");
var demoText=document.querySelector('#__visroot__ .demo_text')
container.addEventListener('click',containerClick);
function containerClick(event){
messageService.create('success', '成功' )
}
var messageService=options.services.messageService;
return {
onInit(properties){
console.log('初始化')
},
onDestroy(){
console.log('销毁')
},
setData(value){
demoText.innerHTML=value;
}
}
})()

对象中包含的钩子方法：

方法名是否必须包含描述
onInit是云视界在加载完第三方组件后，首先会调用外层函数，其次会调用main.js的这个方法，
onDestroy是云视界会在删除自定义组件的时候调用onDestroy方法，开发者可以在这个函数中销毁事件
setData是当自定义组件在云视界中配置了数据源，云视界拿到数据后会调用这个方法。这个返回值是一个数组，开发者把这个数组处理成自己想要的数据。
outSizeCallBack否在自定义组件第一次显示的时候会调用这个方法，后续如果组件尺寸有改变，也会触发这个方法

  • onInit 函数入参值

    该函数有一个入参值，返回的是自定义外壳组件的数据存储结构。里面包含自定义外壳组件的样式信息、数据源信息等。

    {
    "base":{
    id:"自定义组件",//自定义外壳组件的uuid
    name:"",
    widgetName:""//name、widgetName均为第三方组件创建时的名称
    },
    "style":{
    //存储的样式信息
    },
    data:{
    //数据源信息
    },
    config:{
    //存储的第三方组件的自定义信息。
    }
    }

  • setData 函数的入参格式：

    {
    /*
    * data属性下存储的数据相关的内容
    * data 下存储的是对应的维度/度量信息。
    * empty 表示返回数据是否为空
    * type 表示数据源的类型
    */
    data:{
    data: {c3: Array(14), c0: Array(14), c1: Array(14)}
    empty: false
    type: "unlive"
    }
    /*
    * dataSourceInfo下存储的是连接的数据源信息
    */
    dataSourceInfo:{
    dataType: "datasource"
    datasourceInfo: {dsUuid: "151618261273100006", table: "t_151618260222200006", name: "支下钻", format: "xlsx", type: "file", …}
    dimension: (3) [{…}, {…}, {…}]
    filter: []
    group: false
    linkageFiels: []
    measure: []
    model_id: null
    newFiels: []
    requestParams: []
    screen: true
    }
    }

  • outSizeCallBack 函数的入参格式

    {
    ngvwidth:'100px',ngvheight:'100px'
    }

    需要注意：返回值每次都是返回一个属性,ngvwidth/ngvheight并不是同时返回。如果开发者希望根据返回值做处理，需要添加判断

    return {
    outSizeCallBack(obj){
    if(obj.ngvwidth){
    //返回的是宽度
    }
    if(obj.ngvheight){
    //返回的是高度
    }
    }
    }

注意事项：

开发者在钩子函数中，如果用到返回值，想要取返回的对象中的某个属性，那么要判断该属性是否存在。如果返回值中不包含该属性，不加判断就会导致浏览器报错，也有可能导致整个项目的运行异常。也可以添加try，catch方法来捕获可能产生的错误。

如果用户自定义组件的属性栏需要返回值，也需要在这个return对象中添加自定义函数。

除此之外，还可以在return对象中添加自定义属性、自定义方法。这样在其他方法中可以通过this引用，书写起来比较顺手

Edit this page