前端的發(fā)展太快了，前端框架和技術(shù)的發(fā)展也層出不窮，還包括不同智能設(shè)備的出現(xiàn)，對(duì)前端開(kāi)發(fā)同學(xué)來(lái)說(shuō)是個(gè)很大的跳轉(zhuǎn)，簡(jiǎn)單列舉下：

• 前端框架：vue、react、angular
• 小程序：微信小程序、支付寶小程序、字節(jié)跳動(dòng)小程序
• 智能設(shè)備：蘋果設(shè)備、天貓精靈、小度

這樣就滋生了一些問(wèn)題，比如我要開(kāi)發(fā)一個(gè)通用的頁(yè)面，兼容不同的端測(cè)和小程序，顯然目前是做不到的，我們只能開(kāi)發(fā)多套頁(yè)面去適配不同的場(chǎng)景，這樣的話成本就太高了。

很多同學(xué)都在嘗試解決這個(gè)問(wèn)題，也催生了類似taro這樣的多端統(tǒng)一開(kāi)發(fā)框架，這是一個(gè)好的解決方案，但是比較被動(dòng)，缺乏一定的擴(kuò)展性。

這篇文章我們要探討的是，看能不能換個(gè)角度去解決這個(gè)問(wèn)題，提升開(kāi)發(fā)效率。

viewmodel

當(dāng)我們?cè)陂_(kāi)發(fā)一個(gè)頁(yè)面的時(shí)候，不管用的是哪一種框架，通常都會(huì)抽象出一層viewmodel層，它主要有2個(gè)作用

• 和服務(wù)端進(jìn)行交互，接受后臺(tái)返回的數(shù)據(jù)，進(jìn)行加工并傳遞給view層渲染
• 接受view層的回調(diào)，加工數(shù)據(jù)并返回給view層渲染

從上圖中我們可以看出，viewmodel是一段獨(dú)立的通用代碼邏輯，起到了承前啟后的作用。它和view層關(guān)系更加緊密，因此通常會(huì)放在前端測(cè)。

既然viewmodel是獨(dú)立的，那我們能不能把它放在后端呢？這樣一個(gè)最大的好處就是viewmodel可以進(jìn)行復(fù)用，不需要在重復(fù)編寫，而且只需要改動(dòng)一個(gè)viewmodel，就可以全量生效。

似乎是一個(gè)很美好的想法，但是這部分代碼由誰(shuí)去開(kāi)發(fā)呢，總不可能寄希望于后端同學(xué)吧，當(dāng)然只能是我們自己，也感謝于serverless架構(gòu)的出現(xiàn)，讓這件事情變成了可能。

有些同學(xué)可能會(huì)問(wèn)，既然viewmodel后移了，那view呢？后續(xù)會(huì)考慮結(jié)合我們的ui2code技術(shù)，那真的就比較完美了。

什么是serverless

我們先簡(jiǎn)單介紹一下什么是serverless，serverless的基礎(chǔ)是云技術(shù)，它是云技術(shù)發(fā)展到一定階段而出現(xiàn)的一種革命性的高端架構(gòu)。serverless并不是說(shuō)不需要服務(wù)器，而是指不需要開(kāi)發(fā)者去關(guān)心底層服務(wù)器的狀態(tài)、資源和擴(kuò)容等，開(kāi)發(fā)者只需要關(guān)注于業(yè)務(wù)邏輯實(shí)現(xiàn)。

架構(gòu)上，我們可以把serverless分為FaaS和BaaS。

FaaS是用于創(chuàng)建、運(yùn)行、管理函數(shù)服務(wù)的計(jì)算平臺(tái)，它支持多種開(kāi)發(fā)語(yǔ)言，比如java、nodejs、dart等，這有利于不同端測(cè)的開(kāi)發(fā)同學(xué)介入開(kāi)發(fā)。FaaS是基于事件驅(qū)動(dòng)的思想，只有當(dāng)一個(gè)函數(shù)被事件觸發(fā)時(shí)才會(huì)占用服務(wù)器資源執(zhí)行，不然都是無(wú)需占用服務(wù)器資源的。

