首頁猿問 ...

前端業(yè)務(wù)組件如何更好的適配數(shù)據(jù)源、狀態(tài)源，做到關(guān)注分離，達(dá)到更高可復(fù)用性？

JavaScript

森林海 2019-03-10 14:50:21

問題背景我們通過提煉公用部分，做成可復(fù)用的業(yè)務(wù)組件，一般是通過傳入數(shù)據(jù)展示相應(yīng)組件，可以定義幾種不同類型和狀態(tài)，后續(xù)按照設(shè)計規(guī)則，復(fù)用沒什么問題。那么如果現(xiàn)在有很多模塊或應(yīng)用由不同后端開發(fā)者維護(hù)，且接口不盡相同，是否可以在前端來做適配工作，以不變應(yīng)萬變？舉個例子酒店的篩選組件、日歷組件等等，如何復(fù)用到房產(chǎn)等其他模塊，并且不需要接口數(shù)據(jù)源做任何改動？現(xiàn)狀恕我愚鈍，沒什么思路，難道在接收數(shù)據(jù)的時候，經(jīng)過繁瑣的步驟強(qiáng)行改造成可用的數(shù)據(jù)結(jié)構(gòu)？復(fù)雜算法完全是小白我現(xiàn)在主要做小程序開發(fā)，但不限定技術(shù)棧范圍，構(gòu)思和原理是相通的

查看完整描述

2 回答

喵喔喔

TA貢獻(xiàn)1735條經(jīng)驗獲得超5個贊

謝邀。如果題主的問題描述最終是簡化為“如何讓來自后端接口的數(shù)據(jù)可以被同一個前端項目使用，并且要求前端實現(xiàn)”，那可以考慮使用適配器模式，也就是在接口返回數(shù)據(jù)和js之間再增加一層專門做數(shù)據(jù)轉(zhuǎn)換的層，這樣做可以實現(xiàn)接口不變，前端項目稍微做一下改動（改動內(nèi)容就是對接轉(zhuǎn)換層即可，使代碼改動范圍最小），舉個最簡單的例子：

// 某個service文件
 // 舊代碼里，getData返回的是一個promise，調(diào)用后then里，直接返回接口請求的數(shù)據(jù)getData = (params) => {    return $.get(params)
}export defult {
    getData 
}/* --------------------- 分割線 ---------------------*/// 新代碼，增加個適配器 這里簡單處理，使用高階函數(shù)實現(xiàn)，主要是說明一下自己的思路。復(fù)雜的情況，可以使用專門的類來處理getData = () => { // 這里和舊的一樣   }const adapter = (func) => {    return function(params) =>{          return new Promise(resolve=>{
            func(params).then(result => {                //在這里可以做數(shù)據(jù)轉(zhuǎn)換,把返回的不同格式的都轉(zhuǎn)化成前端可接受的數(shù)據(jù)格式 具體需要怎么轉(zhuǎn)換 convert函數(shù)就怎么寫
                const newResult = convert(result)
                resolve(response)
            })
         })
    }
}export defult {
    getData：adapter(getData) // 類似地，其他舊的請求方法也可以直接使用該適配器}

上面這個例子，理論上，一般只需要寫清楚convert函數(shù)，可以使改動范圍可以限在當(dāng)前的service文件當(dāng)中，具體情境當(dāng)然還需要具體討論

只寫個簡單示例，拋磚引玉。

反對回復(fù) 2019-03-10

小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗獲得超2個贊

多謝邀請

樓主列寫的篩選組件和日歷組件，都是屬于基礎(chǔ)UI組件。這類組件一般是固定格式，然后按照指定格式傳參進(jìn)行渲染，類比于cube-ui這類組件，開發(fā)人員想使用里面的組件，也必須按照其約定的格式來編碼。

當(dāng)然，依賴于不同的后臺格式，最好是加一層轉(zhuǎn)換器轉(zhuǎn)換成相應(yīng)格式才好。但是有一種比較惡心的情況，就是，后臺穿的參數(shù)需要按照原格式傳回后臺，這樣則需要兩層轉(zhuǎn)換。這種情況，不如在寫一個另一種數(shù)據(jù)結(jié)構(gòu)傳參的組件

反對回復(fù) 2019-03-10