重磅！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作者一起交流技術與旅行。
