6-27，是第十一期 - 女生專場 https://www.huodongxing.com/go/tl11

另外，每一期都" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 前端搞搭建|沐童-如何設(shè)計(jì)實(shí)現(xiàn) H5 頁面搭建系統(tǒng) - 數(shù)據(jù)模型

前端搞搭建|沐童-如何設(shè)計(jì)實(shí)現(xiàn) H5 頁面搭建系統(tǒng) - 數(shù)據(jù)模型

時(shí)間：2023-09-25 16:54:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-25 16:54:01 來源：網(wǎng)站運(yùn)營

前端搞搭建|沐童-如何設(shè)計(jì)實(shí)現(xiàn) H5 頁面搭建系統(tǒng) - 數(shù)據(jù)模型：

下期預(yù)告

6-20，是第十期 - 跨端跨棧 https://www.huodongxing.com/go/tl10

6-27，是第十一期 - 女生專場 https://www.huodongxing.com/go/tl11

另外，每一期都提供了全年的聯(lián)票，可以看所有場次的錄播視頻，包括下半年到年底的所有直播視頻

前端早早聊大會目標(biāo)成為用得上、聽得懂、抄得走的技術(shù)大會，計(jì)劃 2020 年辦 >= 15 期，由前端早早聊與掘金聯(lián)合舉辦，前端早早聊大會行程動態(tài)、錄播視頻/PPT/講稿資料下載請關(guān)注 「前端早早聊」 公眾號跟進(jìn)。
你的支持，是早早聊辦下去的唯一動力！

還想聽哪方面的分享，直接加 Scott 微信： codingdreamer 提需求吧！

正文

本篇為第三屆 - 前端頁面搭建專場沐童講師的分享：

1.我是誰？

Hello 大家好，很高興今天有機(jī)會能在這里跟大家分享自己關(guān)于頁面可視化搭建的一些開發(fā)思路。

先簡單自我介紹一下，我是沐童，18 年畢業(yè)后加入京東，目前就職于京東京喜業(yè)務(wù)部，也是 WecTeam 的核心成員，在團(tuán)隊(duì)里主要負(fù)責(zé)了內(nèi)部使用的一個(gè) H5 賣場可視化搭建系統(tǒng) —— MPM 的建設(shè)工作。

2.我們的團(tuán)隊(duì)

京東京喜是京東致力于打造下沉電商的戰(zhàn)略核心部門，包括京喜小程序（微信購物入口）、京東購物小程序及其他微信手 Q 渠道的業(yè)務(wù)，都是由我們團(tuán)隊(duì)負(fù)責(zé)維護(hù)。在去年，我們自發(fā)成立了對外的前端技術(shù)團(tuán)隊(duì) WecTeam，希望通過技術(shù)分享和項(xiàng)目開源等方式，參與和推動前端技術(shù)發(fā)展，為行業(yè)帶來更大價(jià)值。

WecTeam 公眾號，歡迎關(guān)注

二、分享主題

今天想要跟大家分享的主題是《如何設(shè)計(jì)實(shí)現(xiàn) H5 頁面搭建中的數(shù)據(jù)模型設(shè)計(jì)》。

1.數(shù)據(jù)模型指的是什么？

2.為什么要討論數(shù)據(jù)模型？

3.主題目錄

三、MPM 整體介紹

1.系統(tǒng)簡介

2.能力概覽

3.效果展示

MPM編輯界面




配置發(fā)布頁面




最終效果圖

4.系統(tǒng)架構(gòu)

5.工作流程

四、數(shù)據(jù)層面臨的痛點(diǎn)

了解完 MPM 的大致情況后，我們再把目光聚焦到 MPM 的數(shù)據(jù)模型。數(shù)據(jù)層面臨的痛點(diǎn)究竟是什么？為什么 MPM 會對數(shù)據(jù)模型尤其重視？我們可以從以下幾個(gè)例子感受到。


1.請求散亂無章




第一種場景：頁面請求茫茫多，有時(shí)候想定位頁面中某個(gè)請求來自哪個(gè)組件，可能得定位半天。

2.多余的重復(fù)請求





第二種場景：某個(gè)頁面中，有多個(gè)組件都配置了同一個(gè)預(yù)約 ID，導(dǎo)致頁面發(fā)出了 N 個(gè)一模一樣的預(yù)約態(tài)查詢請求。

3.接口壓力大





第三種場景：商品接口支持批量請求，但由于頁面的各個(gè)商品組件是獨(dú)立請求的，導(dǎo)致多個(gè)商品請求并沒有聚合，走批量調(diào)用。

4.數(shù)據(jù)模型多變





第四種場景：商品組件下的各個(gè)模板，除請求商品之外，有些模板會拉取新人價(jià)，有些模板會拉取補(bǔ)貼價(jià)。

