優(yōu)維低代碼實(shí)踐：自定義模板（優(yōu)維 cmdb）
優(yōu)維低代碼技術(shù)專欄，是一個(gè)全新的、技術(shù)為主的專欄，由優(yōu)維技術(shù)委員會(huì)成員執(zhí)筆，基于優(yōu)維7年低代碼技術(shù)研發(fā)及運(yùn)維成果，主要介紹低代碼相關(guān)的技術(shù)原理及架構(gòu)邏輯，目的是給廣大運(yùn)維人提供一個(gè)技術(shù)交流與學(xué)習(xí)的平臺(tái)。
優(yōu)維低代碼實(shí)踐連載第14期
《自定義模板》
▽
一、概述
構(gòu)件是我們的頁(yè)面最基礎(chǔ)的單元，不同構(gòu)件的組合和搭配形成了頁(yè)面的交互。當(dāng)我們的不同頁(yè)面想要復(fù)用相同的模塊時(shí)。可復(fù)用性就是自定義模板誕生的背景，它可以將一套構(gòu)件組合封裝成一個(gè)新的可復(fù)用的單元，然后像普通構(gòu)件那樣使用。
二、模板的使用
2.1 代理的設(shè)置
模板的詳情解析可查看「自定義模板詳解」本篇著重講解模板在我們我們低代碼平臺(tái)的使用， 我們的 visual-builder 平臺(tái)有管理模板的專屬頁(yè)面，它跟我們編排的普通頁(yè)面的界面是類似的，本質(zhì)上都是組合不同構(gòu)件。
模板也跟構(gòu)件一樣具有屬性，方法，事件，插槽，不同的是它們只是代理其內(nèi)部構(gòu)件用的，模板只是起到封裝的容器作用，我們具體看下模板代理的配置項(xiàng)，我們以小產(chǎn)品 「FIRST-APP-LESSON-4」中 「tpl-task-form」 為例子。
上面是一個(gè)添加任務(wù)表單項(xiàng)封裝為一個(gè)模板的例子，我們能看到該模板代理了事件（events）和方法（methods），同樣如果要代理屬性和插槽的話配置如下所示：
# 該示例為代理 form 中 values 屬性和 form 中的 items 插槽properties: values: # 代理后的新屬性名稱 ref: form refProperty: valuesslots: items: # 代理后的新插槽名稱 ref: form refSlot: items # 被代理的插槽# 配置好后，該模板的就跟普通構(gòu)件的使用方式一樣，當(dāng)添加 tpl-task-form 的構(gòu)件后，該模板的屬性和方法等就是上面定義的新屬性和新方法
2.2 State
state 為模板級(jí)別的數(shù)據(jù)變量，它跟 Context 上下文的數(shù)據(jù)一樣，不同的是 context 類似我們的全局變量，作用域是整個(gè)路由，而 State 能控制在模板實(shí)例的作用域下，數(shù)據(jù)封裝在模板內(nèi)部、外部不可訪問(wèn)，同時(shí)一個(gè)模板的多個(gè)實(shí)例之間的數(shù)據(jù)互不影響。我們同樣看下 「tpl-task-form」這個(gè)模板定義了哪些 state 數(shù)據(jù)：
我們?cè)倏催@些變量對(duì)應(yīng)的使用方式：
2.3 模板預(yù)覽
我們開(kāi)發(fā)模板也是支持實(shí)時(shí)預(yù)覽的，面板的中間區(qū)域就是我們預(yù)覽區(qū)，當(dāng)我們需要調(diào)試時(shí)，我們可以根據(jù)模板的定義的 state 編輯不同的輸入?yún)?shù)。
上面說(shuō)完了模板的整個(gè)定義流程，我們?cè)倏聪履０遄罱K的使用效果，同樣拿 「tpl-task-form」這個(gè)模板示例：
最終我們完成了模板的創(chuàng)建，定義和使用，掌握了模板這個(gè)技能，我們可以把很多復(fù)雜的場(chǎng)景簡(jiǎn)化為一個(gè)個(gè)小模塊然后再組裝，這對(duì)于降低開(kāi)發(fā)復(fù)雜度是一個(gè)很好的助手。
