重磅！HEYUI——创新的数据驱动型组件库
HEYUI
基于View的组件库有一些可选，例如：Element、iView，但在我们的复杂业务需求面前，都有一些不尽人意——鉴于此，我们团队的前端大神：兰兰——独立开发了一套数据驱动型的组件库，同时配套开发了前端的脚手架：hey-cli。支撑了我们所有线上系统，极大的提高了Web前端开发的工程化和效率。经过了长时间生产环境的历练，现在是时候拿出来帮助到更多的人享受开发、提高效率。
01
什么是数据驱动型组件
这是HEYUI框架的特色创新，这也是一种新的前端开发的思维方式，跳出了HTML标签的传统思维范畴。UI的呈现，不再有标签决定，而是由数据决定——数据即配置。也许这个概念比较陌生，我们下面的文章，就来说明，这个创新带来的巨大效率提升。
02
数据双向绑定
在说组件之前，我们来说说数据双向绑定。
过去，主流的交互方式是jQuery操作DOM来完成。但，我们目前已经摆脱使用jQuery操作DOM的方式来完成所有的交互，转而使用数据双向绑定的机制来完成我们的前端交互。
那为什么越来越多的人选择使用双向绑定呢？因为我们希望，我们只需要来处理交互的逻辑就好，这样逻辑的变动引发的DOM变动，如果能变成自动的，那么我们的开发速度，以及代码质量将会大大的增高。想起以前，我们的修改了一个值，jQuery修改一个地方的展示，修改了第二个地方的展示，有可能悲催的漏了第三个的改动。
那同理，我们来说说数据驱动型的组件。
03
数据驱动型组件
在数据双向绑定的基础之上，我们简化了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如何帮助大家解放生产力。
04
第一个例子
复制如下链接打开，可以以交互的方式体验我们的示例：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>
<>
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"
};
}
};
</>
我们对比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>
<>
export default {
data() {
return {
options: [ { key: "a", title: "黄金糕" }, { key: "b", title: "双皮奶" }, { key: "c", title: "蚵仔煎" }, { key: "d", title: "龙须面" }, { key: "e", title: "北京烤鸭" } ],
value: ''
}
}
}
</>
对比很明显，HeyUI的实现没有option选项的标签编写，这是一种HTML原生模式的思维方式。而HeyUI，完全是通过dict来同意配置的，也就是datas。有兴趣深入的同学，欢迎查阅HeyUI的文档——点击【阅读原文】即可。
05
第二个例子
以radio，checkbox，select组件为例，Element和iView还是以原始的HTML标签概念开发的组件，如下：
// radio
<el-radio-group v-model="radio2">
<!-- 依旧是label的概念 ->
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
// checkbox
<el-checkbox-group v-model="checkedCities1" :min="1" :max="2">
<!-- 还是需要手动循环选择项 ->
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
// select
<el-select v-model="value" placeholder="请选择">
<!-- 还是需要手动循环选择项，还是select option的概念 ->
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
然后，我们再看下HeyUI的例子：
<Radio v-model="value" :datas="datas"/>
<Checkbox v-model="value" :datas="datas"/>
<Select v-model="value" :datas="datas"/>
代码要简洁太多，HeyUI在乎的是在于行为与数据的交互，相同的数据无缝切换至不同方式的选择。再举例：
datas: ['选择1', '选择2', '选择3']
对于HeyUI来说，就是单选，Checkbox就是多选，Select下拉式单选或者多选。
再配合HeyUI的字典集成，所有的组件选择字典已经集中配置，不同的字典选择使用字典KEY就可以调用。
06
优势总结
01
更少的重复代码量
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，你会发现你的代码极其简洁。
02
代码可读性
当你编写一个庞大的Form，代码量的减少，一行一个组件，这样的方式可以让我们的代码可读性非常的高。
而在一些代码的复制上面，你只需要关心v-model绑定的函数，减少了无数个for循环的代码。
03
代码可控性
使用dict config，通用的字典集中化配置，更好的调用，更好的维护。
在代码编写上，只需要通过dict属性的配置即可完成。
04
更高的前端工程化标准
HeyUI想表达的思想是非常长远的，随着组件库的越来越丰富，复用越来越高，效率也会越来越高，同时会带来更高的工程化标准，这样的一套组件，甚至可以让后端工程师直接完成组件级别的拼装。
有关HeyUI作者
后记
1、HeyUI的作者是一位code能力巨强的单身妹子。本想征得她的同意，放一张她的照片。但是被静默拒绝了。
2、她同时是一位极度热爱旅行的人。上图就是在2016年在乌兰巴托拍摄的，她走很多地方。
3、希望HeyUI能够帮助到更多的人，我无耻的开了打赏，但所有的打赏都将归HeyUI作者所有。
扫码加群
欢迎加群和HeyUI作者一起交流技术与旅行。
