一、背景

vivo游戲中心是一款垂類的應(yīng)用商店，為用戶提供了多元化游戲的下載渠道。隨著游戲中心手游品類的豐富，各品類用戶的量級也不斷增加，不同游戲偏好的用戶核心關(guān)注點(diǎn)也不同，從預(yù)約、測試、首發(fā)、更新到維護(hù)，不同游戲生命周期節(jié)點(diǎn)的運(yùn)營需要突出的重點(diǎn)不同。

針對上述不同業(yè)務(wù)場景，運(yùn)營人員為了服務(wù)好廣大的vivo游戲用戶，需要進(jìn)行精細(xì)化運(yùn)營，以不同的視覺樣式呈現(xiàn)給不同用戶。比如，針對獨(dú)立游戲品類的用戶，平臺如果提供了活動，攻略等內(nèi)容的透出，能夠促進(jìn)用戶更多的下載和消費(fèi)?；顒?、攻略等內(nèi)容以不同視覺樣式呈現(xiàn)，運(yùn)營需要通過實(shí)驗(yàn)的方式來驗(yàn)證效果，以確定最終的投放方案。這些需求都需要重新開發(fā)。受限于游戲中心APP較長的發(fā)版時(shí)間，運(yùn)營的預(yù)期效果往往不佳。

因此，我們希望系統(tǒng)具備以下能力：通過不同視覺樣式的抽象與復(fù)用，快速靈活的對頁面進(jìn)行布局調(diào)整，對不同的人群投放，最終以實(shí)驗(yàn)的方式來確定最佳的投放方案。

怎么樣才能實(shí)現(xiàn)這些系統(tǒng)功能呢？答案就是模塊化。下面為大家介紹一下游戲中心的模塊化實(shí)踐。

二、什么是模塊化

所謂模塊化，其實(shí)它是一種模塊化的設(shè)計(jì)思想，即指能針對相同或不同功能、性能、規(guī)格的產(chǎn)品，進(jìn)行功能分析，并設(shè)計(jì)出一系列的功能模塊。

透過模塊的多樣選擇將產(chǎn)品客制化，可以滿足市場許多不同的需求。那么游戲中心模塊化就是針對游戲中心相同或者不同功能的視覺樣式，進(jìn)行業(yè)務(wù)場景分析，并設(shè)計(jì)出一系列的功能模塊。通過模塊的多樣選擇，快速靈活的搭建出不同的頁面，來滿足不同用戶的需求。

模塊化有三個能力：組件化，配置化和實(shí)驗(yàn)化。

組件化，即將頁面layout拆分成多個組件，對這些組件進(jìn)行抽象，進(jìn)而達(dá)到復(fù)用的目的。組件是UI樣式和數(shù)據(jù)的組合，組件化將UI樣式切分成一些獨(dú)立的，可復(fù)用的區(qū)域。配置化，即通過不同組件的拼接，可以快速搭建出各種頁面。組件是構(gòu)成頁面的基本單位，因此每個頁面都是由若干個組件構(gòu)成的。組件是抽象的，對外輸出是統(tǒng)一，可以根據(jù)不同的需求靈活的調(diào)整順序和位置。實(shí)驗(yàn)化，即通過多層試驗(yàn)框架和DMP系統(tǒng)，快速的將不同的頁面投放到不同特征的用戶手機(jī)上，以達(dá)到多版本運(yùn)營的目的。多層實(shí)驗(yàn)框架是vivo內(nèi)部實(shí)現(xiàn)的ABtest框架，DMP系統(tǒng)即數(shù)據(jù)管理平臺，可以把它簡單理解成一個數(shù)據(jù)池子，用來接收來自各方的數(shù)據(jù)，然后再經(jīng)過融合、處理和優(yōu)化后再使用這些數(shù)據(jù)。

大家可以看到，三個功能分別對應(yīng)了三個概念。組件化對應(yīng)了組件，配置化對應(yīng)了頁面，實(shí)驗(yàn)化對應(yīng)了方案。它們是包含的關(guān)系，即一個方案包含了若干個頁面，而一個頁面也包含了若干個組件。

