資訊專欄INFORMATION COLUMN
摘要：我們只需要配置一下就能生成一個頁面，這個如何實現(xiàn)呢我們慢慢道來技術(shù)選型框架搭建分析頁面只需一個容器，可以理解為一個，在加載頁面的時候，異步去分布式配置中心或其他獲取頁面配置，頁面配置單純的就是個字符串。
背景
現(xiàn)在很多公司主要業(yè)務(wù)是c端，擁有巨大用戶和流量的同時，b端業(yè)務(wù)不可或缺，CRM，CMS，運(yùn)營配置化管理平臺，數(shù)據(jù)可視化平臺，各種審批平臺。這些系統(tǒng)都有幾個共同的特點：需求多，變化快，查詢頁，列表頁，提交頁面。而這些頁面都是相似的，UI要求低，功能簡單。所以我們能不能開發(fā)一套配置化平臺解放生產(chǎn)力呢？答案是肯定的。我們只需要配置一下Json就能生成一個頁面，這個如何實現(xiàn)呢？我們慢慢道來......
技術(shù)選型
Nodejs + Vue／React + Json schema
框架搭建
分析：頁面只需一個容器，可以理解為一個Div，在加載頁面的時候，異步去分布式配置中心（Redis或其他）獲取頁面配置，頁面配置單純的就是個Json字符串。配置數(shù)據(jù)取出來之后，我們開始解析Json，包括Json的正確性，合法性等。最后再通過Vue組件的Render方法渲染頁面，看到這里，很多人會有如下的疑惑：
Json格式如何定義？
Json如何和組件對應(yīng)起來？
組件是怎么渲染出來的？
組件間如何通信？
支持復(fù)雜的邏輯交互嗎？
框架創(chuàng)新及優(yōu)化
1.支持無限級組件嵌套渲染
2.簡化組件間通信
3.頁面配置實時預(yù)覽
疑問解答
1.Json格式如何定義？
這個沒有統(tǒng)一的標(biāo)準(zhǔn)，完全按照個人喜好，給大家展示一下我的定義：
{
"uniqueId": "mt-form",
"attrs": {
"style": {
"paddingBottom": "15px",
"paddingLeft": "5px"
}
}
}
2.Json如何和組件對應(yīng)起來？ 我們先看一個自定義組件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就是對應(yīng)我組件的唯一ID，這樣通過Vue.component的Render方法，可以遞歸遍歷渲染出我的組件，這樣就能實現(xiàn)組件的無限級嵌套。
效果預(yù)覽
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52604.html
摘要：如何構(gòu)建大型的前端項目搭建好項目的腳手架一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內(nèi)的組件化和項目外的組件化。 如何構(gòu)建大型的前端項目 1. 搭建好項目的腳手架 一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個功能： 自動化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
摘要：如何構(gòu)建大型的前端項目搭建好項目的腳手架一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內(nèi)的組件化和項目外的組件化。 如何構(gòu)建大型的前端項目 1. 搭建好項目的腳手架 一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個功能： 自動化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
閱讀 3404·2022-01-04 14:20
閱讀 3118·2021-09-22 15:08
閱讀 2209·2021-09-03 10:44
閱讀 2324·2019-08-30 15:44
閱讀 1502·2019-08-29 18:40
閱讀 2669·2019-08-29 17:09
閱讀 2996·2019-08-26 13:53
閱讀 3227·2019-08-26 13:37
