內容來源：2024年5月13日，徐辛承在“H5夢工廠”進行《前端開發配置化方案》演講分享。愛掏網 - it200.comIT大咖說作為獨家視頻合作方，經主辦方和講者審閱授權發布。愛掏網 - it200.com
?
?閱讀字數：2024 ?| 9分鐘閱讀
前端開發的主要職能就是把網站的界面更好地呈現給用戶，它涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。愛掏網 - it200.com百度外賣高級前端工程師徐辛承，為我們帶來關于百度外賣前端開發配置化方案的分享。愛掏網 - it200.com
內部平臺開發中的痛點
所有業務線由一個大的內部平臺來完成，最后集中下放到APP中。愛掏網 - it200.com這個系統的缺點就是重復性工作很多。愛掏網 - it200.com
以banner配置為例，我們發現頁面功能相似度高，重復工作較多。愛掏網 - it200.com我們之前的開發模式在搭建基礎頁面時，主要靠復制另一個類似項目的代碼，在此基礎上進行修改來完成。愛掏網 - it200.com同時由于一個代碼可能要多人開發，代碼風格難以統一。愛掏網 - it200.com
受到了百度H5的啟發，我們最終想到要通過一個平臺來解決這些問題。愛掏網 - it200.com百度H5是通過拖拽的方式來生成H5活動頁面的一個平臺，它的組件非常豐富。愛掏網 - it200.com它整個頁面的設計思路和現在一些組件化框架的思路很相似。愛掏網 - it200.com它把頁面中的元素拆分到以組件為最小單位，通過組件構成一個頁面。愛掏網 - it200.com
但其實它并不適合我們的業務場景。愛掏網 - it200.com因為在這樣一個平臺中，我們內部平臺的交互無法支持，組件也不能拓展。愛掏網 - it200.com
我們想要的得是一個簡單的平臺，所有角色都能使用，拖拽界面適用度高，大家樂于接受。愛掏網 - it200.com
我們希望任何頁面都能用可視化的方式去完成。愛掏網 - it200.com我們會提供豐富的組件庫、交互的配置方式，同時也提供了自定義拓展腳本，通過配置化的方式去生成頁面。愛掏網 - it200.com
因為是我們自己的團隊來開發這個項目，所以我們希望這個項目的可維護性很強。愛掏網 - it200.com我們會用熟悉的技術棧開發，用可擴展性強的方式去挖掘技術棧底層內容，模塊會拆分得很詳細。愛掏網 - it200.com
最終基于這些想法，我們開發了Blocks平臺。愛掏網 - it200.com
頁面配置平臺Blocks
1什么是Blocks？Blocks是一個拖拽+配置生成的系統。愛掏網 - it200.com組件是頁面中的最小單位，Blocks有拖拽形式的頁面畫布，可以支持組件的添加和擴展、支持自定義腳本。愛掏網 - it200.comBlocks是基于vue2.0開發。愛掏網 - it200.com
頁面配置模塊主要分為組建列表、頁面畫布和設置組件屬性。愛掏網 - it200.com它的輸出是config.js，同時會在mapConfig.js里預留事件鉤子。愛掏網 - it200.com
因為現在還沒有完全實現可視化，我們在JSON文件里開發擴展腳本，生成了一些事件鉤子去更快地開發代碼。愛掏網 - it200.com
頁面渲染引擎是最核心的部分。愛掏網 - it200.com通過JSON配置文件生成頁面，解析組件的配置和層級關系，以及解析配置文件里的自定義擴展腳本，最后渲染出頁面。愛掏網 - it200.com
平臺核心設計
我們最初的想法是，輸入是JSON，輸出是Web Page。愛掏網 - it200.com后來經過思考發現在一個JSON中實現輸入有些困難，所以把JSON拆分為Config.js和MapConfig.js。愛掏網 - it200.com
3為什么這么做？
因為Virtual Dom Tree結構為object，代碼量有明顯減少。愛掏網 - it200.com基于Virtual Dom的實現，它的拓展性是很強的。愛掏網 - it200.com
針對每一個Virtual Dom的節點，主要有三個屬性。愛掏網 - it200.com
第一個是Tag，就是節點名稱，也可以理解為這個節點用的組件。愛掏網 - it200.com
第二是Data，節點屬性。愛掏網 - it200.com
Children是這個節點包含的所有節點。愛掏網 - it200.com
以前用的框架是MVC，Model和View沒有框架實現，它們之間的交互都是通過Controller來解決。愛掏網 - it200.com
這種命令性的開發方式會導致Controller開發效率底下，容易變得臃腫和難以維護。愛掏網 - it200.com
在state里它是一個驅動應用的數據源。愛掏網 - it200.comView以聲明方式將state映射到視圖。愛掏網 - it200.com而actions是響應在view上的用戶輸入導致的狀態變化。愛掏網 - it200.com
但如果把代碼中的事件寫得很松散的話，并沒有辦法形成一個配置文件。愛掏網 - it200.com所以我們運用了Vuex。愛掏網 - it200.com
Vuex是專為Vue.js應用程序開發的狀態管理模式，也是集中管理狀態的一個工具，它以相應的規則保證狀態以一種可預測的方式發生變化。愛掏網 - it200.com
Vuex.store是MapConfig.js的一部分，它包含了State、Getters、Mutations和Actions。愛掏網 - it200.com組件屬性在State里，組件預埋的鉤子放在Mutations和Actions里，Getters在需要的時候會用到。愛掏網 - it200.com
Vuex提供了輔助函數mapState、mapGetters、mapMutations和mapActions在平臺中進行執行。愛掏網 - it200.com
目前新增了頁面配置模塊和腳本配置模塊。愛掏網 - it200.com
對通用組件庫和業務組件做了一次封裝。愛掏網 - it200.com以input組件為例，在寫input組件模版的時候需要寫一些相應的屬性，組件配置模塊把這些屬性抽離出來，以可視化的模式在表單中進行填寫。愛掏網 - it200.com
每個組件中主要分為index.vue和setting.js。愛掏網 - it200.comIndex.vue是渲染在畫布和頁面中的一個模版文件，setting.js是一個組件設置表單。愛掏網 - it200.com
腳本配置模塊主要提供了Vuex.store的開發和組建內部事件擴展，未來還會增加常規事件的可視化配置。愛掏網 - it200.com當公司內部RD接口變多的時候，接口規范會很難做到，如果有一個平臺能做到前端的交互和交互的規范，就可以反向約束RD接口的規范，更可以提高開發效率。愛掏網 - it200.com
平臺現狀和規劃
做這個平臺之前，在接口上沒有太多的規范。愛掏網 - it200.com通過這個平臺可以約束RD接口進行規范。愛掏網 - it200.com有了規范之后可以極大地提高工作效率。愛掏網 - it200.com
之前我們每個人代碼風格不同，代碼質量很低，難以維護。愛掏網 - it200.com通過拖拽的方式生成，質量會很高。愛掏網 - it200.com
原來基本所有的工作都是由研發完成的，現在部分工作可以外放，甚至當頁面簡單或者平臺做到極致的時候，就可以實現0成本開發。愛掏網 - it200.com
功能：把組件庫做得更豐富，盡量支持更多的組件；提供一個組合件的功能和可視化的交互配置。愛掏網 - it200.com
易用性：增加UI設計，做一些系統交互方面的優化。愛掏網 - it200.com
落地：對老代碼做重構，用這個平臺做新項目開發。愛掏網 - it200.com
我的分享到此結束，謝謝大家！
相關推薦
推薦文章
阿里巴巴前端專家渚薰：H5互動的正確打開方式
微信開發中的前后端之坑
近期活動
- 直播 | 2024紅象云騰大數據基礎軟件V5.0發布暨合作伙伴大會
點擊【http://www.itdks.com】進入干貨密道