基于vue通用表單解決方案的思考與分析

 更新時間:2019-04-17 21:43:12   作者:佚名   我要評論(0)

前言
“那要怎么改?”,“那得改到什么時候?”,“什么時候才能支持這些功能?”。
再一次聽到了這樣的話,我沉默了。到底要怎樣改,這也是我所思考的,最近

前言

“那要怎么改?”,“那得改到什么時候?”,“什么時候才能支持這些功能?”。

再一次聽到了這樣的話,我沉默了。到底要怎樣改,這也是我所思考的,最近一直忙于其他,已經有一段時間沒有處理 issue 了,趁著調休,我也要好好思考下。

半年前,接觸了 el-form-renderer  ,瞬間感覺減輕了大部分表單編寫的工作,一個簡單的JSON配置,立刻展現出一個功能完好的表單頁面。然而,隨著使用的頻率增加,卻慢慢開始暴露各種不足,該組件的作者也不再單獨對該組件進行維護了。由于項目表單場景的需要,我們 fork 了一個版本,但后來發現我們更想要的是一套屬于我們自己的表單渲染規則,于是在我們的 Github 組織下建立了屬于我們的代碼倉庫 @femessage/el-form-renderer  (以下都稱為 el-form-renderer ),并開始了我們自己維護之路。

3W

el-form-renderer 是什么?為什么?怎么樣?通過3W分析來看看我們做了什么。

WHAT?

基于 element-ui 封裝的 表單渲染器 ,但不僅僅是 element-ui ,甚至不僅僅是表單。

WHY?

這里的為什么有兩層,第一層是為什么需要表單渲染器?第二次是什么是 el-form-renderer ?

借用《NoForm - 一個更好的表單解決方案》中的一句話:

做 B類業務 的同學應該深有感觸,我們日常需要面對大量操作類或者表單類的場景,因此只要是能從這些重復的CRUD解放出來的方案,就是最好的方案

我們的目的也很簡單,讓天下沒有難做的表單。

至于為什么是 el-form-renderer ,理由很簡單,我們正在讓沒有難做的表單變成現實,至少在目前數十個項目中,解決了70%以上的表單方面的需求。

HOW?

如上文所說,如下圖所見:

一個好的表單需要解決的問題:

•表單的取值、賦值、校驗

•表單聯動

•自定義表單項

•表單項的事件、屬性、slot

•對用戶足夠友好

所謂”下層基礎決定上層建筑“,我們沒有執著于從0開始,而是“讓專業的人做專業的事”。基礎組件, element-ui 足夠專業,也正因為它的專業性,才讓 el-form-renderer 最初的版本有了用武之地。然而目前遠遠不夠的是,我們沒有很好的處理表單聯動和表單項的事件、slot的問題,這也正是我所要思考的地方。

基礎用法

先來看看目前我們的實現(更多請參考 文檔 )

<template>
 <el-form-renderer label-width="100px" :content="content" />
</template>
<script>
import UploadToAli from '@femessage/upload-to-ali'
export default {
 data () {
 return {
 content: [
 {
 $id: 'avatar',
 label: '頭像',
 component: UploadToAli
 },
 {
 $id: 'username',
 label: '用戶名',
 $type: 'input',
 $el: {
 placeholder: '請輸入用戶名'
 }
 }
 ]
 }
 }
}
</script> 

效果如下:

沒有復雜的邏輯,只需進行簡單配置 JSON 的方式就可實現常用表單功能

解決方案

因為不是從0開始,所以一開始作者的設計只服務于 element-ui 已有的組件。

之前的方案解決了什么

• 表單的取值 getValue ,賦值 updateValue

• 完整繼承了 element 的 form 表單屬性,包括校驗

• 表單聯動 $enableWhen

大部分簡單的場景已經覆蓋,但是局限于 element-ui 組件,沒有處理好動態組件選項(如下拉選項)的問題,無法批量賦值,必須手動去空格...

現在的方案優化了什么

• 支持自定義組件,擺脫對 element-ui 的完全依賴(仍然依賴它的 el-form , el-form-item )

• 通過 setOptions 方法,動態的處理組件選項問題

• 添加批量更新數據方法 updateForm ,并添加 trim 來處理值

• 為了方便在其他組件中的集成和設置/獲取值的需求,還添加了 inputFormat 、 outputFormat ( issue )

它本已完成了一個華麗的蛻變,甚至成為了我司組件的橋梁地位,然而,面對千奇百怪的需求,它確實還不夠。

存在的問題

 

目前的7個 issue ,大致可以分為一下幾類:

