中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

最近幾年，低代碼在產(chǎn)品開(kāi)發(fā)過(guò)程中應(yīng)用越來(lái)越廣泛；但還是有不少同學(xué)對(duì)此不了解。本文作者通過(guò)自身的經(jīng)歷，給大家分享了如何用低代碼完成設(shè)計(jì)，供大家參考。

啥是頁(yè)面設(shè)計(jì)器？

就像用 Axure 畫(huà)原型那樣簡(jiǎn)單拖動(dòng)幾個(gè)組件，然后再設(shè)置一下，就開(kāi)發(fā)好了一個(gè)系統(tǒng)頁(yè)面，可以查看數(shù)據(jù)、操作數(shù)據(jù)、可以使用的、真正的頁(yè)面。

是的，這就是低代碼平臺(tái)中的頁(yè)面設(shè)計(jì)器，這我就好奇了，這樣的頁(yè)面設(shè)計(jì)器是怎么設(shè)計(jì)出來(lái)的呢？設(shè)計(jì)的思路與原則是怎樣的呢？

設(shè)計(jì)可以開(kāi)發(fā)出頁(yè)面的設(shè)計(jì)器與一般系統(tǒng)的功能頁(yè)面可是不一樣的，后者相對(duì)而言是確定的，具體有哪些功能，有哪些交互，需要調(diào)用后端哪些接口，整體效果是可控的。而對(duì)于設(shè)計(jì)器頁(yè)面，設(shè)計(jì)出的最終頁(yè)面效果是用戶(hù)來(lái)確定的，怎么才能滿(mǎn)足用戶(hù)可以實(shí)現(xiàn)他的前端頁(yè)面交互、前后端數(shù)據(jù)交互呢？

一、臨危受命，準(zhǔn)備干活！

當(dāng)時(shí)，我們公司將產(chǎn)品定位于幫助業(yè)務(wù)人員和開(kāi)發(fā)人員高效快速地開(kāi)發(fā)出各種企業(yè)模板應(yīng)用和各種復(fù)雜業(yè)務(wù)應(yīng)用，解決各種定制化場(chǎng)景需求，這樣就必須要求設(shè)計(jì)器做到靈活性高、擴(kuò)展性高，同時(shí)易用性也得高。

道理我都懂，確實(shí)很牛 X，如果是讓別人去設(shè)計(jì)，我肯定會(huì)說(shuō)舞臺(tái)很大，好好表現(xiàn)。然而不幸的是，這個(gè)任務(wù)落到了我的身上，哈哈哈=-=

真的是讓人頭大，作為剛剛接觸到低代碼平臺(tái)的小白，不說(shuō)無(wú)從下手吧，也可以說(shuō)讓人摸不到頭腦！

冷靜了一陣子后，想了想，事情還是得做呀！

二、投石問(wèn)路，競(jìng)品分析！

作為一個(gè)產(chǎn)品人，遇上毫無(wú)頭緒的需求，第一反應(yīng)是干嘛？那必須得是競(jìng)品分析呀！

是的，我立馬找了市面上為數(shù)不多的低代碼平臺(tái)，準(zhǔn)備仔仔細(xì)細(xì)地琢磨琢磨，當(dāng)時(shí)的低代碼平臺(tái)都比較簡(jiǎn)單，上手都很快，差不多一天時(shí)間就研究得七七八八了并做了詳細(xì)的分析記錄。

可是做完競(jìng)品后，內(nèi)心有一點(diǎn)小小的失望，發(fā)現(xiàn)低代碼平臺(tái)產(chǎn)品與自己預(yù)想中的差異有點(diǎn)大，市面上的低代碼平臺(tái)主要以表單、表格驅(qū)動(dòng)為主，集成封裝程度較高，雖然可以滿(mǎn)足一般的數(shù)據(jù)增刪改查和簡(jiǎn)單的業(yè)務(wù)流程，但是很難滿(mǎn)足復(fù)雜業(yè)務(wù)應(yīng)用各種定制化的需求，更不用說(shuō)面向 C端用戶(hù)的應(yīng)用頁(yè)面。不過(guò)也是，畢竟當(dāng)時(shí)低代碼平臺(tái)的概念在國(guó)內(nèi)也才剛剛興起。

