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

什么是数据驱动型组件？

其实，目前来讲，也只有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 组件 查看。

代码说明

一、展现数据驱动型组件

经过使用datas的数据，咱们能够渲染不一样的组件。
代码目录：src/components/demo/datas

二、定义字典

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

三、使用字典配置

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

四、更多的应用

优点

更少的重复代码量

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（摄于四川若尔盖）