優(yōu)維低代碼實(shí)踐：函數(shù)
優(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í)踐連載第16期
《函數(shù)》
▽
一、概述
在我們編排中，可能會(huì)遇到較為復(fù)雜的數(shù)據(jù)處理，這些復(fù)雜的數(shù)據(jù)處理我們可以封裝成函數(shù)的調(diào)用，我們 visual-builder 的平臺(tái)直接支持了編寫(xiě)和使用函數(shù)的能力，并且支持 JavaScript 或 TypeScript 編寫(xiě)，對(duì)頁(yè)面數(shù)據(jù)無(wú)感知（不可以直接引用 CTX 等頁(yè)面運(yùn)行時(shí)數(shù)據(jù)，但可以使用參數(shù)傳遞過(guò)來(lái)），可以在 Evaluate Placeholder 求值占位符(表達(dá)式)中通過(guò) FN.yourFunction(params) 來(lái)調(diào)用它。
例如，編寫(xiě)以下函數(shù)：
function sayHello(params) { return `Hello, ${params.name}`;}
在編排時(shí)可以這樣使用：
anyProp: '<% FN.sayHello({ name: "world" }) %>'
函數(shù)中還可以使用在表達(dá)式中的、與運(yùn)行時(shí)狀態(tài)無(wú)關(guān)的幾個(gè)框架內(nèi)置對(duì)象：
- _(Lodash)
- moment
- FN
- PIPES
- TAG_URL
- SAFE_TAG_URL
- I18N
- I18N_TEXT
- IMG
例如，可以在函數(shù)中使用同一個(gè)微應(yīng)用的其它函數(shù)
function sayHello(params) { return FN.sayExclamation(`Hello, ${params.name}`);}
同時(shí)要注意的是：
編寫(xiě) Storyboard Functions 時(shí)可以使用絕大多數(shù)的 JavaScript/TypeScript 語(yǔ)法，但由于它的定位僅為純數(shù)據(jù)加工，以及出于對(duì)函數(shù)代碼的健壯性和可維護(hù)性等因素的考慮，限制了部分語(yǔ)法和能力。
不推薦或不支持的語(yǔ)法清單：
- Async/Await: async function() { await … }
- Generator: function* a() { yield … }
- Class: class A { … }
- ThisExpression: this.anyProp
- VarDeclaration of var: var a
- LabeledStatement: anyLabel: …
- WithStatement: with (…) { … }
- DebuggerStatement: debugger
二、使用
在我們 visual-builder 中通過(guò)側(cè)邊欄中函數(shù)入口，可以管理我們每個(gè)項(xiàng)目的函數(shù)。我們以 FIRST-APP-LESSON-4 項(xiàng)目的函數(shù)來(lái)講解。
每個(gè)函數(shù)我們都推薦書(shū)寫(xiě)測(cè)試用例去保證它的可用性和可維護(hù)性。
當(dāng)我們完成函數(shù)的書(shū)寫(xiě)，別忘了 build & push 后，我們就能夠在我們的編排中使用我們定義的函數(shù)了，使用時(shí)需要帶上 FN的前綴。
并且我們?cè)诤瘮?shù)使用的地方可以快速編輯，直接點(diǎn)擊函數(shù)名就可以彈出函數(shù)的編輯窗，根據(jù)實(shí)際情況調(diào)整代碼，函數(shù)的支持使得我們處理復(fù)雜的問(wèn)題更游刃有余。