后來(lái)仔細(xì)一想，這反而是一件好事，說(shuō)明我們的想法別人還沒(méi)有嘗試過(guò)，這條路說(shuō)不定舞臺(tái)真的很大！

三、此路不通，另辟蹊徑！

競(jìng)品分析效果不是很好，我決定換一種方式了，設(shè)計(jì)器不就是要設(shè)計(jì)出各種復(fù)雜的應(yīng)用頁(yè)面嗎？我研究一下復(fù)雜的業(yè)務(wù)應(yīng)用中有哪些頁(yè)面，哪些功能不就 OK 了嗎。

想到就去做，我立馬找了市面上主流的一些 ERP、CRM 、OA 等企業(yè)內(nèi)部管理系統(tǒng)，主要研究系統(tǒng)中的核心功能頁(yè)面，看能不能從這種復(fù)雜的頁(yè)面中找到一些共性，包括頁(yè)面中的主要部件、頁(yè)面交互、接口調(diào)用等等。

你還別說(shuō)，你還真別說(shuō)，研究了一段時(shí)間后，還真的有所收獲，最后大言不慚地說(shuō)了一句：好像也不過(guò)如此，沒(méi)有那么復(fù)雜嘛=-=

下面詳細(xì)分享一下當(dāng)時(shí)的分析和設(shè)計(jì)思路，開(kāi)始我的表演。

因?yàn)闀r(shí)間有點(diǎn)久遠(yuǎn)了，中間也迭代了多次想法，這里就不用最原始分析的資料，我在阿里云和釘釘后臺(tái)分別找了兩張頁(yè)面截圖，借此說(shuō)明當(dāng)時(shí)的分析思路。

首先來(lái)看第一張阿里云控制臺(tái)中的云服務(wù)器概覽功能頁(yè)面。

這種頁(yè)面結(jié)構(gòu)在 B 端系統(tǒng)中是十分常見(jiàn)的，也極具有代表性。頁(yè)面是由不同的區(qū)塊組成的，我在圖片上用數(shù)字標(biāo)注了不同的區(qū)塊，每個(gè)區(qū)塊之間相對(duì)獨(dú)立，但彼此又有聯(lián)系，有的是交互上的聯(lián)系：

• 比如區(qū)塊 ② 是一個(gè)標(biāo)簽頁(yè)，切換不同的標(biāo)簽下面顯示不同內(nèi)容，區(qū)塊 ③ 是一個(gè)列表，點(diǎn)擊不同的列表項(xiàng)，右側(cè)顯示不同的內(nèi)容 ；
• 有的是數(shù)據(jù)傳遞上的聯(lián)系，比如區(qū)塊 ④ 是日期查詢(xún)， 執(zhí)行查詢(xún)后區(qū)塊 ⑤ 顯示滿(mǎn)足條件的統(tǒng)計(jì)數(shù)據(jù)；
• 當(dāng)然我們多研究一點(diǎn)頁(yè)面就會(huì)發(fā)現(xiàn)，交互聯(lián)系和數(shù)據(jù)傳遞聯(lián)系是可以同時(shí)存在的，而且在大多數(shù)場(chǎng)景中，這兩者是同時(shí)存在的；
• 區(qū)塊④ 上面的靜態(tài)文本雖然我沒(méi)有用數(shù)字標(biāo)準(zhǔn)，其實(shí)也可以作為一個(gè)區(qū)塊；
• 但是區(qū)塊 ① 有點(diǎn)特殊，它是系統(tǒng)功能導(dǎo)航，一般 B 端系統(tǒng)里都有功能導(dǎo)航框架，有左側(cè)的，有頂部，有 L 型的等等，所以嚴(yán)格意義上說(shuō)它并不屬于頁(yè)面的一部分，我們可以單獨(dú)提出一個(gè)概念來(lái)表達(dá)它，這里不詳細(xì)展開(kāi)，后續(xù)可以專(zhuān)門(mén)寫(xiě)一篇文章，這里面也大有門(mén)道哦。