5.三端同構(gòu)訴求





第五種場景：以 Vue 為例，我們習(xí)慣在組件創(chuàng)建時(shí)，也就是 created 鉤子函數(shù)中請求數(shù)據(jù)，這在客戶端渲染時(shí)表現(xiàn)很完美，但在直出場景下卻完全行不通。

五、數(shù)據(jù)請求解決方案





基于以上種種問題，我們?yōu)樽源罱ㄙu場打造了一套高效通用的數(shù)據(jù)請求解決方案，它包括了以下三個(gè)解決目標(biāo)：

六、頁面模型設(shè)計(jì)





組件樓層配置的結(jié)構(gòu)和內(nèi)容，它包括：

七、請求模型設(shè)計(jì)

1.數(shù)據(jù)源

我們認(rèn)為，請求模型的復(fù)雜性在于請求組合的復(fù)雜性，請求可以串聯(lián)、并聯(lián)及串并聯(lián)混合，請求還有主次之分。

要應(yīng)對請求模型復(fù)雜靈活的組合，首先我們需要對請求進(jìn)行量化，也就是說，我們需要一個(gè)最小單元來描述請求，請求模型則基于這些基本單元進(jìn)行自由組合，這個(gè)最小單元就是數(shù)據(jù)源。



數(shù)據(jù)源是請求模型的基本組成單位，描述了一類請求動作，它包括以下幾個(gè)基本屬性：





我們用一個(gè)類來實(shí)現(xiàn)數(shù)據(jù)源，一旦想要請求這個(gè)接口，調(diào)用層只需要以配置參數(shù)為入?yún)⑦M(jìn)行實(shí)例化，就可以得到一個(gè)請求對象，引擎可以理解請求對象，并發(fā)起一個(gè)真正的請求。

數(shù)據(jù)源有很多個(gè)，每個(gè)數(shù)據(jù)源都有自己的名稱標(biāo)識，在調(diào)用層，我們只需要通過數(shù)據(jù)中心提供的 fetch 方法，指定數(shù)據(jù)源標(biāo)識并傳入配置數(shù)據(jù)，就可以建立起和數(shù)據(jù)源的綁定關(guān)系，來選擇調(diào)用某個(gè)數(shù)據(jù)源。



基于這樣的設(shè)計(jì)，我們可以很方便地實(shí)現(xiàn)請求模型的自由組合。

首先我們要求數(shù)據(jù)源應(yīng)該是純粹且專一的，它應(yīng)該只做一件簡單的事，比如跟這個(gè)接口密切相關(guān)的一些通用處理邏輯，而像一些跟特定部分組件/模板業(yè)務(wù)邏輯相關(guān)的處理，則不應(yīng)該出現(xiàn)在這里，這是自由組合的前提。

其次，我們允許由數(shù)據(jù)源以各種形式自由組合成更高級、更復(fù)雜的請求模型，或者叫高級數(shù)據(jù)源。對于調(diào)用層來說，既可以直接調(diào)用數(shù)據(jù)源，也可以調(diào)用封裝好的高級數(shù)據(jù)模型。



數(shù)據(jù)源如何組合成高級請求模型呢？這里我們采用了最簡單靈活的函數(shù)調(diào)用，而不再是以類的形式來組織。函數(shù)天然擁有的作用域機(jī)制，對實(shí)現(xiàn)靈活多變的請求模型十分有利。上圖就是這樣一個(gè)例子，我們在函數(shù)內(nèi)串聯(lián)調(diào)用了商品、優(yōu)惠券兩個(gè)數(shù)據(jù)源，簡單地實(shí)現(xiàn)了一個(gè)“帶券商品”的請求模型。

高級請求模型是個(gè)函數(shù)，同樣也就擁有唯一的名稱標(biāo)識。所以向上，我們將調(diào)用方式對齊，因此對于調(diào)用層來說，究竟是直接調(diào)用數(shù)據(jù)源，還是調(diào)用高級請求模型，其實(shí)沒什么區(qū)別。



另一方面，依靠數(shù)據(jù)源，我們也有效地實(shí)現(xiàn)了統(tǒng)一管理。上圖是數(shù)據(jù)源請求的整體工作流程，其中有兩個(gè)核心模塊 —— 數(shù)據(jù)中心和請求中心：



借助這兩個(gè)核心模塊，整個(gè)頁面請求的流程大致是這樣的：

2.請求優(yōu)化策略

當(dāng)對頁面請求做了統(tǒng)一管理之后，我們就可以對請求做一些合理的優(yōu)化了。



請求中心的內(nèi)部機(jī)制


2.1 如何避免頁面發(fā)起重復(fù)請求呢？

