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

13651657101 發布于2019-08-02 10:51 / 3368人閱讀

摘要：我們只需要配置一下就能生成一個頁面，這個如何實現呢我們慢慢道來技術選型框架搭建分析頁面只需一個容器，可以理解為一個，在加載頁面的時候，異步去分布式配置中心或其他獲取頁面配置，頁面配置單純的就是個字符串。

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

技術選型
Nodejs + Vue／React + Json schema

框架搭建

分析：頁面只需一個容器，可以理解為一個Div，在加載頁面的時候，異步去分布式配置中心（Redis或其他）獲取頁面配置，頁面配置單純的就是個Json字符串。配置數據取出來之后，我們開始解析Json，包括Json的正確性，合法性等。最后再通過Vue組件的Render方法渲染頁面，看到這里，很多人會有如下的疑惑：

Json格式如何定義？

Json如何和組件對應起來？

組件是怎么渲染出來的？

組件間如何通信？

支持復雜的邏輯交互嗎？

框架創新及優化

1.支持無限級組件嵌套渲染

2.簡化組件間通信

3.頁面配置實時預覽

疑問解答

1.Json格式如何定義？

這個沒有統一的標準，完全按照個人喜好，給大家展示一下我的定義：

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

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

新建組件庫模塊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方法，可以遞歸遍歷渲染出我的組件，這樣就能實現組件的無限級嵌套。

效果預覽

云服務器 GPU云服務器如何搭建一個自己的服務器搭建一個java框架一步步搭建框架 html如何搭建框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52604.html

如何構建大型的前端項目

摘要：如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。如何構建大型的前端項目 1. 搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能：自動化構建代碼，比如打包、壓縮、上傳等功能本地開發與調試，并有熱替換與...

lykops 2019-08-29 16:56 評論0 收藏0
如何構建大型的前端項目

摘要：如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。如何構建大型的前端項目 1. 搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能：自動化構建代碼，比如打包、壓縮、上傳等功能本地開發與調試，并有熱替換與...

plokmju88 2019-08-23 12:18 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

wzyplus 2019-08-02 12:08 評論0 收藏0