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