敏捷開發框架-EciTab選項卡控制項設計

来源:https://www.cnblogs.com/godmodel/archive/2020/07/02/13226838.html

在項目的實際開發過程中,我們經常會遇到Tab頁面的開發 EciTab控制項有多種使用方式: 下麵介紹Frame容器方式: 下麵介紹的Tab頁面採用的策略是 Tab頁面管理幾個子頁面,頁面組織上用Iframe管理的模式 採用Iframe的原因主要有兩個 1.開發簡單,每一個頁面都是簡單的畫面 2.性能考 ...


在項目的實際開發過程中,我們經常會遇到Tab頁面的開發

 

EciTab控制項有多種使用方式:

 

下麵介紹Frame容器方式:

 

下麵介紹的Tab頁面採用的策略是 Tab頁面管理幾個子頁面,頁面組織上用Iframe管理的模式

採用Iframe的原因主要有兩個

1.開發簡單,每一個頁面都是簡單的畫面

2.性能考慮,打開一個複雜的Tab頁面,不見得所有Tab都會點擊,這時候可以採用選項卡懶載入的方式

                     沒有點擊的選項卡可以DOM都不載入。

 

 下麵介紹,從列表頁面進入到EditTab頁面的過程,一起來分析Tab頁面需要寫的代碼

 

 

 

如上圖,列表頁,Tab 管理頁   (管理了兩個頁面  EnterpriseEdit 企業編輯頁,EnterpriseInvoice 企業開票抬頭信息列表頁)

從列表頁面,有兩種方式進入 Tab頁面

1.新增

2.點擊行內已有數據進入(也就是編輯)

我們一起來看下 Tab頁面的源代碼

Tab組件,設計了兩個選項卡  head  kpInfo

分別對應企業信息維護畫面、企業開票抬頭列表畫面

實際上 上面的URL和 lazyURL寫上去都是沒有意義的,因為實際情況遠沒有這麼簡單,需要應對變化的過程。

分析一下到底有哪些變化:

進入這個Tab頁面的兩種方式:

新增方式:表現來看,沒有傳入主鍵

編輯方式:表現來看  就是傳入了 列表頁面上選中行的主鍵值 id=xxxx

 

如果傳入主鍵:那需要將主鍵值傳遞到 兩個頁面

 

 

 上面的代碼是關於URL的設置,需要考慮的不同情況:

 如果沒有傳入主鍵值:第二個TabIItem設置lazyURL都是沒有意義的,headId是子表和主表之間的關聯鍵,id都不存在,所以就不可能去設置URL屬性

 實際上不僅僅關於地址的問題,如果是新增,那麼還要控制第二個Tab不能點擊,代碼如下

好,如上就是進入Tab頁面的相關初始化代碼。

 

那繼續分析,還有什麼變化:

當前Tab是新增的時候,我們在編輯頁面,錄入了相關值,點擊了保存,這時候就等於產生了主鍵。

這是頁面狀態其實發生了變化,這個時候其實編輯狀態了。

既然是編輯狀態,那麼第二個Tab這個時候需要能點擊,同時需要設置成正確的地址

相關的代碼如下(紅色框線部分):

 

    這是變化之一:那麼我們繼續點擊新增呢。這個時候頁面當前狀態又轉變成新增狀態了。

   新增狀態的特點是,第二個Tab是不能點擊的,頁面地址(暫且不考慮,只要控制好不能點擊即可)

   實現代碼如下:

 

 

如上差不多就是一個Tab頁面標準的處理過程,解決了各種變化的問題。

如果接著後面又加一個Tab,企業信息的操作歷史,那麼我們相關的代碼都要參考第二個Tab的方式寫一下。

 

代碼不是特別複雜,但是必須是面面俱到,缺一不可以。

 

雖然上述代碼我認為已經不複雜。但是我們任然要追求極致,要偷懶,能否近一步簡化代碼開發

上述的過程是否標準過程?

能不能將上述的標準過程封裝成固定的開發範式?

能否簡化?

能不能先不重要。

想不想才是最重要。

你想要怎麼簡化?

既然你都這麼說了,不要怪我要求高。

有什麼要求,儘管提,能否實現那是後話,甭客氣。

對上述變化能否一行代碼都不寫,全部搞定。

你的想法真徹底,一步提到底,不拖拖拉拉, 給你一個100個贊!!!

 

好吧,能不能實現先不管,先享受一下暢享的感覺,這也搞定了、那也搞定了,那該多麼輕鬆啊

 

夢想還是要有的。最壞的情況,當我白說,最好的情況嘛,那就是好極了,不要打擾我,先做夢去!

 

美夢成真,如下圖:紅色框線EAD敏捷開發框架幫你實現你許下的心愿,代碼清零,一行代碼也不寫了。

 

真的嗎?的確沒有代碼了,但是嚴重懷疑前面介紹的各種變化情況,刪代碼容易,但是功能都還在嗎?

到底是怎麼實現的。

框架設計了規則解析機制

{}裡面的內容都是動態內容

{all}表示URL請求的所有參數

{keyValue}是主鍵

{req.xxxx}表示從URL獲取參數xxxx 例如 {req.id }

同時EciTab控制項設置了 keyField屬性,本例中為 ID

 

EciTab控制項在初始化的過程中通過規則解析引擎,動態分析出實際的地址信息。

同時動態的分析出哪些TabItem是依賴於{keyValue}的,也就是主鍵