•表單聯動

•自定義slot位置

•自定義事件

•其他優化

需求告訴我們,它還有很大的進步空間。

思考

回到開始的那些話,面對存在的問題,我們要怎么處理好它。

今天收到一個 PR ,來自公司的一位同事,處理的是 el-form-renderer 中 slot 位置的問題,默認只有 default ,顯示在最后,有需求希望能顯示在指定某一個表單項的前/后。該PR以表單項的 $id 為具名插槽,渲染該插槽內容到對應 $id 表單項的上方。

一個很好的思路,但是也讓我思考了很多,或許它還是沒有達到我的要求。

不妨再思考一個場景,表單的第一項和第三項渲染的上方需要渲染兩個內容相同的 slot ,按上面的思路,我們應該寫兩個template,并分別定義他們要渲染到的位置的的 $id 。

上面的問題并不難解決,定義一個字符串匹配規則,或者在某一項的配置項中添加要渲染的slot,名字匹配則渲染,以達到復用的目的。

問題似乎是解決了, issue 可以關閉了,但是我們回過頭來想想,我們為什么要自定義 slot 位置?

因為有issue,有用戶有這個需求。

那他為什么會有這個需求?

我們不得而知,場景很多,但我們可以大膽的猜測,缺乏一個組件可以滿足他的渲染需求,他需要 slot 來自定義展示內容。

所以,似乎我們需要的并不是 slot ,而是我們缺乏了那些組件,或者我們需要一個更通用的渲染方式來渲染我們的內容。很容易,我們想到了 render ,如果我們返回的是一個 render ,那似乎大部分 issue 可以關閉了。然而事實是,我們從開始就不希望出現 render ,因為它一點都不友好,甚至對部分人來說,它不簡單,這不是我們的目的。 我們的目的是為了更好用,更好理解,就向我們的文檔一樣,它很簡單,但很實用 。

許多PR,或者打算提PR的人忽略了一個問題,我們的組件沒有支持事件,它很難實現?不,至少已經實現了綁定屬性,綁定事件并不會多難,但是沒有去支持它,因為我們 思考的是它的必要性 ,表單項是否真的需要綁定事件。

從一開始就說過,不只是 element-ui ,甚至不只是表單。我們的目的不純粹,我們尋找的是通用的方案,如果支持了事件,表單項與業務代碼的關聯性絕對會更強,這不是我們希望看到的,至少在我們目前可以看得到的通過可視化的界面生成表單的前提下,我們不希望出現自定義事件的需求,它讓我們通過可視化的界面生成表單變得不那么通用了。

那么,在目前的情況下,真的沒辦法解決這些問題了嗎?答案是否定的。

已知我們可以通過自定義組件的方式拓展我們的表單項,那么我們也可以通過自定義組件解決我們遇到的 issue

import CustomComponent from './custom-component'

export default {
 data () {
 return {
 content: [
 {
 label: '用戶名',
 component: CustomComponent,
 $id: 'username',
 $el: {
 placeholder: '請設置您的登陸用戶名'
 }
 }
 ]
 }
 }
}

或者在一些更簡單的場景

import UploadToAli from './UploadToAli'

export default {
 data () {
 return {
 content: [
 {
  $id: 'avatar',
  label: '圖片',
  component: {
  data () {
  return {
  imgUrl: ''
  }
  },
  render: function (h) {
  return h(UploadToAli, {
  props: {
   value: this.imgUrl
  },
  on: {
   input: (val) => {
   this.imgUrl = val
   this.$emit('input', val)
   }
  }
  }, [
  h('p', {
   slot: 'spinner'
  }, '開始上傳中...')
  ])
  }
  }
 }
 ]
 }
 }
}

如果從這個層面來說,我們早已經解決問題了,但是那些 issue 依然在那兒。還記得之前提過的對用戶足夠友好和 render 的事嗎,目前來看,它能解決問題,但不是一個好的方案,解決問題并沒有那么難,難的是解決了還能足夠友好,足夠簡單,這也是我們一直在努力的方向。

結語

不知不覺寫了好長...

通過配置的方式實現一個表單似乎是一個不錯的思路,目前已經在公司中后臺有過數十個頁面的嘗試。然而業務場景千變萬化,我們沒有辦法解決100%的需求,但希望我們的方式為配置性表單能帶來更多的思考。

拋磚引玉,最后貼一次倉庫地址: https://github.com/FEMessage/el-form-renderer ,希望更多的方案和實現浮出水面,解放生產力。再次感謝 原作者

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。

