前端架構之路：資料驅動型元件-HeyUI，一個新型的VUE元件庫

vvpvvp發表於2018-03-20
前端架構元件UIVue

什麼是資料驅動型元件？

其實，目前來說，也只有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 元件 檢視。

程式碼說明

1、展示資料驅動型元件

通過使用datas的資料，我們可以渲染不同的元件。
程式碼目錄：src/components/demo/datas
前端架構之路：資料驅動型元件-HeyUI，一個新型的VUE元件庫

2、定義字典

程式碼目錄：src/js/config/dict-config.js
前端架構之路：資料驅動型元件-HeyUI，一個新型的VUE元件庫

3、使用字典配置

程式碼目錄：src/components/demo/dict
前端架構之路：資料驅動型元件-HeyUI，一個新型的VUE元件庫

4、更多的應用

前端架構之路：資料驅動型元件-HeyUI，一個新型的VUE元件庫 前端架構之路：資料驅動型元件-HeyUI，一個新型的VUE元件庫

優勢

更少的重複程式碼量

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（攝於四川若爾蓋）

相關文章