内容來源：2017年5月13日，徐辛承在“h5夢工廠”進行《前端開發配置化方案》演講分享。it大咖說作為獨家視訊合作方，經主辦方和講者審閱授權釋出。 閱讀字數：2017 | 9分鐘閱讀
摘要
前端開發的主要職能就是把網站的界面更好地呈現給使用者，它涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。百度外賣進階前端工程師徐辛承，為我們帶來關于百度外賣前端開發配置化方案的分享。
内部平台開發中的痛點
所有業務線由一個大的内部平台來完成，最後集中下放到app中。這個系統的缺點就是重複性工作很多。
以banner配置為例，我們發現頁面功能相似度高，重複工作較多。我們之前的開發模式在搭建基礎頁面時，主要靠複制另一個類似項目的代碼，在此基礎上進行修改來完成。同時由于一個代碼可能要多人開發，代碼風格難以統一。
受到了百度h5的啟發，我們最終想到要通過一個平台來解決這些問題。百度h5是通過拖拽的方式來生成h5活動頁面的一個平台，它的元件非常豐富。它整個頁面的設計思路和現在一些元件化架構的思路很相似。它把頁面中的元素拆分到以元件為最小機關，通過元件構成一個頁面。
但其實它并不适合我們的業務場景。因為在這樣一個平台中，我們内部平台的互動無法支援，元件也不能拓展。
我們想要的得是一個簡單的平台，所有角色都能使用，拖拽界面适用度高，大家樂于接受。
我們希望任何頁面都能用可視化的方式去完成。我們會提供豐富的元件庫、互動的配置方式，同時也提供了自定義拓展腳本，通過配置化的方式去生成頁面。
因為是我們自己的團隊來開發這個項目，是以我們希望這個項目的可維護性很強。我們會用熟悉的技術棧開發，用可擴充性強的方式去挖掘技術棧底層内容，子產品會拆分得很詳細。
最終基于這些想法，我們開發了blocks平台。
頁面配置平台blocks
1什麼是blocks？
blocks是一個拖拽+配置生成的系統。元件是頁面中的最小機關，blocks有拖拽形式的頁面畫布，可以支援元件的添加和擴充、支援自定義腳本。blocks是基于vue2.0開發。
2頁面配置子產品
頁面配置子產品主要分為組建清單、頁面畫布和設定元件屬性。它的輸出是config.js，同時會在mapconfig.js裡預留事件鈎子。
3腳本配置子產品
因為現在還沒有完全實作可視化，我們在json檔案裡開發擴充腳本，生成了一些事件鈎子去更快地開發代碼。
4頁面渲染引擎
頁面渲染引擎是最核心的部分。通過json配置檔案生成頁面，解析元件的配置和層級關系，以及解析配置檔案裡的自定義擴充腳本，最後渲染出頁面。
平台核心設計
1核心思想
我們最初的想法是，輸入是json，輸出是web page。後來經過思考發現在一個json中實作輸入有些困難，是以把json拆分為config.js和mapconfig.js。
2config.js
3為什麼這麼做？
因為virtual dom tree結構為object，代碼量有明顯減少。基于virtual dom的實作，它的拓展性是很強的。
4每一個節點
針對每一個virtual dom的節點，主要有三個屬性。
第一個是tag，就是節點名稱，也可以了解為這個節點用的元件。
第二是data，節點屬性。
children是這個節點包含的所有節點。
5mapconfig.js
以前用的架構是mvc，model和view沒有架構實作，它們之間的互動都是通過controller來解決。
這種指令性的開發方式會導緻controller開發效率底下，容易變得臃腫和難以維護。
6腳本配置
在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在平台中進行執行。
目前新增了頁面配置子產品和腳本配置子產品。
7元件的引入
對通用元件庫和業務元件做了一次封裝。以input元件為例，在寫input元件模版的時候需要寫一些相應的屬性，元件配置子產品把這些屬性抽離出來，以可視化的模式在表單中進行填寫。
每個元件中主要分為index.vue和setting.js。index.vue是渲染在畫布和頁面中的一個模版檔案，setting.js是一個元件設定表單。
8腳本配置子產品
腳本配置子產品主要提供了vuex.store的開發群組建内部事件擴充，未來還會增加正常事件的可視化配置。當公司内部rd接口變多的時候，接口規範會很難做到，如果有一個平台能做到前端的互動和互動的規範，就可以反向限制rd接口的規範，更可以提高開發效率。
平台現狀和規劃
1收益對比
做這個平台之前，在接口上沒有太多的規範。通過這個平台可以限制rd接口進行規範。有了規範之後可以極大地提高工作效率。
之前我們每個人代碼風格不同，代碼品質很低，難以維護。通過拖拽的方式生成，品質會很高。
原來基本所有的工作都是由研發完成的，現在部分工作可以外放，甚至當頁面簡單或者平台做到極緻的時候，就可以實作0成本開發。
2未來要做的工作
功能：把元件庫做得更豐富，盡量支援更多的元件；提供一個組合件的功能和可視化的互動配置。
易用性：增加ui設計，做一些系統互動方面的優化。
落地：對老代碼做重構，用這個平台做新項目開發。
我的分享到此結束，謝謝大家！
相關推薦 推薦文章 <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247486616&idx=1&sn=9d759f9fd8d83e2318bef089c7da2a95&chksm=97ebaf33a09c2625c5db5670f032cf05d91b1419bffc7b90ca59121c35693659aef1f37af4dd&scene=21#wechat_redirect" target="_blank">阿裡巴巴前端專家渚薰：h5互動的正确打開方式</a> <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247486038&idx=1&sn=71dec7ea8d97d532d97d5a919d936fab&chksm=97eba9fda09c20eb87ec245f05293e41ed96e6f3ed8247e59264a1872660f4310731994bd92f&scene=21#wechat_redirect" target="_blank">微信開發中的前後端之坑</a> <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247485093&idx=2&sn=a877646eb7543ea601cf37501cce372b&chksm=97eba50ea09c2c18bb95ae90608ef64a719f9adea31fb3393741b2a1a72244b8adbe356bd8b0&scene=21#wechat_redirect" target="_blank"></a> 近期活動 <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247486678&idx=3&sn=520dd4a59e48b45876f94465c419379a&chksm=97ebaf7da09c266b4b26362bbc27730bdf3b71ab1c06a9703d862187bfe55802b583731245d4&scene=21#wechat_redirect" target="_blank">直播 | 2017紅象雲騰大資料基礎軟體v5.0釋出暨合作夥伴大會</a>