如何搭建一個功能複雜的前端配置化框架(一)

背景

如今不少公司主要業務是c端，擁有巨大用戶和流量的同時，b端業務不可或缺，CRM，CMS，運營配置化管理平臺，數據可視化平臺，各類審批平臺。這些系統都有幾個共同的特色：需求多，變化快，查詢頁，列表頁，提交頁面。而這些頁面都是類似的，UI要求低，功能簡單。因此咱們能不能開發一套配置化平臺解放生產力呢？答案是確定的。咱們只須要配置一下Json就能生成一個頁面，這個如何實現呢？咱們慢慢道來......

技術選型

Nodejs + Vue／React + Json schema

框架搭建

分析：頁面只需一個容器，能夠理解爲一個Div，在加載頁面的時候，異步去分佈式配置中心（Redis或其餘）獲取頁面配置，頁面配置單純的就是個Json字符串。配置數據取出來以後，咱們開始解析Json，包括Json的正確性，合法性等。最後再經過Vue組件的Render方法渲染頁面，看到這裏，不少人會有以下的疑惑：

1. Json格式如何定義？
2. Json如何和組件對應起來？
3. 組件是怎麼渲染出來的？
4. 組件間如何通訊？
5. 支持複雜的邏輯交互嗎？

框架創新及優化

• 支持無限級組件嵌套渲染

• 簡化組件間通訊

• 頁面配置實時預覽

疑問解答

1. Json格式如何定義？

    這個沒有統一的標準，徹底按照我的喜愛，給你們展現一下個人定義：

{
 "uniqueId": "mt-form",
 "attrs": {
 "style": {
 "paddingBottom": "15px",
 "paddingLeft": "5px"
    }
  }
}複製代碼

2. Json如何和組件對應起來？ 咱們先看一個自定義組件Form.vue的代碼：

<template>
 <el-form :label-width="labelWidth" :inline="true" class="mt-form-inline">
    <slot></slot>
 </el-form>
</template>
<script>
export default {
 props: ['labelWidth']
}
</script>
<style>
</style>複製代碼

新建組件庫模塊ComponentsLib.js，咱們把自定義組件經過這個模塊暴露出去：

/**
 * 引入全部公共組件庫
 */
import Form from './Form.vue'

module.exports = {
 /**
   * 對外暴露組件，名稱id必須惟一
   */
 'mt-form': Form
} 複製代碼

3. 組件是怎麼渲染出來的

    寫了組件和暴露出組件以後，咱們怎麼渲染出來呢？經過Vue.component定義一個全局組件：

import Vue from 'vue'
import ComponentsLib from './ComponentsLib' // 暴露出來的組件庫

/**
 * 注入全局的頁面容器組件
 * 全部組件必須包裹在一個容器組件中
 */
Vue.component('page-container', {
 render: function (createElement) {
 return this.deepComponents(this.pageConfig, createElement)
  },
 methods: {
 deepComponents (pageConfig, createElement) {
 if (pageConfig) {
 return createElement(ComponentsLib[pageConfig.uniqueId], {
 ...pageConfig.attrs
        }, this.deepChildren(pageConfig.children, createElement))
      }
    },
 /**
     * 遞歸遍歷全部子組件
     * @param {} pageConfig
     * @param {*} createElement
     */
 deepChildren (pageConfig, createElement) {
 if (!pageConfig) {
 return createElement('span')
      }
 if (pageConfig) {
 let children = []
 for (let i = 0; i < pageConfig.length; i++) {
 let item = pageConfig[i]
 if (item) {
 children.push(createElement(ComponentsLib[item.uniqueId], {
 ...item.attrs }, this.deepChildren(item.children, createElement)))
          }
        }
 return children
      }
    }
  },
 props: {
 pageConfig: {
 type: Object,
 required: true
    }
  }
})複製代碼

能夠看出主要的一點，個人組件經過組件庫暴露出來，而且每一個組件都有一個惟一的ID，而我在Json中配置的時候uniqueId就是對應我組件的惟一ID，這樣經過Vue.component的Render方法，能夠遞歸遍歷渲染出個人組件，這樣就能實現組件的無限級嵌套。

效果預覽