基于Vue的业务规则（business rules）组件

概述

业务规则（Business Rules）致力于提供一套易于判断的配置规则，以便于在多数情况下，不部署新代码而能够应对频繁的新需求。

以下是我基于Vue/Element UI的实现：

https://github.com/winzipsdo/vue-business-rules-ui

以下来自GitHub - venmo/business-rules: Python DSL for setting up business intelligence rules that can be configured without code

As a software system grows in complexity and usage, it can become burdensome if every change to the logic/behavior of the system also requires you to write and deploy new code. The goal of this business rules engine is to provide a simple interface allowing anyone to capture new rules and logic defining the behavior of a system, and a way to then process those rules on the backend.

这套规则恰巧非常适合于日志JSON的筛选判断，可以参考以下例子：

我们希望对符合条件的日志进行计数，有如下日志：

{
  "uid": "a",
  "data": {
    "cid": 1,
    "val": 20
  }
}

条件为： uid为a且data.cid不为1；

使用业务规则可表述为：

{
  "all": [
    {
      "name": "uid",
      "operator": "eq",
      "value": "a"
    },
    {
      "name": "data.cid",
      "operator": "neq",
      "value": 1
    }
  ]
}

基于Vue的实现

以下是业务规则的UI Demo：

Conditions Demo

image.png

使用原生JS或者JSX能够很轻易地实现组件的递归嵌套，但在Vue中需要使用一个不常用的特性：递归组件

组件是可以在它们自己的模板中调用自身的。不过它们只能通过name选项来做这件事。

详细实现可见：vue-business-rules-ui/index.vue at master · winzipsdo/vue-business-rules-ui · GitHub

原始的业务规则设计并不利于数据驱动进行渲染，因此在中间添加了一个Adapter进行格式的转换，本例中原本的JSON将被转换为：

{
  "type": "all_any",
  "condition": "all",
  "children": [{
    "type": "condition",
    "name": "uid",
    "operator": "eq",
    "value": "a",
    "val_type": "string"
  }, {
    "type": "condition",
    "name": "data.cid",
    "operator": "neq",
    "value": "1",
    "val_type": "number"
  }],
  "isRoot": true
}

Adapter可见：vue-business-rules-ui/BizRuleAdapter.js at master · winzipsdo/vue-business-rules-ui · GitHub

Demo截图如下所示：

image.png

附录

以下是Javascript的UI实现：

GitHub - chrisjpowers/business-rules: A JavaScript library for building out the logic and UI for business rules.