大量研究結果表明人類通過圖形擷取資訊的速度比通過閱讀文字擷取資訊的速度要快很多，人腦對視覺資訊的處理要比書面資訊容易得多。而邏輯思維是一種比較抽象的思維，如果能把邏輯可視化将會大大提高接收效率。
什麼是邏輯可視化
- 可視化程式設計是指程式設計過程中可随時看到結果，程式與結果的調整同步；
- 可視化程式設計泛指一切使用可視化元素的操作，代替文本（編碼）輸入的程式設計方式，它大體上就像畫流程圖一樣，通過連接配接若幹“盒子”和“箭頭”來實作程式邏輯；
經典開發模式
經典的開發模式是，産品提供流程圖，與研發進行溝通，研發再根據邏輯進行coding，經典開發模式的痛點在于：
1. 邏輯複雜、無全局視角；
2. 邏輯代碼需要Coding：現有的頁面開發出的頁面與邏輯之間高度耦合，針對不同的頁面，往往需要根據頁面需求進行單獨的代碼開發；
3. 團隊溝通耗費成本：産品，研發，測試對不同的邏輯所産生的結果需要重複溝通，确認；
經典方式與邏輯可視化的差別
- 經典的開發模式是産品提供流程圖，研發根據流程圖進行邏輯開發，邏輯複雜時，研發需要和産品多次确認梳理邏輯關系；
- 可視化開發模式，産品隻需編輯邏輯節點圖，會自動生成AST抽象樹，然後對AST抽像樹進行自動解析，生成邏輯代碼。隻需要産品确認邏輯即可；
邏輯可視化的優勢
- 邏輯清晰，可根據傳入字段的不同，自動規劃邏輯執行路線與結果；
- 代碼自動生成，無需研發人員coding；
- 邏輯嚴格按照産品邏輯，不會導緻多人溝通造成邏輯遺漏或誤解；
邏輯可視化的效果
以下展示的是，根據字段的不同(使用者身份狀态，使用者實名，信用等級等資訊)，顯示的邏輯走向以及最終對業務樓層"京騰聯名卡"展示的影響：
- 左邊區域是業務預覽區域，根據配置确定樓層的三種展示情況：顯示/隐藏/置灰；
- 中間區域是邏輯預覽區域，根據配置字段的不同，展示不同的邏輯走向（其中，紅線辨別為配置字段後的邏輯走向）；
- 右邊區域是配置區域，展示的為生成的AST抽象文法樹；
可以看到，在邏輯預覽區，根據接口字段配置的不同，可自動生成一條邏輯走向圖，即紅線标注部分。
邏輯關系圖是怎麼建構的呢？
- 邏輯關系圖是由 邏輯元素+類别+關系 構成的；
- 邏輯元素是指可視化的圖形結構，比如矩形、圓形、菱形、方形等；
- 類别是指用于限定邏輯元素在邏輯關系圖中位置的使用條件或者使用方式。比如，該類别可包括：邏輯的起始類别、邏輯判斷類别以及狀态類别；
- 邏輯關系是指兩個邏輯元素之間的聯系；
下圖展示的邏輯關系圖為例，A（矩形）、B（菱形）、C（圓形）以及D（方形）的圖形均為邏輯元素，其中，A的類别為起始類别、B的類别為判斷邏輯類别、C以及D的類别均為狀态類别；A到B為一個連接配接關系，B到C為一個連接配接關系，等等，後續我們的可視化都是基于這個規則實作的。
有了上述規則，我們可以構造一個簡單的邏輯關系圖，建構出邏輯關系圖：
要生成如上圖所示的邏輯圖，需要以下步驟：
- 添加目标邏輯元素。當目标邏輯元素存在相鄰的邏輯元素時，在目标邏輯元素與所述相鄰的邏輯元素之間，生成連接配接關系辨別；
由于不滿足添加條件的邏輯元素則不可被添加，是以，通過上述建構出邏輯關系圖的過程，能夠有效地提高邏輯關系圖的準确率；
- 确定出邏輯配置資訊對應的執行路線；将邏輯配置資訊以及邏輯判斷條件對應的執行路線添加到屬性中。該過程主要包括以下幾個部分：
- 節點操作：
節點操作包含(新增"&&“節點，新增”||"節點，配置表達式，删除節點)等部分，我們以新增節點為例；
- AST抽象樹生成：
節點操作完成會自動生成AST抽象樹；
- AST樹解析生成代碼片段：
同樣，AST樹解析成代碼片段也是自動完成解析的，解析完成的代碼片段見上圖的預覽表達式；
核心代碼實作
邏輯可視化主要分為以下三部分：
1.節點操作
節點操作包含(新增"&&“節點，新增”||"節點，配置表達式，删除節點)等部分，我們以新增節點為例。
/**
* @param treeData:現有節點樹
* @param label:新增的節點類型(||,&&,'')
* @param node:目前操作的節點
*/
handleAdd = (treeData, label, currentNode) => {
// 擷取目前節點的父節點
const parentNode = currentNode.parentNode;
// 如果添加的操作，與目前節點，或者目前節點的父節點一樣，直接push一個新的節點，并改變其parentId
if (label === currentNode.type || label === parentNode.type) {
// 如果類型還是目前節點類型，則直接push新節點，父節點為目前節點
// 如果類型是目前父節點的類型，直接push新節點，父節點為目前節點的父節點
let parentId = label === parentNode.type ? parentNode.id : currentNode.id;
treeData.push(newNode);
newNode.parentId = parentId;
} else {
// 如果類型與目前節點(B節點)以及目前節點父節點(A節點)都不一緻,則
// 1.新增一個節點(C)作為父節點，C的父節點指向A
treeData.push(newNodeC);
newNodeC.parentId = parentNode.id;
// 2.新增一個節點(D),該節點的父節點指向C
treeData.push(newNodeD)
newNodeD.parentId = newNodeC.id;
// 3.節點B修改父節點指向C
currentNode.parentId = newNodeC.id;
}
};
新增節點後，如果要進行邏輯表達式的配置，我們也提供了配置方式，如以配置 userStatus == '3010’為例，下圖中各個字段的含義如下：
- 左-擷取資料方式：分為動态與靜态兩種方式，動态方式為從接口擷取，靜态為直接寫死；
- 左-接口：也就是本例中要擷取"userStatus"字段所在的接口；
- 左-字段：級聯方式選擇該字段；
- 條件表達式：可選的有"大于，小于，等于"三種條件；
右邊擷取的方式同上；
通過對節點的操作，可以生成節點資訊，節點資訊包含，父節點id，目前節點類型，目前節點表達式，目前節點層級，在x,y方向的偏移等資訊，通過這些資訊可以畫出可視化的邏輯樹圖。
2. AST抽象樹生成
每個節點的資訊都擷取之後，根據這些節點資訊進行遞歸，轉換成一顆完整的抽象樹，後續通過生成的抽象樹，轉換為代碼片段。
/**
* 統計樹中各個節點下子節點的數目
* @param treeData
* @param floor
*/
static transformTree(treeData, floor = 1) {
let rootCount = 0; // 記錄每個子樹下的節點數目
// 1. 循環該樹
for (let i = 0; i < treeData.length; i++) {
const node = treeData;
node.floor = floor;
// 2. 該節點是否為 葉子 節點，如果是，目前節點的childNodeCount設定為1；
if (node.children.length === 0) {
node.childNodeCount = 1;
node.floorNumber = rootCount;
rootCount++;
} else {
// 如果不是葉子節點，則統計目前節點下所有葉子節點的 childNodeCount
const leafCount = LogicConfig.transformTree(node.children, floor + 1);
node.childNodeCount = leafCount;
node.floorNumber = rootCount;
rootCount += leafCount;
}
}
return rootCount;
}
3. 資料轉換生成表達式
通過對剛剛生成的抽像樹進行解析，可以生成代碼片段。至此，在無研發參與的情況下，已經自動化的根據産品的流程圖生成了代碼片段。
/**
* @param data:目前節點
* @param parentType:父節點的類型(||,&&,'')
*/
getResult = (data, parentType) => {
// 判斷節點沒有子節點
const arr = [];
if (data.children.length === 0) {
// 直接傳回目前節點的表達式
return data.tips;
}
// 如果存在子節點，則
for (let i = 0; i < data.children.length; i++) {
const child = data.children;
// 如果節點沒有"||,&&"邏輯連接配接辨別，直接添加到數組
if (child.type === LOGIC_TYPE.none) {
arr.push(child.tips);
}
// 如果該節點類型為"||,&&"，則認為存在子表達式， 将其子節點添加到數組。
if (child.type === "||" || child.type === "&&") {
arr.push(this.getResult(child, data.type));
}
}
// 如果節點類型與父節點判斷類型一緻，認為是同級判斷，則直接拼接即可
if (data.type === parentType) {
return arr.join(` ${[data.type]} `);
} else {
// 如果節點類型與父節點判斷類型不一緻，則認為是新的一級，需要括号拼接
return `(${arr.join(` ${[data.type]} `)})`;
}
};
通過以上三個步驟，即可實作，新增邏輯節點圖，便可自動生成AST抽象樹，并解析為邏輯代碼，也就是圖中所示的預覽表達式。
邏輯可視化的應用
1. 邏輯可視化在鍊路監控中的應用
目前我們的鍊路監控也使用了可視化思想，通過對調用方法的來源進行辨別，生成調用鍊路的可視化走向圖。
2. 邏輯可視化與獵戶座的結合
獵戶座是一個配置化引擎，通過在配置化引擎上層封裝可視化使用者界面，讓頁面搭建者直接在獵戶座系統中通過可視化界面，實作0開發基礎快速搭建頁面。
但是這些界面，元件大多時候是依賴邏輯，有不同的展示的，而邏輯可視化的出現可以有效解決這一問題，通過可視化的邏輯配置，動态判斷某些樓層，子產品的展示邏輯，進而可以有效的搭建C端頁面。
我們的工作也可以從複雜的邏輯開發抽離出來，隻需要對元件庫進行完善及開發即可。
服務推薦
- 蜻蜓代理
- ip代理
- 代理ip
- ip代理伺服器
- 國内ip代理
- 代理服務ip
- 最新代理伺服器
- 代理ip網
- 中國代理伺服器
- 付費代理
- 企業級ip
- 企業級代理ip
- 中國代理ip
- 最新代理ip