前端架構之路：數據驅動型組件-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（攝於四川若爾蓋）