摘要:前言管理后臺(tái)應(yīng)用有兩個(gè)最主要的功能數(shù)據(jù)錄入表單數(shù)據(jù)展示表格業(yè)務(wù)系統(tǒng)必不可少的功能模塊,并且占據(jù)開發(fā)量的以上。所以我認(rèn)為將業(yè)務(wù)與徹底分離,會(huì)是更好的選擇。參考聚合表單源碼聚合表單管理后臺(tái)
前言
管理后臺(tái)應(yīng)用有兩個(gè)最主要的功能:
數(shù)據(jù)錄入 ---- 表單 (Form)
數(shù)據(jù)展示 ---- 表格 (Table)
業(yè)務(wù)系統(tǒng)必不可少的功能模塊,并且占據(jù)開發(fā)量的 80% 以上。
如何可以快速的,高質(zhì)量完成對(duì)應(yīng)的業(yè)務(wù)需求呢?
業(yè)務(wù)與 UI 徹底分離術(shù)業(yè)有專攻,專注才能把事情做完美,減少出錯(cuò)的概率。所以我認(rèn)為將業(yè)務(wù)與 UI 徹底分離,會(huì)是更好的選擇。
例如我們實(shí)現(xiàn)以下表單:
一般的做法是,由開發(fā)引用 UI 庫對(duì)應(yīng)組件然后渲染:
import { Form, Input, Selector } from "ui" const Page = () => { return () }
這樣問題不大,但是如果我們寫的頁面開始多了,維護(hù)起來就很麻煩了,如果由 20 個(gè)頁面,其中某個(gè)功能需要調(diào)整,需要改 20 遍,組件化并不能改變代碼維護(hù)的問題。
所以 ukelli-ui 打造了 聚合表單 的組件,只需要描述業(yè)務(wù)行為,完全與 UI 分離:
完整定義請(qǐng)參考
import FormLayout, { FormLayoutProps } from "ukelli-ui/core/form-generator/form-layout" const formOptions: FormLayoutProps["formOptions"] = [ "日期", { refs: ["startDate", "endDate"], type: "datetimeRange", enableTime: true, title: "日期1", tips: "123", defaultValue: [] }, { refs: ["startDate2", "endDate2"], type: "datetimeRange", title: "日期2", tips: "123", defaultValue: [] }, "選擇器", ... ]; ReactDOM.render({ // handleChange }} />, document.querySelector("#root") )
干凈利落,沒有 UI 信息,專注于業(yè)務(wù)描述,UI 就交給 FormLayout 聚合表單統(tǒng)一處理,最后組件會(huì)返回一個(gè)統(tǒng)一數(shù)據(jù)結(jié)構(gòu)的 values,方便快捷。
這里可以體驗(yàn)聚合表單
https://ui.ukelli.com/FormGen...
https://admin.ukelli.com/
Account: admin
Password: 123
當(dāng)然還可以用 HOC 做更進(jìn)一步的封裝,關(guān)于 HOC 部分會(huì)在其他篇幅講解。
參考Form聚合表單源碼
Form聚合表單 demo
uke 管理后臺(tái)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/106482.html
摘要:可以看到,這樣不僅沒有占用組件自己的,也不需要手寫回調(diào)函數(shù)進(jìn)行處理,這些處理都?jí)嚎s成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí),因此直接把回調(diào)函數(shù)拋出來即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知,也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析(就是數(shù)組),但理解實(shí)現(xiàn)原理就可以用好了嗎?學(xué)的是...
摘要:因?yàn)橛脩舨挥迷诘谝淮芜M(jìn)入應(yīng)用時(shí)下載所有代碼,用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的,讓你的代碼更具有聲明性。知道什么時(shí)候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個(gè)挺靠譜的封裝(報(bào)錯(cuò),鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...
摘要:而中實(shí)現(xiàn)原理是利用高階函數(shù)通過將多個(gè)函數(shù)組合成一個(gè)可執(zhí)行執(zhí)行函數(shù)關(guān)鍵步驟代碼如下所示。和都是基于更新差異元素。 引言 平時(shí)開發(fā)單頁項(xiàng)目應(yīng)用基于vue,目前另外兩個(gè)比較熱的庫還有angular和react,angular 1系列用過,進(jìn)入公司后由于基于vue技術(shù)棧就沒在關(guān)注了。一直在關(guān)注react,目的不是學(xué)習(xí)用法,只是為了拓展自己的視野和思維,通過了解一些使用上的差異性,來進(jìn)一步的思考...
閱讀 1098·2021-11-15 18:00
閱讀 2813·2021-09-22 15:18
閱讀 1974·2021-09-04 16:45
閱讀 756·2019-08-30 15:55
閱讀 3867·2019-08-30 13:10
閱讀 1343·2019-08-30 11:06
閱讀 1992·2019-08-29 12:51
閱讀 2300·2019-08-26 13:55