前端架构之路：数据驱动型组件-HeyUI，一个新型的VUE组件库

诸葛乐逸

2023-12-01

什么是数据驱动型组件？

其实，目前来说，也只有HEYUI组件库是这种方式的尝试者，这也是我在设计组件库的过程中，慢慢思考的成果。
所以，关于这一种定义，还没有人运用过。
当然，这也是HEYUI区别于其他组件库很重要的一点。
不熟悉HEYUI的人，可以移步：HEYUI官网。
或者也看下我们自我介绍的文章：HEYUI，新的vue组件库发布啦~~。

前言

有很多人对于我写的关于HEYUI的config全局配置不是很容易理解。
所以，今天这篇文章主要是用于仔细说明HEYUI这个“数据驱动型组件”到底是什么？
并由数据驱动型组件引发的全局配置又是如果使用的。

数据双向绑定

在说组件之前，我们来说说数据双向绑定。
我们目前终于摆脱使用jquery操作dom的方式来完成所有的交互，而是使用数据双向绑定的机制来完成我们的前端交互。
那为什么越来越多的人选择使用双向绑定呢？
因为我们希望，我们只需要来处理交互的逻辑就好，这样逻辑的变动引发的dom变动，如果能变成自动的，那么我们的开发速度，以及代码质量将会大大的增高。
想起以前，我们的修改了一个值，jquery修改一个地方的展示，修改了第二个地方的展示，还悲催的漏了第三个的改动。

那同理，我们来说说数据驱动型的组件。

数据驱动型组件

在数据双向绑定的基础之上，我们简化了dom的操作，甚至已经抛弃了jquery。
而依据于双向绑定机制开发的组件，越来越多。

那数据驱动型组件，到底和普通的组件有什么不一样的呢？
首先，我想问，大多数前端组件，到底是用来做什么的呢？

我给的答案是：给用户一组数据，让用户去选择

我将我写在heyui的全局配置的文字拿过来说明一下：

1~5个选择项单选：Radio, 或者Select
1~5个选择项多选：Checkbox, 或者Select(multiple)
5~15个选择项单选/多选：Select
15~40个选择项单选/多选：Select(filterable), 或者AutoComplete
40个以上或者需要远程模糊查询：AutoComplete
拥有层级信息的数据选择：TreePicker

不管设计是什么样子的，但是数据和交互都是一致的。
我不在乎组件是什么样子的，我们要做的，是帮你将数据与内部的交互机制封装好，让你可以按照自己的需求开发，不需要重复写一套又一套，逻辑一模一样的代码。

下面，我们通过示例来说明。

示例

线上代码&运行：codesandbox.io/s/github/vv…

简单应用

我们以demo1的示例来说明。
所有的组件都是通过datas来做处理的。

<template>
  <Select v-model="value" :datas="options" placeholder="请选择"></Select>
</template>

<script>
export default {
  data() {
    return {
      //heyui 同时支持多种数据格式，详细可查看http://www.heyui.top/component/data/plugin/select
      options: [ { key: "a", title: "黄金糕" }, { key: "b", title: "双皮奶" }, { key: "c", title: "蚵仔煎" }, { key: "d", title: "龙须面" }, { key: "e", title: "北京烤鸭" } ],
      value: "a"
    };
  }
};
</script>
复制代码

我们再看看element的示例，包括iview与ant-design都是这一种方式。

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [ { key: "a", title: "黄金糕" }, { key: "b", title: "双皮奶" }, { key: "c", title: "蚵仔煎" }, { key: "d", title: "龙须面" }, { key: "e", title: "北京烤鸭" } ],
        value: ''
      }
    }
  }
</script>
复制代码

这里主要的区分是我们没有option选项的标签编写。
其实option标签的编写，还是继承了html原生模式的思维模式。

如果你仔细看heyui的select组件，你会发现，其实我们是通过单选，双选，有没有‘请选择’选择项等配置来设定select的行为，而本身select的选择来源，我们通过dict统一配置。
有兴趣的可以去 HeyUI Select 组件查看。

代码说明

1、展示数据驱动型组件

通过使用datas的数据，我们可以渲染不同的组件。
代码目录：src/components/demo/datas

2、定义字典

代码目录：src/js/config/dict-config.js

3、使用字典配置

代码目录：src/components/demo/dict

4、更多的应用

优势

更少的重复代码量

select 等组件，原则上面都key与title的数据，然后进行选择。
当然，我们也拥有更复杂的展现形式，这个heyui是支持的。

<Select v-model="value" :datas="options" placeholder="请选择"></Select>
复制代码

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
</el-select>
复制代码

当在你的系统复用无数遍的select，你会发现你的代码极其简洁。

代码可读性

当你编写一个庞大的Form，代码量的减少，一行一个组件，这样的方式可以让我们的代码可读性非常的高。
而在一些代码的复制上面，你只需要关心v-model绑定的函数，减少了无数个for循环的代码。

代码可控性

使用dict config，通用的字典集中化配置，更好的调用，更好的维护。
在代码编写上，只需要通过dict属性的配置即可完成。

背景图--LAN（摄于四川若尔盖）