經(jīng)過(guò)上面的一分析，我們?cè)倩剡^(guò)頭來(lái)看并總結(jié)一下：這個(gè)頁(yè)面就是由幾個(gè)區(qū)塊組成的，區(qū)塊之間可以點(diǎn)擊交互、可以數(shù)據(jù)傳遞。

一句話(huà)就概括了，沒(méi)有錯(cuò)，就是這么簡(jiǎn)單。

可能有人要說(shuō)了，這個(gè)區(qū)塊里面的功能你都沒(méi)有分析呢，你就說(shuō)簡(jiǎn)單？

好像說(shuō)的也啥毛病=-=，但我們從頁(yè)面頂層設(shè)計(jì)時(shí)，可以先忽略局部細(xì)節(jié)問(wèn)題，這就好像高中學(xué)物理受力分析時(shí)，先用整體分析法，忽略物體內(nèi)部作用力，得到整體受力結(jié)果后，再分析單個(gè)物體，這里面的設(shè)計(jì)思想應(yīng)該是相通的，所以后面再討論區(qū)塊里面的功能問(wèn)題。

好了，有了頁(yè)面的整體結(jié)構(gòu)后，再看第二張圖，是不是就容易理解多了，這里就不再做重復(fù)分析了。

四、大刀闊斧，準(zhǔn)備開(kāi)干！

由上面的分析得到了結(jié)論：這個(gè)頁(yè)面就是由幾個(gè)區(qū)塊組成的，區(qū)塊之間可以點(diǎn)擊交互、可以數(shù)據(jù)傳遞。到這里就必須正視區(qū)塊了，區(qū)塊到底是什么？我們應(yīng)該怎么定義它？我們先看區(qū)塊有哪些特點(diǎn)：

1. 會(huì)顯示在頁(yè)面上；
2. 會(huì)有特定的功能，比如多標(biāo)簽切換、表格展示數(shù)據(jù)、篩選數(shù)據(jù)等等，反正是為了解決特定場(chǎng)景功能；
3. 可以點(diǎn)擊；
4. 會(huì)輸出數(shù)據(jù)；
5. 可以接受數(shù)據(jù)。

當(dāng)然不是區(qū)塊必須同時(shí)這些功能，有些區(qū)塊可能只有其中一部分功能。

到這里，我覺(jué)得用“區(qū)塊”來(lái)表達(dá)已經(jīng)不是很貼切了，所以急需換一個(gè)更合理、更好理解、更通用的概念，“組件”應(yīng)運(yùn)而生?。。?/p>

為了更合理地表達(dá)，給組件加一個(gè)概念定義：

組件是將頁(yè)面中的可重用部分抽象為獨(dú)立的、功能完備且具有自我樣式和行為、支持輸入與輸出的單元。

1. 組件屬性配置

首先要明確一點(diǎn)，組件是為了解決特定場(chǎng)景需求的，所以在組件內(nèi)部會(huì)封裝一定的功能，比如表格組件會(huì)展示數(shù)據(jù)、支持分頁(yè)、添加按鈕等，篩選器組件支持設(shè)置篩選字段，篩選方式等等，同時(shí)為了給用戶(hù)絕對(duì)的靈活性，需要提供豐富的配置項(xiàng)。

組件本身功能可以通過(guò)內(nèi)部封裝加配置項(xiàng)的方式來(lái)解決，那怎么解決組件之間的交互聯(lián)動(dòng)和數(shù)據(jù)傳遞聯(lián)動(dòng)呢？這是一個(gè)問(wèn)題，這不禁讓我想起了在網(wǎng)絡(luò)被發(fā)明之前，計(jì)算機(jī)都只是獨(dú)立的個(gè)體，并不能直接完成資源共享，有了網(wǎng)絡(luò)之后才算真正地進(jìn)入計(jì)算機(jī)時(shí)代！

2. 前端組件聯(lián)動(dòng)

