源寶導(dǎo)讀：天際移動(dòng)平臺(tái)經(jīng)過重構(gòu)改版，近期正式發(fā)布了1.0版本，我們?cè)诘痛a開發(fā)方面做了進(jìn)一步增強(qiáng)。本文主要圍繞前端Model、前端業(yè)務(wù)邏輯(領(lǐng)域模型)、數(shù)據(jù)層與視圖層解耦(包裝器模式)3個(gè)方面，給大家分享一下統(tǒng)一數(shù)據(jù)層方案的設(shè)計(jì)思路和實(shí)現(xiàn)。

一、背景

? ? 天際移動(dòng)平臺(tái)經(jīng)過重構(gòu)改版，近期正式發(fā)布了1.0版。在低代碼開發(fā)方面進(jìn)一步增強(qiáng)，內(nèi)置了移動(dòng)應(yīng)用常用的系統(tǒng)組件，并提煉了表單和列表兩大核心數(shù)據(jù)容器組件，使用了統(tǒng)一數(shù)據(jù)層解決方案。

? ? 以移動(dòng)應(yīng)用常見的表單詳情頁(yè)面為例，在移動(dòng)平臺(tái)完成搭建到最終渲染，基本流程如下：

在平臺(tái)注冊(cè)獲取表單詳情數(shù)據(jù)的業(yè)務(wù)API，根據(jù)返回?cái)?shù)據(jù)格式創(chuàng)建業(yè)務(wù)對(duì)象，業(yè)務(wù)對(duì)象包含業(yè)務(wù)字段。

拖拽表單容器到頁(yè)面中，綁定數(shù)據(jù)源到注冊(cè)的業(yè)務(wù)API。

拖拽表單組件，如文本框組件，綁定字段為當(dāng)前業(yè)務(wù)API返回業(yè)務(wù)對(duì)象的字段。

頁(yè)面渲染流程：

根據(jù)業(yè)務(wù)API返回的業(yè)務(wù)對(duì)象格式初始化前端Model。

表單容器調(diào)用領(lǐng)域服務(wù)獲取業(yè)務(wù)數(shù)據(jù)、填充Model、透?jìng)鞅韱谓M件。

表單組件根據(jù)綁定的業(yè)務(wù)字段動(dòng)態(tài)解析Model數(shù)據(jù)進(jìn)行渲染。

? ? 本文主要圍繞前端Model、前端業(yè)務(wù)邏輯(領(lǐng)域模型)、數(shù)據(jù)層與視圖層解耦(包裝器模式)3個(gè)方面，分享下統(tǒng)一數(shù)據(jù)層方案的設(shè)計(jì)思路和實(shí)現(xiàn)。

二、?前端Model

? ? 相較于后端Model，前端Model更像是一個(gè)容器，用于存放后端接口返回的數(shù)據(jù)，是前端數(shù)據(jù)層的最上游，也是接下來一切數(shù)據(jù)流動(dòng)的起點(diǎn)。除了存儲(chǔ)接口返回的數(shù)據(jù)，一般前端維護(hù)一套Model還需要進(jìn)行容錯(cuò)處理，即運(yùn)行時(shí)類型校驗(yàn)，這對(duì)提高系統(tǒng)的健壯性有很大的幫助。

2.1、技術(shù)選型

????我們選用了mobx-state-tree(MST)實(shí)現(xiàn)數(shù)據(jù)層的Model，它是一種狀態(tài)容器。MST的中心是活躍樹的概念。每個(gè)樹都具有形狀(類型信息)和狀態(tài)(數(shù)據(jù))。從這棵活樹上，會(huì)自動(dòng)生成不可變的，結(jié)構(gòu)共享的快照。

? ? 類型的設(shè)計(jì)使得它在設(shè)計(jì)時(shí)和運(yùn)行時(shí)都可以用來驗(yàn)證類型正確性(設(shè)計(jì)時(shí)類型檢查僅在TypeScript中起作用)。