模塊化之前，游戲中心的首頁是由頂部的廣告banner，導(dǎo)航欄，游戲列表和穿插組件構(gòu)成的。穿插組件即為橫向插入在游戲列表中用于運(yùn)營推廣的由視覺樣式和數(shù)據(jù)組成的廣告。從穿插組件的定義來看，其實(shí)就是組件化的概念，只是當(dāng)時(shí)把組件化和游戲列表做了相應(yīng)的區(qū)分。穿插組件的視覺樣式比較單一，只有專題、視頻、熱詞、活動、論壇等。如圖1中，小編推薦，熱游驛站，搶先推薦是1*4的游戲?qū)ｎ}穿插，類似九宮格（八個熱搜詞）為熱詞穿插。

（圖1：模塊化前）

穿插組件按照一定的規(guī)律穿插在游戲列表的任何位置，但是廣告banner和導(dǎo)航欄是固定的，整個頁面布局混亂，形態(tài)固定，不易變更。假如把最頂部的banner挪到小編推薦的下方，只能通過發(fā)版解決。將專題右上角的“更多”改成“換一換”，或者將游戲列表中某些游戲改為其內(nèi)容的介紹，也需要通過發(fā)版解決。

模塊化之后，利用組件化能力，既可以靈活的調(diào)整順序，也可以動態(tài)更改組件的視覺樣式，即使是游戲列表，也是可以動態(tài)配置。利用多個組件的順序排列，可以快速搭建出一個頁面。

通過ABtest框架和DMP系統(tǒng)，不同的頁面，以投放方案的方式，能夠快速呈現(xiàn)給對應(yīng)的人群，進(jìn)行多版本的運(yùn)營。圖1和2是模塊化前后首頁推薦的對比圖，雖然從大的樣式的沒有太大的改變，但是模塊化之前的樣式相對單一，而模塊化之后游戲列表中排列了單游戲大圖、金剛位、小喇叭、專題、新游預(yù)約、下載榜等組件。

（圖2：模塊化后）

不同的組件可以滿足不同的業(yè)務(wù)場景。例如單游戲大圖組件，輔以推薦，可以快速推廣新游和熱游，滿足了不同用戶對不同游戲節(jié)點(diǎn)的需求；新游預(yù)約組件可以從更多角度滿足用戶對于單款游戲提前訂閱內(nèi)容或關(guān)注其實(shí)時(shí)動態(tài)的需求。

三、怎么實(shí)現(xiàn)模塊化

從前面的介紹大家可以看到，模塊化通過組件化的方式快速搭建頁面并將其投放給不同標(biāo)簽的人群，功能強(qiáng)大且配置靈活，為我們省去了不少的開發(fā)成本，那么我們的底層是怎么實(shí)現(xiàn)的呢？

3.1 模型抽象和統(tǒng)一

根據(jù)組件布局，我們可以將組件抽象成兩部分：視覺樣式和數(shù)據(jù)；視覺樣式可以簡單理解為UI樣式，即呈現(xiàn)在用戶面前的展現(xiàn)形式，我們可以將視覺樣式簡單概括為模板。

模板定義了當(dāng)前組件最基礎(chǔ)的形式，比如當(dāng)前組件是滑塊的形式，還是固定的形式；模板上還定義了一些可變的樣式，即定義了當(dāng)前模板哪些位置是可以通過配置來完成的，比如模板的長寬高、組合樣式（2*2,1*4）、包含列表的個數(shù)等，能夠動態(tài)配置的程度依賴模板的定義。