當(dāng)我在考慮組件之間的聯(lián)動(dòng)問(wèn)題時(shí)，不由得想到面向?qū)ο缶幊趟枷胫械摹邦?lèi)”，“類(lèi)”不僅相對(duì)獨(dú)立，“類(lèi)”與“類(lèi)”之間還可以相互調(diào)用、進(jìn)行數(shù)據(jù)傳遞。我們一起來(lái)看下“類(lèi)”有哪些特性：

• 成員變量，類(lèi)內(nèi)部定義的變量，可以定義私有、公有；
• 構(gòu)造函數(shù)，默認(rèn)無(wú)參 ，可以定義有參構(gòu)造函數(shù)，在創(chuàng)建類(lèi)實(shí)例對(duì)象時(shí)使用；
• 成員/靜態(tài)函數(shù)，類(lèi)實(shí)例或類(lèi)調(diào)用，復(fù)雜具體的邏輯，函數(shù)內(nèi)部可以使用類(lèi)成員變量、可以利用函數(shù)對(duì)外輸出類(lèi)的成員變量。

借鑒“類(lèi)”的特性，于是，我們可以對(duì)組件有以下的定義：

• 組件變量：組件內(nèi)部運(yùn)行時(shí)對(duì)處理數(shù)據(jù)的變量，類(lèi)比于“類(lèi)”的成員變量；
• 組件函數(shù)：運(yùn)行組件的入口，組件函數(shù)可以定為攜帶參數(shù)，也可以攜帶參數(shù)，類(lèi)比于“類(lèi)”的構(gòu)造函數(shù)；
• 組件事件：組件運(yùn)行時(shí)的點(diǎn)擊對(duì)外輸出的事件，可以通過(guò)組件事件對(duì)外輸出組件變量，類(lèi)比于“類(lèi)”的成員函數(shù)。

每個(gè)組件的開(kāi)發(fā)者，需要定義組件的組件變量、組件函數(shù)、組件事件，當(dāng)然這三者不是必須同時(shí)存在，某些特性在一些組件中可以沒(méi)有。

這樣就可以做到組件聯(lián)動(dòng)了嗎？怎么說(shuō)得云里霧里的。

是的，是可以的，舉一個(gè)跟上面阿里云控制頁(yè)面差不多的功能場(chǎng)景：輸入日期篩選后，下面的表格顯示滿(mǎn)足條件的數(shù)據(jù)

我們做一下需求分析，在頁(yè)面需要一個(gè)篩選器組件（用于篩選）和一個(gè)表格組件（用于展示數(shù)據(jù)），篩選器組件和表格組件定義的組件的屬性見(jiàn)下表：

我們用一句簡(jiǎn)單的語(yǔ)句就可以實(shí)現(xiàn)這個(gè)需求了：在篩選器組件的組件事件（執(zhí)行查詢(xún)后）添加語(yǔ)句：

表格組件.刷新表格（篩選器組件.篩選條件）

OK 了，簡(jiǎn)單吧！

這樣， 在實(shí)現(xiàn)組件自身的功能的同時(shí)定義好每個(gè)組件的組件變量、組件函數(shù)、組件事件，這樣可以達(dá)到組件之間可以任意組合，組件交互聯(lián)動(dòng)，數(shù)據(jù)聯(lián)動(dòng)也不在話(huà)下！

基于上面的機(jī)制，我們開(kāi)發(fā)一個(gè)稍微復(fù)雜一點(diǎn)的訂單管理功能，功能特性有：

• 支持按訂單的金額、下單時(shí)間、訂單編號(hào)等篩選訂單明細(xì)
• 統(tǒng)計(jì)每日訂單消費(fèi)金額、每月匯總訂單消費(fèi)金額
• 展示訂單明細(xì)，支持新增訂單、編輯訂單、查看訂單詳情、刪除訂單。
• 篩選、統(tǒng)計(jì)、訂單明細(xì)之間要相互聯(lián)動(dòng)，包括新增/編輯/刪除訂單也是刷新訂單明細(xì)和統(tǒng)計(jì)。

具體效果可以查看下圖

看著有點(diǎn)復(fù)雜功能，其實(shí)我們利用幾個(gè)組件和幾句語(yǔ)句就開(kāi)發(fā)好了，展示部分截圖

