成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

13651657101 / 3454人閱讀

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

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

技術(shù)選型
Nodejs + Vue／React + Json schema

框架搭建

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

Json格式如何定義？

Json如何和組件對(duì)應(yīng)起來？

組件是怎么渲染出來的？

組件間如何通信？

支持復(fù)雜的邏輯交互嗎？

框架創(chuàng)新及優(yōu)化

1.支持無限級(jí)組件嵌套渲染

2.簡化組件間通信

3.頁面配置實(shí)時(shí)預(yù)覽

疑問解答

1.Json格式如何定義？

這個(gè)沒有統(tǒng)一的標(biāo)準(zhǔn)，完全按照個(gè)人喜好，給大家展示一下我的定義：

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

2.Json如何和組件對(duì)應(yīng)起來？ 我們先看一個(gè)自定義組件Form.vue的代碼：

新建組件庫模塊ComponentsLib.js，我們把自定義組件通過這個(gè)模塊暴露出去：

/**
 * 引入所有公共組件庫
 */
import Form from "./Form.vue"

module.exports = {
 /**
   * 對(duì)外暴露組件，名稱id必須唯一
   */
 "mt-form": Form`請(qǐng)輸入代碼`
}

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

寫了組件和暴露出組件之后，我們怎么渲染出來呢？通過Vue.component定義一個(gè)全局組件：
import Vue from "vue"
import ComponentsLib from "./ComponentsLib" // 暴露出來的組件庫

/**
 * 注入全局的頁面容器組件
 * 所有組件必須包裹在一個(gè)容器組件中
 */
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
    }
  }
})

可以看出主要的一點(diǎn)，我的組件通過組件庫暴露出來，并且每個(gè)組件都有一個(gè)唯一的ID，而我在Json中配置的時(shí)候uniqueId就是對(duì)應(yīng)我組件的唯一ID，這樣通過Vue.component的Render方法，可以遞歸遍歷渲染出我的組件，這樣就能實(shí)現(xiàn)組件的無限級(jí)嵌套。

效果預(yù)覽

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/52604.html

相關(guān)文章

  • 如何構(gòu)建大型的前端項(xiàng)目

    摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目內(nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能： 自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...

    lykops 評(píng)論0 收藏0

  • 如何構(gòu)建大型的前端項(xiàng)目

    摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目內(nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能： 自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...

    plokmju88 評(píng)論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

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

    call_me_R 評(píng)論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

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

    wzyplus 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<