所謂的數(shù)據(jù)，按照來源分為推薦數(shù)據(jù)和人工排期數(shù)據(jù)。推薦數(shù)據(jù)來自算法和大數(shù)據(jù)，而人工排期，則是運(yùn)營在后臺配置的。由于推薦數(shù)據(jù)背后的邏輯比較復(fù)雜，本文只討論人工排期數(shù)據(jù)。人工排期是一個四維數(shù)據(jù)。除了數(shù)據(jù)本身的“業(yè)務(wù)性”之外，它是有時(shí)效性的，游戲中心的廣告位展示都是有時(shí)間限制的，比如游戲中心首頁頂部banner，今天和昨天展示的是不一樣的；其次，它是有“空間性”的，即不同的用戶可能看到的數(shù)據(jù)是不一樣的；另外，它是有動作性的，即點(diǎn)擊后產(chǎn)生的事件。比如點(diǎn)擊某個組件，可以是彈出一個懸浮窗，或者切換到到另外一個頁面。

因此，模塊化可以簡單理解為模板和人工排期的組合。通俗點(diǎn)理解，組件其實(shí)像一個類，每個頁面上不同的組件即為組件的對象，對象會實(shí)例化一些數(shù)據(jù)和行為。通過組件化的方式，我們不僅解決了端側(cè)和服務(wù)端的耦合，同時(shí)還實(shí)現(xiàn)了組件在不同頁面的復(fù)用。

排期數(shù)據(jù)的組成分為三個層次（即素材、推廣物料以及排期）。最底層數(shù)據(jù)當(dāng)然就是圖片，視頻，推薦語，評論等，當(dāng)然游戲信息中也會包含游戲icon，背景圖以及簡單的視頻，但是此處的圖片并不是指游戲icon，而是比icon更精致，用來宣傳廣告的素材圖片，這類數(shù)據(jù)我們統(tǒng)稱為素材。由素材組成了上層的推廣物料。

什么是推廣物料呢？推廣物料其實(shí)就是基于某種目的，按照一定的形式來展示的內(nèi)容集合。比如banner，其實(shí)就是一張圖片加上其背后的關(guān)聯(lián)的內(nèi)容構(gòu)成，圖片是為了吸引用戶點(diǎn)擊，目的是為了推廣背后關(guān)聯(lián)的內(nèi)容。推廣物料加上時(shí)間空間和動作屬性就變成了排期。素材，推廣物料和排期都進(jìn)行了統(tǒng)一的抽象。

如下圖3，推廣物料有Banner、專題、活動、網(wǎng)頁等；排期有膠囊banner、游情報(bào)，種草機(jī)、重磅更新等；如種草機(jī)就是網(wǎng)頁（內(nèi)容鏈接）加上時(shí)間組成的；整個結(jié)構(gòu)呈現(xiàn)一個倒金字塔結(jié)構(gòu)。

（圖3）

原先游戲中心每個資源位的排期數(shù)據(jù)都是放在不同的地方，比如頂部banner排期，網(wǎng)游banner排期都有各自的表來保存。在這樣的情況下，數(shù)據(jù)庫表的數(shù)量可能會比較多，對統(tǒng)一拓展來說就更加復(fù)雜。假如我需要對頂部banner和網(wǎng)游banner都要增加對不同人群（DMP系統(tǒng)）展示不同數(shù)據(jù)的時(shí)候，通常需要在每一張表中都增加一個DMP的字段來表示當(dāng)前排期需要展示給用戶的標(biāo)簽id。

模塊化之后，我們將游戲中心所有的資源位都當(dāng)成一個個模塊，也就是都可以看成是排期數(shù)據(jù)，我們只需要兩張表就可以做到排期三維數(shù)據(jù)的展示：排期數(shù)據(jù)表以及排期關(guān)聯(lián)的具體素材表。因此我們在設(shè)計(jì)排期表的時(shí)候, 將素材信息(如圖4中的material_id和material_type)數(shù)據(jù)保存在排期表中, 將DMP或者其他統(tǒng)一的信息也保存在排期表中, 這樣做的好處就是對所有的排期都能生效統(tǒng)一的流程。

（圖4）

3.2 后臺業(yè)務(wù)流程統(tǒng)一化和可視化

