表單是前端開(kāi)發(fā)常用的數(shù)據(jù)采集工具，隨著技術(shù)發(fā)展，一個(gè)完善應(yīng)用系統(tǒng)包含的功能越來(lái)越復(fù)雜，所需要的表單也越來(lái)越多。這些表單大同小異，使用的都是常用的輸入框、下拉選擇框等表單控件，各個(gè)表單之間的差異無(wú)非是使用控件的種類(lèi)數(shù)目和與控件相對(duì)應(yīng)的字段名稱(chēng)，對(duì)于表單的渲染和數(shù)據(jù)收集邏輯，都有極強(qiáng)的邏輯可以尋找，因此動(dòng)態(tài)表單應(yīng)運(yùn)而生。

顧名思義，動(dòng)態(tài)表單就是根據(jù)表單配置動(dòng)態(tài)的渲染表單，實(shí)現(xiàn)需求，而不是一段段寫(xiě)死的大同小異的代碼。動(dòng)態(tài)表單的產(chǎn)生，大大的提升了開(kāi)發(fā)效率，開(kāi)發(fā)人員不用繼續(xù)埋頭在一堆單調(diào)的表單代碼中和需求文件作斗爭(zhēng)了。但是如何實(shí)現(xiàn)一個(gè)高效易用動(dòng)態(tài)表單，也是一個(gè)不小的難題，今天就以普元技術(shù)中臺(tái)DevOps的動(dòng)態(tài)表單開(kāi)發(fā)歷程為例，為大家介紹DevOps項(xiàng)目中動(dòng)態(tài)表單的發(fā)展史。

目錄：

1．初版動(dòng)態(tài)表單

2．問(wèn)題和新需求

3．動(dòng)態(tài)表單進(jìn)階

一、初版動(dòng)態(tài)表單

最初的DevOps平臺(tái)并沒(méi)有關(guān)于動(dòng)態(tài)表單的需求，在開(kāi)發(fā)過(guò)程中，由于CICD部分種類(lèi)紛繁的任務(wù)類(lèi)型配置需要大量的表單與之一一對(duì)應(yīng)，想要人工寫(xiě)完這些表單無(wú)疑要耗費(fèi)很多的時(shí)間，所以我們開(kāi)始了第一次的動(dòng)態(tài)表單的實(shí)踐。

此次動(dòng)態(tài)表單實(shí)踐由DevOps的CICD部分中的任務(wù)配置表單驅(qū)動(dòng)，因此主要考慮的控件類(lèi)型為輸入框、下拉框、和代碼編輯器。在實(shí)踐中幾個(gè)較為關(guān)鍵的地方分別為表單配置模型、表單聯(lián)動(dòng)、表單校驗(yàn)。

以上是較為基礎(chǔ)的表單項(xiàng)的配置，我會(huì)選其中較為重要為大家說(shuō)明：

attrDefId這是每一個(gè)表單項(xiàng)的唯一標(biāo)識(shí)，前端主要用來(lái)為表單項(xiàng)設(shè)置ID便于獲取對(duì)應(yīng)元素進(jìn)行其他操作；

attrId對(duì)應(yīng)的是表單項(xiàng)對(duì)應(yīng)值的字段名，即該向后端傳遞數(shù)據(jù)時(shí)所用的字段名，在一個(gè)完整的表單中，也是唯一的；

controlType寫(xiě)明了表單項(xiàng)類(lèi)型，前端按照這項(xiàng)配置來(lái)決定展示的表單項(xiàng)是輸入框、下拉框或其它指定的表單項(xiàng)類(lèi)型；