首先，我們將請求分為了未發(fā)起、等待中、已完成三個(gè)生命階段。當(dāng)請求中心接收請求對象后，會先對請求對象做 MD5 判斷：

依靠這樣一個(gè)簡單的請求隊(duì)列和請求緩存，我們有效避免了頁面內(nèi)發(fā)起重復(fù)請求。





2.2 如何實(shí)現(xiàn)頁面內(nèi)同類接口請求的有效聚合？

前邊我們提到，數(shù)據(jù)源中的 batch 屬性可以制定聚合分發(fā)策略，上圖就是 batch 的內(nèi)部結(jié)構(gòu)。它包含了三個(gè)屬性：


每當(dāng)數(shù)據(jù)中心創(chuàng)建出一個(gè)請求對象的時(shí)候，并不會立刻發(fā)給請求中心處理，而是先推入一個(gè)緩沖隊(duì)列。等到下一個(gè) Tick 時(shí)，數(shù)據(jù)中心會將上個(gè) Tick 收集到的這一批請求對象，經(jīng) pack 函數(shù)處理，聚合成一個(gè)請求對象，再發(fā)給請求中心。等到響應(yīng)后，再經(jīng) unpack 函數(shù)拆包，根據(jù)拆包映射分發(fā)到對應(yīng)的各個(gè)調(diào)用層。

當(dāng)然，假設(shè)在當(dāng)前 Tick 中，緩沖隊(duì)列內(nèi)的請求對象達(dá)到了規(guī)定的上限，那么聚合就會提前執(zhí)行。



聚合分發(fā)的流程

上圖可以很明顯看出，對于調(diào)用層來說，感知上依然是發(fā)出了 5 個(gè)請求，接收了 5 個(gè)響應(yīng)結(jié)果，但對于請求中心來說，只接受并處理了 2 個(gè)請求對象，也就是只發(fā)出了 2 個(gè)請求。所以在這里，聚合分發(fā)層其實(shí)起到了一個(gè)隔離的作用，對于隔離層的兩端來說，對方都是黑盒。因此，利用這樣一套機(jī)制，我們可以很方便地讓同類請求合多為一。


3.初態(tài)函數(shù)

為了實(shí)現(xiàn) MPM 的三端同構(gòu)，我們設(shè)計(jì)了初態(tài)函數(shù)。



可能很多人有疑問：前后端渲染到底有什么區(qū)別？假如我把客戶端渲染那一套，照搬到直出端，為什么不行？那么這里就跟大家稍微解釋下。



在客戶端渲染中，我們經(jīng)常喜歡在 created 鉤子函數(shù)中編寫數(shù)據(jù)請求，同時(shí)以骨架屏或局部 loading 作為占位，等到數(shù)據(jù)就位后再渲染出有效內(nèi)容。這是客戶端渲染的慣用手段，這也就說明了一個(gè)問題：客戶端允許存在多趟渲染，大可以邊渲染邊請求，渲染和請求之間沒有嚴(yán)格的先后順序。


但是在直出端，渲染完成的下一步是向客戶端作頁面流式輸出，有且只有一趟渲染。所以，直出渲染前，用于渲染的數(shù)據(jù)必須全部到位，也就是說，請求必須在渲染之前完成。

如果你把客戶端渲染直接搬到直出端，很遺憾，你可能就只能直出一份骨架屏。



因此，我們可以得出以下幾個(gè)結(jié)論：





基于這些，我們參考現(xiàn)有優(yōu)秀的前后端同構(gòu)框架 Next，設(shè)計(jì)了初態(tài)函數(shù)。Next 中也有初態(tài)函數(shù)，只不過 Next 的初態(tài)函數(shù)只能存在于頁面級別，組件中是不允許有初態(tài)函數(shù)的。而 MPM 是組件搭建場景，我們不可能在頁面級別去獲取各個(gè)組件樓層的數(shù)據(jù)，因此我們對初態(tài)函數(shù)做了一些改造。

我們讓每個(gè) MPM 組件樓層都擁有一個(gè)初態(tài)函數(shù)，它是位于組件生命周期最開始的一個(gè)異步函數(shù)。初態(tài)函數(shù)以組件配置數(shù)據(jù)為入?yún)?，異步返回用于組件初始化渲染需要的初態(tài)數(shù)據(jù)。

三端引擎在創(chuàng)建組件實(shí)例之前，會先收集各組件的初態(tài)函數(shù)，執(zhí)行，并將函數(shù)的異步返回結(jié)果作為組件初始化渲染的數(shù)據(jù)。



基于初態(tài)函數(shù)，我們對客戶端，也就是靜態(tài) H5 和小程序端的渲染流程做了一些調(diào)整。我們不再允許客戶端隨意在 created 鉤子函數(shù)中編寫初態(tài)數(shù)據(jù)請求，而是要通過初態(tài)函數(shù)來實(shí)現(xiàn)，為的就是和直出端的頁面解析渲染流程保持嚴(yán)格統(tǒng)一，便于同構(gòu)。



