基于ts的動(dòng)態(tài)接口數(shù)據(jù)配置的詳解
需求前景
前端組件是可復(fù)用的,那么復(fù)用前端組件時(shí)從后端讀取的數(shù)據(jù)源同樣也需要可復(fù)用(后端api也要是配置化的方式進(jìn)行),前端需要提供配置項(xiàng)給后端進(jìn)行動(dòng)態(tài)配置生成api。
具體實(shí)現(xiàn)流程

名詞解析
mock 規(guī)范約束
使用的ts的 interface 進(jìn)行編譯前校驗(yàn),所有的組件接收的 mock 結(jié)構(gòu),都必須是該 Interface 的實(shí)現(xiàn)
解析器
將mock打平成 key,value 結(jié)構(gòu)的工具
eg.
interface I_EchartOption {
series: {
data: {
name: string;
value: numberOrString;
unit?: string;
}[];
name?: string;
type: "pie";
}; // 數(shù)據(jù)集配置
}
const mock:I_EchartOption = {
series: [
{
type: "pie",
data: [
{
name: "中藥",
value: "2630",
unit: "家",
_viewData:{ // 通過組合的自定義屬性
}
},
]
}
]
}
const parsingMock=(mock:I_EchartOption):T_formInfo=>{}
parsingMock(mock)
// 返回一個(gè) Mock 描述,見下文
mock 描述
mock 描述,功能有兩個(gè)
- 逆向生成 mock
- 接收后端傳遞的 build_option.options,渲染控制表單。
type T_formInfo = { // mock 描述的接口
key: string, // 值得路徑嵌套
value: string, // 解析出來的value
build_component: string, // 承載改配置項(xiàng)的表單組件
build_option: { // 傳遞給表單組件的參數(shù)
options: any[], // 通過請(qǐng)求后端,讓后端進(jìn)行填充
[key: string]: any
},
}
[
{
"key": "series.0.data",
"build_component": "seriesData",
"build_option": {
"options":[]
"dataLength": 1
},
"formValue": "",
},
{
"key": "series.0.data.0._viewData",
"build_label": "副指標(biāo)series.0.data.0._viewData",
"build_component": "viewData",
"build_option": {
"options":[]
"isShowTitle": false,
"_viewDataMaxLength": 1
},
},
{
"key": "series.0.type",
"value": "pie"
}
]
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)全角半角檢測(cè)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全角半角檢測(cè)的方法,涉及javascript針對(duì)字符遍歷與檢測(cè)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析
這篇文章主要介紹了基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
用原生js做個(gè)簡(jiǎn)單的滑動(dòng)效果的回到頂部
很多網(wǎng)頁(yè)在下方都會(huì)放置一個(gè)“返回頂部”按鈕,這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告,于是將返回頂部功能做成了滑動(dòng)效果2014-10-10
Js-$.extend擴(kuò)展方法使方法參數(shù)更靈活
在JS里,我們的方法參數(shù)通常使用JQ的$.extend擴(kuò)展方法來實(shí)現(xiàn),感興趣的朋友可以了解下2013-01-01
原生js結(jié)合html5制作小飛龍的簡(jiǎn)易跳球
這篇文章主要介紹了原生js結(jié)合html5制作小飛龍的簡(jiǎn)易跳球的方法和代碼分享,推薦給大家,有需要的小伙伴可以參考下。2015-03-03
分離與繼承的思想實(shí)現(xiàn)圖片上傳后的預(yù)覽功能:ImageUploadView
本文要介紹的是網(wǎng)頁(yè)中常見的圖片上傳后直接在頁(yè)面生成小圖預(yù)覽的實(shí)現(xiàn)思路,考慮到該功能有一定的適用性,于是把相關(guān)的邏輯封裝成了一個(gè)ImageUploadView組件,實(shí)際使用效果可查看下一段的git效果圖2016-04-04

