0%

type-check-plus

type-check-plus

简介

type-check-plus是一个JavaScript库用于检测输入的值是否符合定义。
例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const objValue = {
name: 'barChart',
title: 'population growth',
yAxisName:'Growth rate',
xAxisName:'Years',
color:'green',
values: [0.13,0.14,0.12,0.15,0.17],
};
const objDefine = {
name: 'string',
title: '?string',
yAxisName:'?string',
xAxisName:'?string',
color:'?color',
values: numbser[]',
}
check(objValue, objDefine) // true

背景

我们开发了一个快速构建可视化大屏程序的PAAS平台,该平台支持用户采用一些拖拽修改的方式快速生成大屏引用。因此需要对用户输入的数组进行合法性检测,剔除异常数据保留正确数据。

由于npm的type-check字段被占用,并且npm已有的相关库并不能满足我们的需要,所以决定自己开发一个变量类型检测库,命名为type-check-plus。

设计

基础定义

设计上该库基于已经定义的变量类型去检测变量的值是否合法。比如,我们有一个对象,该对象作为一个柱状图的数据来源。他的name字段为图表的名称,title是个可选项,为该图表的标题,values是一个一维数组,用于绘制图表的值,还有一些例如x轴y轴名称之类的可选项。我们通过人为的对这个对象进行定义,定义类型包括了一些javascript的基本变量类型,也增加了一些仿照TypeScript的定义规则例如?stringnumber[]

功能设计

通过以上规则我们实现了对一些基本变量类型的检测,例如、int、string、boolean、number、function等。同时也增加了一些可视化中常用的类型检测,例如color、date。

实际应用中我们会碰到很多复杂需求,例如对大object的检测、object可能包含多个字段、多层嵌套,需要对内部的每个字段进行检测,或者长Array对于一些10W级甚至更多的数据条目(数据值在大概率是合法的前提下进行检查对性能的浪费是十分严重的),或者一些树状图,内部data为树结构,目前已有的变量类型检测的包普遍对这些需求的支持性并不是很好,所以我们的工作重心主要放在对这些需求的支持、以及一些配套的回调函数上。

由此、我们的check方法基本框架已经构建完毕。一个被检测值、定义值、以及一个配置项(主要包含一些回调函数、以及检测范围定义)。对于树的检测,在检测操作和数值定义上与普通object有所区别,我们将checkTree作为一个方法单独构建。

1
2
3
4
5
6
7
8
interface IOption {
threshold?: number;
onError?: (value: any, type: any, key?: string, index?: number) => void;
onCheck?: (value: any, type: any, key?: string, index?: number) => void;
}
check: (value: any, desclarartion: any, option?: IOption | undefined) => boolean;

checkTree: (value: any, nodeDesclarartion: object, option?: IOption | undefined) => boolean;

思考

对PAAS平台图表的一些字段我们实现了自适应。例如fontSizesymbolSize等。实现了默认满足需求。但为了满足一些用户的需求,我们仍然将这些字段开放,支持用户录入指定值。这样这些字段的可能值就变成了 “auto“|number,这样的话,定义改为string|number,任意字符串都会被满足,没有意义,不这么定义auto又无法通过。

这个问题的本质其实是该库作为一个检测检测变量类型的库是否需要对一些变量的值(不再是变量的类型),进行判定。例如:=”atuo“!=0>0&&<100等。如果需要支持的话,该以一种怎么样的方式去支持,是以回调函数的方式,输入自定义判定方法,还是将其作为一种特殊type进行判定?在开发上应该怎么开发。

小结

npm仓、 以及github仓连接如下:

npm连接 github连接

优点

  • 对复杂Object的检测
  • 对大量级数据的检测控制
  • 对树状结构的type检测
  • 支持正则表达式作为定义,对于一些特殊string类型的检测。

缺点

  • 对于值的检测需要扩充
  • 例如对 =atuo? !=0? >0&&<100? 的检a测
  • 基础类型仍不是十分丰富,缺乏一些常用的自定义类型的检测
  • 例如phoneNumber? datatime?
  • 回调函数不是十分丰富,需要继续增加。
  • 例如checkAnd? checkOr?