而對于直出端，其解析流程大體和客戶端相同，唯一區(qū)別是，直出流式渲染后，頁面到達(dá)客戶端需要進(jìn)行樓層組件的激活，讓直出樓層接受 Vue 的狀態(tài)管理。



有時(shí)候我們可能遇到這種場景需求：有一個(gè)組件，串聯(lián)請求了主、次兩個(gè)接口，次接口內(nèi)容沒那么重要，為了提高直出效率，能不能只直出主接口，次接口等到了客戶端再請求呢？



為了實(shí)現(xiàn)這類主次接口的分端請求，我們又進(jìn)一步對初態(tài)函數(shù)做了一些改造。我們讓初態(tài)函數(shù)支持了這種寫法，除了返回一個(gè) Promise 來表示異步之外，我們允許初態(tài)函數(shù)提供第二個(gè)參數(shù) —— callback 。 callback 是一個(gè)回調(diào)函數(shù)，用于通知引擎執(zhí)行渲染，所以我們可以通過在初態(tài)函數(shù)中多次調(diào)用 callback 函數(shù)來實(shí)現(xiàn)初態(tài)數(shù)據(jù)的分階段渲染。

對于這類寫法的初態(tài)函數(shù)，直出端只會響應(yīng)其中的第一個(gè) callback ，也就是說，當(dāng)?shù)谝粋€(gè) callback 被執(zhí)行時(shí)，直出端就默認(rèn)你已經(jīng)準(zhǔn)備好了用于直出渲染的數(shù)據(jù)，余下的 callback 將直接忽略。等到了客戶端之后，初態(tài)函數(shù)會再被執(zhí)行一遍，以補(bǔ)充剩余的 callback 調(diào)用。這樣一來，我們只需要把主接口數(shù)據(jù)放在第一個(gè) callback 調(diào)用，次接口數(shù)據(jù)由第二個(gè) callback 調(diào)用，就能實(shí)現(xiàn)主次接口數(shù)據(jù)的分端請求渲染了。


八、總結(jié)

1.頁面搭建系統(tǒng)的開發(fā)心得

1.1 嚴(yán)謹(jǐn)設(shè)計(jì)

相比獨(dú)立開發(fā)一個(gè)頁面，搭建場景的開發(fā)可能隨時(shí)隨地都要求著嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)。任何你認(rèn)為的微不足道，如果不引起重視，最終都可能被放大，成為一個(gè)繞不開的絆腳石，阻礙你的系統(tǒng)進(jìn)一步迭代優(yōu)化。


1.2 重視規(guī)范

很多時(shí)候我們的設(shè)計(jì)，比如今天討論的數(shù)據(jù)模型解決方案，并不是什么高深的技術(shù)，包括數(shù)據(jù)源的編寫、三端同構(gòu)流程，更多只是一套開發(fā)范式。搭建系統(tǒng)需要考慮的東西遠(yuǎn)比獨(dú)立開發(fā)場景多得多，有了規(guī)范約束，才能更加自如地面對迭代和協(xié)同開發(fā)。


1.3 重視統(tǒng)一

獨(dú)立和統(tǒng)一并不矛盾，并不是說搭建場景就是一切務(wù)求獨(dú)立。相反，獨(dú)立和統(tǒng)一是相輔相成的，雖然搭建的目的是自由組合，但在設(shè)計(jì)開發(fā)時(shí)卻必須足夠重視統(tǒng)一的思想。


2.關(guān)注我們


最后，感謝大家的觀看，歡迎掃碼關(guān)注我們的技術(shù)團(tuán)隊(duì) WecTeam，給你帶來更多技術(shù)分享。


近兩年 Scott 觀察到前端行業(yè)已經(jīng)完全進(jìn)入競爭的深水區(qū)，各大小公司的前端 TL 剛剛上任，初帶團(tuán)隊(duì)，針對前端工程師這個(gè)群體，應(yīng)該怎么管人理事，搭臺拿結(jié)果，幫帶有成長，就成立了這個(gè)前端技術(shù)主管學(xué)習(xí)交流群，在人的選用育留上互相學(xué)習(xí)成長，入群的門檻是你有實(shí)線或者虛線在帶團(tuán)隊(duì)，請加 Scott 微信: codingdreamer 邀請入群：
看完若有啟發(fā)，就請點(diǎn)贊評論轉(zhuǎn)發(fā)三連吧

關(guān)鍵詞：實(shí)現(xiàn),系統(tǒng),模型,設(shè)計(jì),數(shù)據(jù)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