運(yùn)行時(shí)類型錯(cuò)誤：

設(shè)計(jì)時(shí)類型錯(cuò)誤：

2.2、實(shí)現(xiàn)細(xì)節(jié)

? ? 根據(jù)數(shù)據(jù)容器組件綁定的業(yè)務(wù)API接口返回的業(yè)務(wù)對(duì)象元數(shù)據(jù)，動(dòng)態(tài)生成該數(shù)據(jù)容器的前端model，并存儲(chǔ)到數(shù)據(jù)Store。

????業(yè)務(wù)對(duì)象元數(shù)據(jù)示例：

動(dòng)態(tài)生成前端model示例：

三、前端業(yè)務(wù)邏輯(領(lǐng)域模型)

? ? 在我們之前的《領(lǐng)域驅(qū)動(dòng)設(shè)計(jì)DDD在前端應(yīng)用的探索》分享中，詳細(xì)說明了如何利用DDD分層架構(gòu)，來實(shí)現(xiàn)前端業(yè)務(wù)邏輯解耦的理論性探索，簡(jiǎn)單回顧下。

3.1、前端業(yè)務(wù)邏輯解耦-DDD設(shè)計(jì)思路

3.2、實(shí)現(xiàn)細(xì)節(jié)

領(lǐng)域?qū)嶓w：

領(lǐng)域服務(wù)：

四、數(shù)據(jù)層與視圖層解耦(包裝器模式)

? ? 統(tǒng)一了數(shù)據(jù)層以后，組件只用來渲染數(shù)據(jù)，內(nèi)部不用做數(shù)據(jù)相關(guān)的處理，更加輕量化。而數(shù)據(jù)層與組件渲染(視圖層)是通過包裝器模式進(jìn)行解耦的。

? ? 在主流前端框架(React或Vue)中的高階組件HOC，就是采用這種設(shè)計(jì)模式，移動(dòng)平臺(tái)是基于Vue技術(shù)棧開發(fā)的。

4.1、我們封裝了一個(gè)渲染被包裝組件的方法 renderWrappedComponent

4.2、創(chuàng)建數(shù)據(jù)容器包裝器dataContainerWrapper

• created階段初始化數(shù)據(jù)Model存儲(chǔ)在數(shù)據(jù)Store。

• mounted階段請(qǐng)求業(yè)務(wù)數(shù)據(jù)并填充到前端Model。

• render階段將前端Model數(shù)據(jù)傳遞給實(shí)際的組件進(jìn)行渲染。

• 包裝器與數(shù)據(jù)層數(shù)據(jù)是通過MobX進(jìn)行關(guān)聯(lián)的，通過observer觀察數(shù)據(jù)變化，響應(yīng)式更新包裝器。

4.3、在組件渲染時(shí)通過數(shù)據(jù)容器Connect，將組件與包裝器連接起來

五、總結(jié)

????當(dāng)前主流的前端框架在數(shù)據(jù)層上是缺失的，本次實(shí)踐結(jié)合前端Model、前端領(lǐng)域模型、數(shù)據(jù)層與視圖層解耦等方面，形成了一個(gè)可落地的解決方案，這也是一個(gè)趨勢(shì)，感興趣的可以深入了解下。

------ END ------

作者簡(jiǎn)介

陳同學(xué)：?開發(fā)SM，目前負(fù)責(zé)天際移動(dòng)平臺(tái)的相關(guān)研發(fā)工作。

也許您還想看

移動(dòng)建模平臺(tái)元數(shù)據(jù)存儲(chǔ)架構(gòu)演進(jìn)

AI云店小程序演變之路

基于 Go 的微服務(wù)運(yùn)行情況監(jiān)控實(shí)踐

在明源云客，一個(gè)全新的服務(wù)會(huì)經(jīng)歷什么？

云客后臺(tái)優(yōu)化的“前世今生”(一)

總結(jié)

以上是生活随笔為你收集整理的前端 重构时需要注意的事项_前端数据层落地实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。