BaaS提供了用于函數(shù)調(diào)用的第三方基礎(chǔ)服務(wù)，比如身份校驗(yàn)、日志、數(shù)據(jù)庫(kù)等，它是有服務(wù)商直接提供，開(kāi)發(fā)者無(wú)需關(guān)系實(shí)現(xiàn)，直接調(diào)用即可。

實(shí)踐一下

我們是通過(guò)gaia平臺(tái)開(kāi)發(fā)后端接口，gaia可以理解為上文提到的FaaS平臺(tái)。

日常開(kāi)發(fā)中有這樣一個(gè)需求，下面是這個(gè)需求的一個(gè)頁(yè)面

因?yàn)檫@個(gè)頁(yè)面上的數(shù)據(jù)比較多，先把它切分成一個(gè)個(gè)小的模塊，后臺(tái)返回?cái)?shù)據(jù)的時(shí)候也根據(jù)模塊來(lái)返回?cái)?shù)據(jù)。

我們是根據(jù)viewmodel來(lái)設(shè)計(jì)接口，首先肯定有一個(gè)首屏數(shù)據(jù)接口；然后是頁(yè)面上的交互，比如切換卡片、切換芝麻信用按鈕，切換會(huì)引起頁(yè)面數(shù)據(jù)變化，我們可以統(tǒng)一封裝一個(gè)頁(yè)面更新的接口；最后是一個(gè)開(kāi)通的接口。

后端接口

前后端交互最重要的數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)，我們省略了中間的業(yè)務(wù)邏輯處理，看下接口的數(shù)據(jù)結(jié)構(gòu)

1、首屏接口

返回的數(shù)據(jù)主要有幾個(gè)特征

• 根據(jù)前端的頁(yè)面模塊定義返回結(jié)構(gòu)
• 字段的顆粒度很細(xì)，頁(yè)面上的每個(gè)元素都對(duì)應(yīng)一個(gè)字段值
• 有兩個(gè)字段來(lái)控制模塊的顯示和刷新

2、更新接口

更新接口的返回?cái)?shù)據(jù)結(jié)構(gòu)和首屏接口類似，但是入?yún)⒂兴煌?#xff0c;主要包括2個(gè)字段

• data：當(dāng)前頁(yè)面的數(shù)據(jù)，為了避免數(shù)據(jù)的重復(fù)獲取
• action: 定義的頁(yè)面操作

前端處理

從后端返回的數(shù)據(jù)可以看到，數(shù)據(jù)是及其詳細(xì)的，無(wú)需我們做任何的業(yè)務(wù)邏輯處理，直接映射到頁(yè)面即可。這樣，前端已經(jīng)變成了很薄的一層數(shù)據(jù)，沒(méi)有任務(wù)的業(yè)務(wù)邏輯處理，變的很簡(jiǎn)單，當(dāng)需要遷移到其他端時(shí)，只需要遷移視圖層即可。當(dāng)有任何的業(yè)務(wù)變動(dòng)時(shí)，只需要修改后端的接口，就能生效。

結(jié)論

通過(guò)具體的實(shí)踐，我們發(fā)現(xiàn)，對(duì)于前端開(kāi)發(fā)同學(xué)來(lái)說(shuō)，變的簡(jiǎn)單了，開(kāi)發(fā)效率有很大的提升，前端同學(xué)甚至都不需要去理解具體的業(yè)務(wù)邏輯，就能完成頁(yè)面的開(kāi)發(fā)。而且，提取的viewmodel可以復(fù)用到不同的端測(cè)，設(shè)置還包括native端。我們還可以將viewmodel拆分成更小粒度的viewmodel，方便在不同的頁(yè)面接口中進(jìn)行復(fù)用。我們有同學(xué)還在FaaS側(cè)基于redux的思想封裝了一個(gè)通用的狀態(tài)管理框架，規(guī)范了前后端的交互。

后面， 還有一些問(wèn)題待我們?nèi)ソ鉀Q，比如開(kāi)發(fā)成本、viewmodel的邏輯拆分、具體接口問(wèn)題定位等。

阿里云雙11億元補(bǔ)貼提前領(lǐng)，進(jìn)入抽取iPhone 11 Pro：https://www.aliyun.com/1111/2019/home?utm_content=g_1000083110

原文鏈接
本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

總結(jié)

以上是生活随笔為你收集整理的闲鱼前端基于serverless的一种多端开发解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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