重磅！HEYUI——创新的数据驱动型组件库

作者：待字闺中来源：待字闺中公众号

分享到：

11-07

HEYUI

基于View的组件库有一些可选，例如：Element、iView，但在我们的复杂业务需求面前，都有一些不尽人意——鉴于此，我们团队的前端大神：兰兰——独立开发了一套数据驱动型的组件库，同时配套开发了前端的脚手架：hey-cli。支撑了我们所有线上系统，极大的提高了Web前端开发的工程化和效率。经过了长时间生产环境的历练，现在是时候拿出来帮助到更多的人享受开发、提高效率。

什么是数据驱动型组件

这是HEYUI框架的特色创新，这也是一种新的前端开发的思维方式，跳出了HTML标签的传统思维范畴。UI的呈现，不再有标签决定，而是由数据决定——数据即配置。也许这个概念比较陌生，我们下面的文章，就来说明，这个创新带来的巨大效率提升。

数据双向绑定

在说组件之前，我们来说说数据双向绑定。

过去，主流的交互方式是jQuery操作DOM来完成。但，我们目前已经摆脱使用jQuery操作DOM的方式来完成所有的交互，转而使用数据双向绑定的机制来完成我们的前端交互。

那为什么越来越多的人选择使用双向绑定呢？因为我们希望，我们只需要来处理交互的逻辑就好，这样逻辑的变动引发的DOM变动，如果能变成自动的，那么我们的开发速度，以及代码质量将会大大的增高。想起以前，我们的修改了一个值，jQuery修改一个地方的展示，修改了第二个地方的展示，有可能悲催的漏了第三个的改动。

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

数据驱动型组件

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

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

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

我们看看如下的例子，我们将字典标准化，控件可以通过字典的key驱动，而交互无非是在通过不同的数据量选择不同的交互类型。

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

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

所有，由以上痛点、需求的工程师，都可以试试我们的HeyUI——看HeyUI如何帮助大家解放生产力。

第一个例子

复制如下链接打开，可以以交互的方式体验我们的示例：https://codesandbox.io/s/github/vvpvvp/hey-demos/tree/master/

HeyUI官方文档如下：https://www.heyui.top/component/guide

我们先看下上述代码示例中的demo1。

在HEYUI中，我们都是通过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的实现：

<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>