如此復(fù)雜的業(yè)務(wù)流程，肯定少不了后臺的配合。素材，推廣物料和排期的統(tǒng)一后，我們也將后臺的配置流程標(biāo)準(zhǔn)化。

具體的配置流程如圖5，6。圖5偏向于后臺的配置流程，是自下而上的配置。而圖6是為了方便大家理解，是自上而下的結(jié)構(gòu)。用戶層面展示的是某個具體的方案，方案由若干個頁面組成，但是會根據(jù)用戶的畫像具體展示，即配置的頁面?zhèn)€數(shù)不一定是展示的頁面?zhèn)€數(shù)。頁面由若干個組件組成，組件由模板和數(shù)據(jù)組成....一層層往下分解，可以整體理解模塊化的結(jié)構(gòu)組成。

（圖5）

（圖6）

模塊化之前，配置首頁banner排期，需要到首頁banner的tab欄下，在全部banner排期里面加入相關(guān)的排期，然后在首頁banner排期里面挑選全部banner排期里面的數(shù)據(jù)，而配置其他頁面的banner排期呢，也是需要在類似的目錄結(jié)構(gòu)中做相關(guān)操作，彼此之間的banner是割裂的，無法通用；對于運(yùn)營來講，配置工作量也增加了不少。

模塊化之后，操作變得非常簡單了。在組件層面，通過數(shù)據(jù)庫配置，我們可以將模板的信息事先保存在數(shù)據(jù)庫中。在數(shù)據(jù)層面，我們把所有的banner數(shù)據(jù)統(tǒng)一保存在推廣物料管理并綁定到排期中，做到復(fù)用。在業(yè)務(wù)組件管理頁面中，根據(jù)組件應(yīng)用場景來選擇模板，之后配置對應(yīng)的排期數(shù)據(jù)。

如圖7，當(dāng)前重磅更新場景關(guān)聯(lián)的是人工排期（如果關(guān)聯(lián)的是推薦，則是推薦對應(yīng)的code），配置好樣式后整個業(yè)務(wù)組件也就配置完成了。然后在頁面管理中將你想要配置的組件添加到某個頁面中，設(shè)置好對應(yīng)的DMP。配置好組件后，在后臺頁面上可以滾動進(jìn)行整體頁面效果預(yù)覽。

（圖7）

如圖8。最后可以將頁面復(fù)用到不同的投放方案中，運(yùn)營后臺通過審核流和上線點(diǎn)檢后，最終顯示在用戶界面端。當(dāng)前配置流程自下而上，邏輯清晰，符合運(yùn)營的配置習(xí)慣。

（圖8）

3.3 前端業(yè)務(wù)流程抽象與統(tǒng)一

目前，游戲中心首頁和新游專區(qū)改造成了模塊化頁面。首頁是游戲中心非常重要的分發(fā)渠道，模塊化要求頁面形式多種多樣，同時(shí)假如模塊化改造不被用戶認(rèn)可的時(shí)候也要能夠動態(tài)回退。

因此首頁模塊化頁面會有三種類型：

純模塊化頁面，穿插模塊化頁面和H5模塊化頁面

所謂純模塊化頁面，即頁面中的所有元素都是由組件化數(shù)據(jù)構(gòu)成。所謂穿插模塊化頁面，其頁面結(jié)構(gòu)為按照一定規(guī)律在游戲列表中穿插了若干個組件，和模塊化之前的頁面組織結(jié)構(gòu)是一模一樣的，只是后臺的實(shí)現(xiàn)方式不一樣。

穿插模塊化頁面中的列表還有兩種不同的形式，分為游戲列表和混合數(shù)據(jù)流列表。穿插頁面可以在一個屏幕中最大效率的展示游戲。

最后的H5模塊化頁面，可以認(rèn)為由H5組件所構(gòu)成的頁面，由我司的悟空建站提供頁面。通過多層試驗(yàn)框架和DMP獲取不同方案以及不同頁面的流程不在此處贅述。這里我們講一講整個流程中最為復(fù)雜的穿插頁面流程，以及我們怎么在如此復(fù)雜的流程中抽象和設(shè)計(jì)。