所有依賴於主鍵的,同時當前頁面 keyValue又是為空的時候,那麼Tab自動設置成不可以點擊模式。

keyValue的變遷過程,可以是從列表頁點擊【編輯】過來的(從URL中獲取,keyField屬性發揮重要作用)。

也可以是一開始,是新增模式(為空)然後編輯頁面【保存】變成有值了的( 這一步是編輯頁面要告訴Tab頁的,編輯頁面的職責

當然了編輯頁面有編輯頁面模型,通過模型設計,讓開發人員在編輯頁面也不需要寫一行代碼

)。

只要相關依賴參數變化了,就會觸發Tab控制項自我管理Tab的表現(目前主要是url和是否可以點擊)

在控制URL的過程中,框架將研發人員一開始寫的URL、LazyURL 作為設計時模板進行緩存

命名為 designURL,目的是在變化發生時,還能找到一開始的原始字元串,否則無法實現動態解析!

 

最後我們的代碼,開發人員只要寫如下,非常簡潔明瞭,剩下的全部交給EAD敏捷開發框架來自動化實現

 

 

再次見面:

這優化,還滿意嗎?

但是我還想提個需求。

還要提需求?我無能為力了,我沒有代碼了,還怎麼改進啊,是吧。

不是,上面的封裝非常棒,全部框架接管,我不用寫任何代碼。封裝的徹底。

就是因為太徹底了,可能會有點擔心,萬一齣現某個極端情況,研發人員需要自己控制tab

之前好歹還有個 var  tab = new EciTab({id:"eciTab"})

我還有個 tab變數,我還能操控。

萬一,怎麼辦?

 

你的擔心我已經收到,已經為大家提供瞭解決方案:

image.png

EciTab控制項,預設有框架全自動初始化。99%的情況下不需要你過多操心。

萬一遇到極端情況,只要設置 init="false"

然後你自己寫代碼:var  tab = new EciTab({id:"eciTab"})

這時候,你就有了對tab的全部掌控許可權了。

通過:自己顯示的寫 new EciTab({id:"eciTab"})這一行代碼,之前說的所有應對變化的功能也全部包含在內。

這下高枕無憂了吧!

 

得寸進尺的人,我又來了。不會煩我吧。

哪裡,我就喜歡你這“得寸進尺”的人,我這裡叫有追求。

好吧

var  tab = new EciTab({id:"eciTab"}) 還要加 init=“false”

好像有20多個字元,不光是20字元的問題,代碼寫在兩個地方。

我嫌煩。

追求的道路上一定不能滿足現狀。

你的煩惱,我來幫你解憂。

eci開發庫是EAD開發框架的功能函數聚集地。

記住有問題 eci來幫忙。

var tab=eci.getTab(id)  給我哪個tab,初始化工作還是交給框架,想要獲取控制項的時候向eci要即可。

 


您的分享是我們最大的動力!

更多相關文章
  • 上次講了微服務的前世今生(五):CAP 原則與 BASE 理論,這次我們再說微服務架構的前世今生(六):微服務架構帶來的問題。 一、客戶端如何訪問服務? 傳統的開發方式,所有的服務都是本地的,客戶端可以直接調用,現在按功能拆分成獨立的服務,客戶端如何訪問? 後臺有 N 個服務,前臺就需要管理 N 個 ...
  • 我認為,代碼優化的最重要的作用應該是:避免未知的錯誤。在代碼上線運行的過程中,往往會出現很多我們意想不到的錯誤,因為線上環境和開發環境是非常不同的,錯誤定位到最後往往是一個非常小的原因。 ...
  • 【SpringCloud】Gateway 配置全局過濾器獲取請求參數和響應值 實現Ordered介面getOrder()方法,數值越小越靠前執行,記得這一點就OK了。 獲取請求參數RequestBody @Component @Slf4j @AllArgsConstructor public cla ...
  • x 深夜,在東莞,7天酒店,打開電腦,訪問國內最大的同性交友網站。 日常開發中,導出導入場景非常多,尤其是對於後臺管理更是一個列表一個導出,如果從導出的業務中抽離出復用代碼,專註於邏輯開發,對於開發者而言非常重要。前有使用POI,但作者還是更喜EasyExcel的簡潔高效不拖沓,所以特意寫篇文章記錄 ...
  • 前言 ​ 關於 Python 這個欄目,咕了幾個月了,今天講講如何發送驗證碼並驗證。 ​ 因為部分原因,寫這篇文章的時候心情是不太好的,播放首歌吧。 代碼 導入 導入yagmail,random和time庫 import yagmail,random,time #導入 yagmail , rando ...
  • 一.官方文檔 https://pypi.org/project/muggle-ocr/ 二模塊安裝 pip install muggle-ocr # 因模塊過新,阿裡/清華等第三方源可能尚未更新鏡像,因此手動指定使用境外源,為了提高依賴的安裝速度,可預先自行安裝依賴:tensorflow/numpy ...
  • 案例故事: 即時通訊(IM)軟體有很多,比如企業微信,釘釘,飛書,Skype, 微軟的Lync等, 這些軟體現在都很牛,還能監控誰誰在不在電腦旁工作,誰誰誰提前下班溜了。。。 一次偶然的機會,有個妹子請教我,她每天都想準時18點下班, 她問我如何做到: 假裝企業微信線上,併在2個小時後(20點)準時 ...
  • 引用的DLL MySql.Data.MySqlClient System.Data City實體 public class City { public int ID { get; set; } public string Name { get; set; } public string Countr ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...