當(dāng)然上面使用的都是一些簡(jiǎn)單的語(yǔ)句，后來(lái)隨著功能的擴(kuò)展，類(lèi)比于一般的編程語(yǔ)言，我們逐步加入了條件判斷語(yǔ)句、循環(huán)判斷語(yǔ)句、聲明變量語(yǔ)句等等，可以看下圖簡(jiǎn)單了解一下，這里就不詳細(xì)展開(kāi)。

3. 前后端數(shù)據(jù)聯(lián)動(dòng)

有細(xì)心的小伙伴可能已經(jīng)發(fā)現(xiàn)了，你上面的一頓分析都是前端組件之前的聯(lián)動(dòng)，如果前端需要調(diào)用后端某個(gè)接口怎么處理呢，比如我在表格組件中添加了一個(gè)按鈕，這個(gè)按鈕需要執(zhí)行后端接口的邏輯，那又怎么實(shí)現(xiàn)呢？

這是一個(gè)好問(wèn)題，首先我們?cè)趯?shí)現(xiàn)某些組件時(shí)會(huì)封裝調(diào)用特定的后端接口，比如表格組件展示數(shù)據(jù)，我們會(huì)調(diào)用查詢(xún)數(shù)據(jù)接口，表單提交數(shù)據(jù)會(huì)調(diào)用新增數(shù)據(jù)接口，但是這解決不了前端調(diào)用用戶(hù)自己編寫(xiě)的接口。

這個(gè)過(guò)程中我們想了很多辦法，比如前端事件觸發(fā)后臺(tái)工作流？專(zhuān)門(mén)開(kāi)發(fā)一個(gè)前端組件調(diào)用后端接口？利用數(shù)據(jù)表事件、定時(shí)任務(wù)變相地解決這個(gè)問(wèn)題？等等方案，但不是很優(yōu)雅，不是很符合我們編程語(yǔ)言中的使用習(xí)慣

后來(lái)我們將用戶(hù)自己編寫(xiě)的后端接口放在服務(wù)下，就像傳統(tǒng)編程語(yǔ)言中編寫(xiě)某個(gè)類(lèi)下的函數(shù)一樣，前端組件調(diào)用后端接口就按照?qǐng)?zhí)行指定的格式調(diào)用就好。

比如 XX 服務(wù).XX 函數(shù)，可以看下圖中的語(yǔ)句

這個(gè)設(shè)計(jì)也是經(jīng)歷過(guò)很長(zhǎng)的積淀才形成的，完美而優(yōu)雅，這里就不再詳細(xì)分析了，后續(xù)專(zhuān)門(mén)出一篇文章介紹，這個(gè)過(guò)程也是美妙又有趣的！

在服務(wù)下編寫(xiě)后端接口：

五、略微小結(jié)

至此，我們很完美地完成這項(xiàng)任務(wù)，設(shè)計(jì)出了一個(gè)靈活性強(qiáng)、易用性高的前端頁(yè)面設(shè)計(jì)器，文章寫(xiě)出來(lái)看著輕松，可是其中的過(guò)程卻是異常艱辛，中間走了不少?gòu)澛?，試了不少錯(cuò)，幸運(yùn)的是，結(jié)果是好的。在這次設(shè)計(jì)過(guò)程中，我也總結(jié)了幾點(diǎn)設(shè)計(jì)經(jīng)驗(yàn)與大家分享：

• 分析問(wèn)題本身，探索問(wèn)題本質(zhì)，透過(guò)現(xiàn)象看本質(zhì)；
• 先頂層設(shè)計(jì)，再考慮細(xì)節(jié)；
• 經(jīng)典永不過(guò)時(shí)，多向經(jīng)典的編程思想借鑒學(xué)習(xí)，設(shè)計(jì)思想都是互通的；
• 不斷迭代、不斷否定，追尋問(wèn)題的最優(yōu)解。

以上就是我的分享，如果你對(duì)低代碼或者產(chǎn)品設(shè)計(jì)感興趣，可以在評(píng)論留言或者私我，我們下一期再見(jiàn)。