（圖9）

3.3.1 流程統(tǒng)一

從上圖（大家無需過分關(guān)注流程圖里面各個步驟的業(yè)務(wù)邏輯，流程圖只是為了展示原來流程的復(fù)雜度）我們可以看出來，用戶請求開始，需要經(jīng)過N個步驟。這么冗長的步驟，如果寫在一個service，那么就會造成邏輯混亂，維護(hù)性不高和擴(kuò)展性差的效果，因此我們可以分而治之。圖9中，我們用不同的顏色來區(qū)分步驟，可以做一個簡單的流程歸納。

歸納后的流程如下圖所示。我們可以把提交異步線程池進(jìn)行歸納，可以理解為獲取組件列表和混合數(shù)據(jù)列表為兩個步驟。

（圖10）

我們再進(jìn)行歸納和抽象后，整個模塊化的頁面獲取流程就可以簡化為四個步驟：初始化階段、獲取組件列表階段、構(gòu)建階段和合并階段，如圖；

（圖11）

在《金字塔原理》一書中曾說過，讀者在閱讀文章的時(shí)候，必須閱讀理解每一句話，并且尋找每句話之間的聯(lián)系，前前后后反復(fù)思考。如果你的文章結(jié)構(gòu)呈現(xiàn)金字塔形，文章的思路自金字塔頂部開始逐漸向下展開，那么讀者肯定會覺得你的文章比較容易讀懂。這一現(xiàn)象體現(xiàn)了人類思維的基本規(guī)律，那么閱讀代碼其實(shí)也是一樣的邏輯。好的代碼即是一段業(yè)務(wù)邏輯的注釋，通過閱讀代碼能夠大概判斷主要的業(yè)務(wù)流程。在構(gòu)建階段, 可以通過組合不同的策略來獲取不同的排期數(shù)據(jù)。策略和組件解耦，當(dāng)新增策略的時(shí)候，無需改動原有的業(yè)務(wù)邏輯。此處不同的策略也可以采用工廠模式的方法來獲取。

首頁的組件展示邏輯是比較復(fù)雜的，尤其對于穿插模塊化頁面。正如前文所述，穿插頁面由游戲列表和業(yè)務(wù)組件構(gòu)成，即在一個游戲列表中，穿插了各個業(yè)務(wù)組件。數(shù)據(jù)列表如果是游戲數(shù)據(jù)列表， 那么每個游戲都是按照一定的比例來排列的，且需要和組件中推廣物料的底層數(shù)據(jù)是游戲的去重。比如游戲按照網(wǎng)游，單機(jī)和獨(dú)立游戲的比例來展示，假如上一個組件展示過當(dāng)前游戲，那么這個游戲需要被過濾，且補(bǔ)位游戲也是有一個邏輯，比如網(wǎng)游被過濾了，那么取補(bǔ)位游戲列表中的游戲，其次用網(wǎng)游來補(bǔ)，再次用下面的游戲頂上來。去重邏輯包含兩種，一種是能被之前的游戲過濾，也能過濾下面的游戲；另外一種則只能去重下面的游戲，不會被上面的游戲去重。

（圖12）

在獲取業(yè)務(wù)組件中排期數(shù)據(jù)（如上圖，其中也包含了游戲信息）的時(shí)候，還會有獲取ABTest信息（不同的用戶展示不同的游戲信息），游戲黑白名單過濾，已安裝過濾，已曝光過濾，額外信息處理，組件數(shù)據(jù)組裝等過程。每一個排期數(shù)據(jù)獲取都會用不同的Handler來處理。每一個Handler都有自己的處理邏輯，針對如此多的排期以及他們的擴(kuò)展，如果沒有一套處理的統(tǒng)一邏輯，那么簡直是災(zāi)難。新人在開發(fā)新組件中排期數(shù)據(jù)的時(shí)候，可能會遺漏非常多的細(xì)節(jié)。另外，推廣物料之間其實(shí)是有一些通用邏輯，如果不將這些邏輯沉淀到領(lǐng)域模型中，邏輯無法復(fù)用，將會散落在各個Handler中，我們以下圖橙色的步驟來詳細(xì)說明。

