362      技術社區[雲棲]

百度外賣如何做到前端開發配置化

內容來源：2017年5月13日，徐辛承在“H5夢工廠”進行《前端開發配置化方案》演講分享。IT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。

 

 閱讀字數：2017  | 9分鍾閱讀

前端開發的主要職能就是把網站的界麵更好地呈現給用戶，它涵蓋的知識麵非常廣，既有具體的技術，又有抽象的理念。百度外賣高級前端工程師徐辛承，為我們帶來關於百度外賣前端開發配置化方案的分享。

內部平台開發中的痛點

所有業務線由一個大的內部平台來完成，最後集中下放到APP中。這個係統的缺點就是重複性工作很多。

以banner配置為例，我們發現頁麵功能相似度高，重複工作較多。我們之前的開發模式在搭建基礎頁麵時，主要靠複製另一個類似項目的代碼，在此基礎上進行修改來完成。同時由於一個代碼可能要多人開發，代碼風格難以統一。

受到了百度H5的啟發，我們最終想到要通過一個平台來解決這些問題。百度H5是通過拖拽的方式來生成H5活動頁麵的一個平台，它的組件非常豐富。它整個頁麵的設計思路和現在一些組件化框架的思路很相似。它把頁麵中的元素拆分到以組件為最小單位，通過組件構成一個頁麵。

但其實它並不適合我們的業務場景。因為在這樣一個平台中，我們內部平台的交互無法支持，組件也不能拓展。

我們想要的得是一個簡單的平台，所有角色都能使用，拖拽界麵適用度高，大家樂於接受。

我們希望任何頁麵都能用可視化的方式去完成。我們會提供豐富的組件庫、交互的配置方式，同時也提供了自定義拓展腳本，通過配置化的方式去生成頁麵。

因為是我們自己的團隊來開發這個項目，所以我們希望這個項目的可維護性很強。我們會用熟悉的技術棧開發，用可擴展性強的方式去挖掘技術棧底層內容，模塊會拆分得很詳細。

最終基於這些想法，我們開發了Blocks平台。

頁麵配置平台Blocks

Blocks是一個拖拽+配置生成的係統。組件是頁麵中的最小單位，Blocks有拖拽形式的頁麵畫布，可以支持組件的添加和擴展、支持自定義腳本。Blocks是基於vue2.0開發。

頁麵配置模塊主要分為組建列表、頁麵畫布和設置組件屬性。它的輸出是config.js，同時會在mapConfig.js裏預留事件鉤子。

因為現在還沒有完全實現可視化，我們在JSON文件裏開發擴展腳本，生成了一些事件鉤子去更快地開發代碼。

頁麵渲染引擎是最核心的部分。通過JSON配置文件生成頁麵，解析組件的配置和層級關係，以及解析配置文件裏的自定義擴展腳本，最後渲染出頁麵。

平台核心設計

我們最初的想法是，輸入是JSON，輸出是Web Page。後來經過思考發現在一個JSON中實現輸入有些困難，所以把JSON拆分為Config.js和MapConfig.js。

因為Virtual Dom Tree結構為object，代碼量有明顯減少。基於Virtual Dom的實現，它的拓展性是很強的。

針對每一個Virtual Dom的節點，主要有三個屬性。

第一個是Tag，就是節點名稱，也可以理解為這個節點用的組件。

第二是Data，節點屬性。

Children是這個節點包含的所有節點。

以前用的框架是MVC，Model和View沒有框架實現，它們之間的交互都是通過Controller來解決。

這種命令性的開發方式會導致Controller開發效率底下，容易變得臃腫和難以維護。

在state裏它是一個驅動應用的數據源。View以聲明方式將state映射到視圖。而actions是響應在view上的用戶輸入導致的狀態變化。

但如果把代碼中的事件寫得很鬆散的話，並沒有辦法形成一個配置文件。所以我們運用了Vuex。

Vuex是專為Vue.js應用程序開發的狀態管理模式，也是集中管理狀態的一個工具，它以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex.store是MapConfig.js的一部分，它包含了State、Getters、Mutations和Actions。組件屬性在State裏，組件預埋的鉤子放在Mutations和Actions裏，Getters在需要的時候會用到。

Vuex提供了輔助函數mapState、mapGetters、mapMutations和mapActions在平台中進行執行。

目前新增了頁麵配置模塊和腳本配置模塊。

對通用組件庫和業務組件做了一次封裝。以input組件為例，在寫input組件模版的時候需要寫一些相應的屬性，組件配置模塊把這些屬性抽離出來，以可視化的模式在表單中進行填寫。

每個組件中主要分為index.vue和setting.js。Index.vue是渲染在畫布和頁麵中的一個模版文件，setting.js是一個組件設置表單。

腳本配置模塊主要提供了Vuex.store的開發和組建內部事件擴展，未來還會增加常規事件的可視化配置。當公司內部RD接口變多的時候，接口規範會很難做到，如果有一個平台能做到前端的交互和交互的規範，就可以反向約束RD接口的規範，更可以提高開發效率。

平台現狀和規劃

做這個平台之前，在接口上沒有太多的規範。通過這個平台可以約束RD接口進行規範。有了規範之後可以極大地提高工作效率。

之前我們每個人代碼風格不同，代碼質量很低，難以維護。通過拖拽的方式生成，質量會很高。

原來基本所有的工作都是由研發完成的，現在部分工作可以外放，甚至當頁麵簡單或者平台做到極致的時候，就可以實現0成本開發。

功能：把組件庫做得更豐富，盡量支持更多的組件；提供一個組合件的功能和可視化的交互配置。

易用性：增加UI設計，做一些係統交互方麵的優化。

落地：對老代碼做重構，用這個平台做新項目開發。

我的分享到此結束，謝謝大家！

相關推薦

推薦文章

• 
  

• 
  

近期活動

• 直播 | 2017紅象雲騰大數據基礎軟件V5.0發布暨合作夥伴大會

點擊【https://www.itdks.com】進入幹貨密道

最後更新：2017-06-28 18:02:03

  上一篇：  淘寶首頁“有一套”

  下一篇：  ICML2016 TUTORIAL參會分享