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