3.3.2 推廣物料的流程統(tǒng)一化

一方面，我們將獲取并處理推廣物料的流程統(tǒng)一化。如下圖所示流程中，其實(shí)基本上就包含了所有推廣物料需要處理的步驟邏輯（不重要的步驟已忽略）。統(tǒng)一之后，我們可以將一些通用的邏輯下沉，形成統(tǒng)一的方法調(diào)用。比如我們可以根據(jù)人工排期，推薦排期等，采用工廠方法的設(shè)計(jì)模式來屏蔽獲取推廣物料的邏輯。當(dāng)然我們?yōu)榱颂嵘阅?，對于人工排期?shù)據(jù)，利用統(tǒng)一緩存的方式，通用場景code來獲取；接著利用不同過濾策略來過濾掉進(jìn)入黑灰名單的游戲或者內(nèi)容。處理完額外信息之后再用列表的數(shù)據(jù)將組件中重復(fù)的數(shù)據(jù)給去除。

（圖13）

3.3.3 模型的邏輯抽象與沉淀

另一方面，我們將統(tǒng)一處理組件和推廣物料的邏輯沉淀到對應(yīng)的領(lǐng)域模型中，如圖；

（圖14）

整個過濾重復(fù)數(shù)據(jù)的流程都是針對組件進(jìn)行的，那么在組件層面，會有大量的重復(fù)邏輯，比如每個組件需要在最后返回的數(shù)據(jù)個數(shù)處理上，不同的組件返回的個數(shù)是不一樣的，那么這部分邏輯寫在組件這個領(lǐng)域模型中會更加妥當(dāng)。比如已曝光和已安裝處理，這個邏輯就可以放在組件層面來處理， 當(dāng)然放置在Handler層處理也是沒有問題的。在推廣物料層面，也有一些通用的邏輯，比如1*4個游戲組成的專題和2*2個游戲組成的專題，他們背后都有一套接入推薦系統(tǒng)并兜底的邏輯，也可以沉淀在專題這個領(lǐng)域模型來處理。

四、寫在最后

當(dāng)前，很多業(yè)務(wù)開發(fā)的同學(xué)，尤其在熟悉了業(yè)務(wù)之后，通常會陷入一個誤區(qū)：做業(yè)務(wù)的基本上就是CRUD，沒有什么技術(shù)含量。但是在開發(fā)的過程中，往往又缺乏相應(yīng)的思考，導(dǎo)致重復(fù)開發(fā)。那么如何才能讓業(yè)務(wù)開發(fā)變得更有吸引力和技術(shù)含量呢？

游戲中心模塊化改造過程中，利用組件的抽象和復(fù)用，提升了組件化，配置化和實(shí)驗(yàn)化能力，快速的支撐了業(yè)務(wù)需求，同時(shí)通過統(tǒng)一標(biāo)準(zhǔn)流程和利用領(lǐng)域模型知識不斷的完善業(yè)務(wù)代碼，提升了代碼的維護(hù)性和可擴(kuò)展性。隨著業(yè)務(wù)的不斷發(fā)展，即使現(xiàn)在非常合理的架構(gòu)也會變得臃腫，難以擴(kuò)展，但是如何做好業(yè)務(wù)的方法論確是不變的。因此做業(yè)務(wù)開發(fā)同學(xué)，應(yīng)該多思考怎么把業(yè)務(wù)做深做通用，提升快速實(shí)現(xiàn)業(yè)務(wù)價(jià)值的能力。

作者：vivo互聯(lián)網(wǎng)服務(wù)器團(tuán)隊(duì)—Chen Wenyang