設計模式在vue中的應用(二)

2021-09-11 09:19:45 字數 1583 閱讀 3832

目錄整理:

設計模式在vue中的應用(一)

設計模式在vue中的應用(二)

設計模式在vue中的應用(三)

設計模式在vue中的應用(四)

設計模式在vue中的應用(五)

設計模式在vue中的應用(六)

這篇內容比較簡單只涉及到乙個設計模式——狀態模式。

來自iview文件截圖

在服務端輸出頁面的開發模式下每完成一步常規做法是跳轉乙個新頁面到下一步,當然在spa的開發模式下大多場景也是通過路由處理每一步的邏輯。

現在的需求是:這整個過程是連續的,除非整個過程處理完成,否則不管進行到哪一步當重新整理頁面都要從第一步重新開始,也就是在同乙個路由下處理這四步操作

先看狀態模式的介紹

一下內容來自網路

1,首先需要乙個context環境角色

// context.vue

"status">

"已完成" content="這裡是第一步">

"進行中" content="這裡是第二步">

"待進行" content="這裡是第三步">

"待進行" content="這裡是第四步">

"statuscom" @onchangestatus="changestatus" />

複製**

2,實現state抽象狀態角色
// step1.vue

"handleclick">完成

複製**

step2.vue

step3.vue

step4.vue

同step1.vue

複製**

3,總結通過上面的實現,我們發現整個狀態的改變都交給了各狀態元件,如果這時我操作到了第3步想回退到第2步怎麼辦?

給每個狀態元件加乙個回退到上乙個狀態的功能?

在我們這個需求中狀態從1->2->3->4是單向的,這個方式或許能行,假設在乙個比較複雜的狀態場景下,各狀態的改變毫無章法很難確定當前狀態的上乙個狀態是什麼

解決辦法:為每一次狀態改變做一次快取

// 優化後的context.vue

"status">

"已完成" content="這裡是第一步">

"進行中" content="這裡是第二步">

"待進行" content="這裡是第三步">

"待進行" content="這裡是第四步">

"cangoback" @click="goback">返回上一步

"statuscom" @onchangestatus="changestatus" />

複製**

通過工作中的乙個功能設計為大家介紹了狀態模式。或許有的同學會說我通過ifelse不也能做嗎,當然隨著需求不斷的變更你的ifelse最終只有你自己看的懂,慢慢的bug出現的機率也越高,狀態模式正是用來解決這種問題的

設計模式在C中的應用方式

在c語言中就不考慮封裝了,考慮封裝會導致 易讀性下降 1 與c 相同,抽象出公共介面,該步很關鍵 2 定義乙個結構體,其成員為這些公共介面的函式指標。3 具體的類如page,line等,第乙個元素的型別必須是上述介面結構體 的指標 其它的做為結構體的私有資料放在後邊。4 該方法的缺點是 每個物件 都...

設計模式 工廠在收費系統中的應用

抽象工廠 abstract factory 提供乙個建立一系列相關或相互依賴物件的結構,而無需指定他們具體的類。抽象工廠uml圖 abstractproducta和abstractproductb是兩個抽象產品,它們可能是兩種不同的實現。在機房收費系統中可以理解為對兩個表的不同操作。而product...

設計模式 在軟體開發中的應用

論設計模式在軟體開發中的應用 在解決這個論題之前,我們首先要了解設計模式的概念,及其基本的分類。設計模式 這四個字,相信大家在很多地方都會看到,什麼是設計模式呢?乙個設計模式提供一種提煉子系統或軟體系統中的元件的,或者它們之間的關係的綱要設計。設計模式描述普遍存在的在相互通訊的元件中重複出現的結構,...