JSON 數據搭建 Vue 頁面

今天給你們帶來的是一個使用 JSON 數據來進行頁面搭建的工具 juggle
此項目是基於公司內部一個開發工具從新整理並開源的。
目前功能還不是特別完善，可是基本的渲染引擎能夠正常工做。
先看一個演示的 demo，你所看到的都是經過JSON渲染而成：
juggle.isjs.cn/report.html…

GitHub

github.com/adminV/jugg…

起源：

內部在上線此工具以前咱們的工做方式比較原始，當有新需求過來，就基於統一的項目模板進行開發，已有組件若是知足需求，將代碼 Copy 到新頁面進行開發。 即便兩個頁面有 90% 類似，都須要從頭開始開發，開發時間包含了找組件，調試組件，對接新數據，自測等環節，樂觀狀況下開發時間也在3個小時左右。開發完成後交由QA同窗按照新頁面來進行測試，測試時間也須要4個小時。也就是一個頁面的複製 + 修改 + 測試的時間就須要1天。 這樣的開發速度面對極其頻繁的需求迭代時，好比 ABtest 多需求上線，一天上線 5+ 個需求，就會出現瓶頸，增長人力也不能有質的提升。 最先 CTO 提出的解決方案是參考大數據平臺的報表渲染頁面，將頁面組件化，模板化，實現頁面的靈活配置、搭建。 最終目標是能實現頁面的可視化拖拽佈局，將一些簡單需求交給 PM 或者運營。 工具上線後的效果很好 ,若是所有都是已有組件的化，搭建一個頁面只須要10分鐘，算上自測30分鐘就能夠提測。由於都是已有組件，因此測試只須要簡單的進行驗證便可。 這樣一來整個開發週期縮短到了1個小時，而且達到了組件管理、複用的目的。

方案：

首先明確目標，爲何這麼作：

1. 減小重複開發成本，多個頁面，多個項目共有的自定義組件，須要有一套公共的倉庫來進行維護。
2. 將簡單工做交給PM或者運營。
3. 提升開發效率，以往作一個新頁面的開發時間，使用配置生成只須要10分鐘。
4. 提升測試效率，組件未升級的狀況下不須要進行深度測試，只須要簡單的冒煙便可，而且方便將來集成E2E測試。

在肯定了總體方向後，咱們進行了技術選型，與需求高度類似的是阿里的飛冰。但由於飛冰的物料開發和想象中的不太同樣，最終放棄了。 我認爲的物料應該是一個很是靈活的元素，我能夠基於已有的組件庫進行二次封裝，也能夠從頭開始開發組件。因此咱們決定按照本身的理解來新開發一套工具。 物料內部維護，在頁面中動態使用物料進行頁面搭建，在一個基礎頁面上承載多個頁面，使頁面配置化。

明確了目標以後再來明確初版本要實現的目標，抽象的看咱們平常開發的頁面，能夠分爲如下幾類：

1. 活動頁 特色是動畫樣式豐富。
2. 錄入頁 特色是表單校驗，輸入項校驗。
3. 回顯頁 特色是請求單向，沒有用戶操做。
4. 落地頁 特色是入口多，方案多，交互少。

正好最近雙十一，各個電商平臺的各類活動頁，主會場，分會場，品牌落地頁特別多。 這次開源的工具是以此爲目標，實現落地頁的快速配置搭建。

落地頁由不一樣的組件搭建而成，按照組件用途分爲如下三類：

1. collection 容器級別組件，例如：下拉列表容器，展開收起容器，tab切換容器，側邊欄容器等
2. block 塊級別組件，用來展現數據的最小單元，例如：多行內容塊，左右兩列內容塊， flex等份內容塊等
3. public 公共組件，例如：全局的提示窗，全局的頁頭頁尾，全局的loading等

再來思考一個問題，靈活的另外一面是規範，若是一個頁面可配置，就要知足如下要求，我稱之爲約定：

1. 同一個位置有可能放置任意組件，要求全部組件接受相同的參數。
2. 基於第一點，要求每一個組件對 prop 參數的要求應該是統一的。
3. 組件之間應該有層級關係，容器級別組件（collection）擁有承載塊級組件（block）的能力，而且容器之間能夠嵌套。
4. 容器組件應該擁有自主獲取數據的能力，例如三個tab標籤切換時，每一個tab都對應單獨的接口以及列表。

頁面的規則制定好以後咱們要考慮頁面數據的規範，咱們把頁面數據分爲兩類：

1. 頁面佈局數據，第一部分是什麼組件，包含什麼組件，要有一個返回佈局數據的源
2. 頁面業務數據，仍是那個原則，可複用的前提是規範，咱們與後端約定接口保持最簡單的數據結構，保證其複用性。

想清楚以上內容後，再來看看實際的實現方式.

開發步驟：

目標明確，場景明確，開始項目技術棧的肯定, 開發環境使用了改造後的 @Vue/cli 4.0 此項目不依賴任何 Vue 組件庫，我爲了儘快完成demo，使用了有讚的 vant 庫。 頁面模板的載體是 report.html 頁面。用來承載全部頁面配置。 頁面模板文件爲一個 JSON 文件，位於 public/pageConfig 目錄下，以 config 開頭的js文件。
經過 script 標籤異步引入，配置參數掛載到 window.pageConfig 中，再經過 Vue 實例向下傳遞。 固然你可使用接口而不是使用文件，我這麼作的目的是讓配置的維護更方便簡單。

每次接觸到新需求時，應該儘量抽象出來成爲獨立組件，不管是從提升開發效率的角度仍是提升測試效率的角度看，這麼作都是必要的。 juggle工具不關注組件，只關注結構。因此你能夠直接引入組件庫的組件，也能夠基於組件庫二次開發封裝一個新的組件。 全部組件位於 /src/components 目錄下。按照組件類型區分爲block，container，public。 在對應目錄下新增組件文件便可完成新組件的開發。 第二步將新組件註冊到 /src/htmls/main/report.js 入口的mixin中。 簡單兩步就能夠在配置中使用該組件了：

{
       "templateId": "BlockFlexBox",
       "prop": {
         "dataKeyChain": "bannerList",
         "styleOptions":{}
       },
       "childItem": []
   }

複製代碼

要注意，juggle的結構對組件的prop進行了約定，全部組件只接受 prop，childItem，baseData 三個參數。 prop： 包含全部內部變量 childItem： 包含全部子組件，按照順序渲染 baseData： 全局數據 也就是說，新組件的全部參數都要包含在 prop 下，在組件內部進行拆解。

本地運行：

clone 此項目，依次執行如下命令

$ npm install 
	$ npm run serve
複製代碼

打開頁面便可查看：http://localhost:8080/report.html?pageCode=0001

開源合做：

項目目前只是一個簡單的渲染工具，我但願它將來應該是一個功能更強大，配置更靈活的開發工具。 目前能想到還未實現的大功能點以下：

1. 靜態配置文件的防緩存
2. 組件的按需打包，按需加載
3. 全局狀態的約定以及管理
4. 拖拽佈局後臺實現
5. 復交互類型頁面的配置 要實現以上功能，憑藉我的力量須要長時間的整理分析，而且獨立維護思路單一會考慮不全面。 因此在這裏邀請各位參與到此開源項目的維護中。只須要Fork到本身的倉庫下，將功能點實現後提交PR給我便可。參加開源項目的同窗，會被列入到項目的人員列表中。