您可能感興趣的文章:

  • Vue axios 中提交表單數據(含上傳文件)
  • Vue表單驗證插件Vue Validator使用方法詳解
  • Vue ElementUI之Form表單驗證遇到的問題
  • Vue+ElementUI實現表單動態渲染、可視化配置的方法
  • Vue form 表單提交+ajax異步請求+分頁效果
  • Vue2.0表單校驗組件vee-validate的使用詳解
  • Vue.js每天必學之表單控件綁定
  • vue2 中如何實現動態表單增刪改查實例
  • 使用Vue動態生成form表單的實例代碼
  • Vue.js 表單校驗插件

相關文章

  • 基于vue通用表單解決方案的思考與分析

    基于vue通用表單解決方案的思考與分析

    前言 “那要怎么改?”,“那得改到什么時候?”,“什么時候才能支持這些功能?”。 再一次聽到了這樣的話,我沉默了。到底要怎樣改,這也是我所思考的,最近
    2019-04-17
  • Spring依賴注入的三種方式實例詳解

    Spring依賴注入的三種方式實例詳解

    Spring依賴注入(DI)的三種方式,分別為: 1. 接口注入 2. Setter方法注入 3. 構造方法注入 下面介紹一下這三種依賴注入在Spring中是怎么樣實現的
    2019-04-17
  • 一篇文章搞懂JavaScript正則表達式之方法

    一篇文章搞懂JavaScript正則表達式之方法

    咱們來看看JavaScript中都有哪些操作正則的方法。 RegExp RegExp 是正則表達式的構造函數。 使用構造函數創建正則表達式有多種寫法: new RegExp('abc');
    2019-04-17
  • PHP多進程通信-消息隊列使用

    PHP多進程通信-消息隊列使用

    向消息隊列發送數據和獲取數據的測試 <&#63;php $key=ftok(__FILE__,'a'); //獲取消息隊列 $queue=msg_get_queue($key,0666); //發送消息 //msg_send($que
    2019-04-17
  • 密碼強度的正則表達式兩種方案JS總結篇

    密碼強度的正則表達式兩種方案JS總結篇

    本文給出了兩個密碼強度的正則表達式方案,一個簡單,一個更復雜和安全。并分別給出了兩個方案的解析和測試程序。一般大家可以根據自己的項目的實際需要,自行
    2019-04-17
  • VS+opencv實現鼠標移動圖片

    VS+opencv實現鼠標移動圖片

    基于控制臺應用程序+opencv,實現點擊鼠標左鍵,可以拖動圖片以顯示感興趣區域 #include <opencv2/highgui/highgui.hpp> //#include <iostream> //using
    2019-04-17
  • vue使用el-upload上傳文件及Feign服務間傳遞文件的方法

    vue使用el-upload上傳文件及Feign服務間傳遞文件的方法

    一、前端代碼 <el-upload class="step_content" drag action="string" ref="upload" :multiple="false" :http-req
    2019-04-17
  • 詳解Spring的核心機制依賴注入

    詳解Spring的核心機制依賴注入

    詳解Spring的核心機制依賴注入 對于一般的Java項目,他們都或多或少有一種依賴型的關系,也就是由一些互相協作的對象構成的。Spring把這種互相協作的關系稱為
    2019-04-17
  • JS正則表達式獲取指定字符之后指定字符之前的字符串(推薦)

    JS正則表達式獲取指定字符之后指定字符之前的字符串(推薦)

    一個常見的場景,獲取:標簽背景圖片鏈接: 如字符串:var bgImg = "url (\"https://img30.360buyimg.com/sku/jfs/t26203/262/100869187/204098/1d1479e9/5b8
    2019-04-17
  • JSP狀態管理的簡單介紹

    JSP狀態管理的簡單介紹

    JSP狀態管理的簡單介紹 一 http協議的無狀態性 無狀態性是指:當瀏覽器發送請求給服務器時,服務器響應客戶端請求。 但是當同一個瀏覽器再次發送請求給
    2019-04-17

最新評論

买宝宝用品赚钱吗 2019股票配资平台排行榜 河北快三基本走势图 短线炒股技巧 赌博黑话顺口溜 广西双彩最新开奖结果 江苏十一选五走势图丨 三分pk拾中奖中奖规律 股票融资杠杆怎么申请 正版湖北十一选五 体彩p3杀码专家最准确 青海十一选五最新开奖 股票数据api 上海期如意期货配资去哪里开户 股票指数的计算方法各个国家一样吗 一特中马今晚开什么码 决策主力股票论坛