组件开发概述

优质

小牛编辑

187浏览

2023-12-01

这篇文档的目的是帮助开发人员开发空白组件

获取 compStore 项目
在 compStore 编写空白组件
将空白组件移植到 ChartBuilder

获取 compStore 项目

compStore 项目可以在 git@git.uinnova.com:udatav/chartbuilder-compstore.git 获取

在 compStore 编写空白组件

在 chartbuilder-compstore/src/example 目录下面新建一个文件夹用来编写空白组件

空白组件主要包括四个部分：

静态页面(staticDemo.html)
默认页面(index.html)
js 文件(index.js)
组件说明(readme.md)

静态页面(staticDemo.html)

此部分要编写的是用html实现组件

默认页面(index.html)

此部分要实现的是模拟 ChartBuilder 空白组件getDom函数返回值和点击按钮模拟数据变化-执行回调

可以直接赋值以下的代码：

代码如下：

<html>

<head>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <style>
    </style>
</head>

<body>
  <!-- 这一行是ownerPanel模拟的ChartBuilder中getDom函数返回值 -->
  <div style="margin-left: 200px;margin-top: 200px;position: relative;width: 300px;height: 200px;" id="ownerPanel">
  </div>
  <button onclick="simulateChange()">模拟数据变化-执行回调</button>
  <script src="../../lib/Tween.js"></script>
  <script src="../../lib/lib.js"></script>
  <script src="index.js"></script>

  <script>
    function simulateChange() {
      let cbArr = udatavLib.cbArr
      let len = cbArr.length
      for(let i = 0 ; i < len ; i++) {
let cb = cbArr[i]
cb.call(udatavLib)
      }
    }
  </script>
</body>

js 文件(index.js)

此部分要编写的是模拟在 ChartBuilder 编写空白组件

此部分可以用的接口可以在ChartBuilder API手册和空白组件 API手册查看

首先要模拟 ChartBuilder 的 this 环境

代码如下：

(
  function () {

  }
).call(udatavLib)

然后在 function 里面编写实现组件的代码

组件说明(readme.md)

此部分要编写的是对所开发的空白组件的说明

将空白组件移植到 ChartBuilder

在这一步要做的是把编写的 js 文件中 function 内的内容复制到 ChartBuilder 空白组件的控制面板并且测试

空白组件通过测试之后可以参照组件市场把组件发布到组件市场。