策略模式如何實現(xiàn)Vue動態(tài)表單驗證

這篇文章將為大家詳細講解有關策略模式如何實現(xiàn)Vue動態(tài)表單驗證，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網技術服務公司，擁有項目成都網站設計、網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元敘永做網站,已為上家服務,為敘永各地企業(yè)和個人服務,聯(lián)系電話:18980820575

策略模式（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨立的，策略模式根據輸入來調整采用哪個算法。關鍵是策略的 實現(xiàn)和使用分離。

注意：本文可能用到一些編碼技巧比如 IIFE（Immediately Invoked Function Expression, 立即調用函數(shù)表達式），ES6 的語法 let/const、箭頭函數(shù)、rest 參數(shù)，短路運算符 等，如果還沒接觸過可以點擊鏈接稍加學習 ~

1. 你曾見過的策略模式

現(xiàn)在電子產品種類繁多，尺寸多種多樣，有時候你會忍不住想拆開看看里面啥樣（想想小時候拆的玩具車還有遙控器），但是螺絲規(guī)格很多，螺絲刀尺寸也不少，如果每碰到一種規(guī)格就買一個螺絲刀，家里就得堆滿螺絲刀了。所以現(xiàn)在人們都用多功能的螺絲刀套裝，螺絲刀把只需要一個，碰到不同規(guī)格的螺絲只要換螺絲刀頭就行了，很方便，體積也變小很多。

再舉個栗子，一輛車的輪胎有很多規(guī)格，在泥濘路段開的多的時候可以用泥地胎，在雪地開得多可以用雪地胎，高速公路上開的多的時候使用高性能輪胎，針對不同使用場景更換不同的輪胎即可，不需更換整個車。

這些都是策略模式的實例，螺絲刀/車屬于封裝上下文，封裝和使用不同的螺絲刀頭/輪胎，螺絲刀頭/輪胎這里就相當于策略，可以根據需求不同來更換不同的使用策略。

在這些場景中，有以下特點：

螺絲刀頭/輪胎（策略）之間相互獨立，但又可以相互替換；

螺絲刀/車（封裝上下文）可以根據需要的不同選用不同的策略；

2. 實例的代碼實現(xiàn)

具體的例子我們用編程上的例子來演示，比較好量化。

場景是這樣的，某個電商網站希望舉辦一個活動，通過打折促銷來銷售庫存物品，有的商品滿 100 減 30，有的商品滿 200 減 80，有的商品直接8折出售（想起被雙十一支配的恐懼），這樣的邏輯交給我們，我們要怎樣去實現(xiàn)呢。

通過判斷輸入的折扣類型來計算計算商品總價的方式，幾個 if-else 就滿足了需求，但是這樣的做法的缺點也很明顯：

priceCalculate 函數(shù)隨著折扣類型的增多，  if-else 判斷語句會變得越來越臃腫；

如果增加了新的折扣類型或者折扣類型的算法有所改變，那么需要更改  priceCalculate 函數(shù)的實現(xiàn)，這是違反開放-封閉原則的；

可復用性差，如果在其他的地方也有類似這樣的算法，但規(guī)則不一樣，上述代碼不能復用；

我們可以改造一下，將計算折扣的 算法部分提取出來保存為一個對象，折扣的 類型作為 key，這樣索引的時候 通過對象的鍵值索引調用具體的算法：

這樣 算法的實現(xiàn)和算法的使用就被分開了，想添加新的算法也變得十分簡單：

如果你希望計算算法隱藏起來，那么可以借助 IIFE 使用閉包的方式，這時需要添加增加策略的入口，以方便擴展：

這樣算法就被隱藏起來，并且預留了增加策略的入口，便于擴展。

3. 策略模式的通用實現(xiàn)

根據上面的例子提煉一下策略模式，折扣計算方式可以被認為是策略（Strategy），這些策略之間可以相互替代，而具體折扣的計算過程可以被認為是封裝上下文（Context），封裝上下文可以根據需要選擇不同的策略。

主要有下面幾個概念：

Context：封裝上下文，根據需要調用需要的策略，屏蔽外界對策略的直接調用，只對外提供一個接口，根據需要調用對應的策略；

Strategy：策略，含有具體的算法，其方法的外觀相同，因此可以互相代替；

StrategyMap：所有策略的合集，供封裝上下文調用；

結構圖如下：

下面使用通用化的方法實現(xiàn)一下。

通用實現(xiàn)看起來似乎比較簡單，這里分享一下項目實戰(zhàn)。

4. 實戰(zhàn)中的策略模式

 4.1 表格 formatter

這里舉一個 Vue + ElementUI 項目中用到的例子，其他框架的項目原理也類似，和大家分享一下。

Element 的表格控件的 Column 接受一個 formatter 參數(shù)，用來格式化內容，其類型為函數(shù)，并且還可以接受幾個特定參數(shù)，像這樣： Function(row,column,cellValue,index) 。

以文件大小轉化為例，后端經常會直接傳 bit 單位的文件大小，那么前端需要根據后端的數(shù)據，根據需求轉化為自己需要的單位的文件大小，比如 KB/MB。

首先實現(xiàn)文件計算的算法：

那么在組件中我們可以直接：

代碼實例可以參看 codepen - 策略模式實戰(zhàn)

運行結果如下圖：

4.2 表單驗證

除了表格中的 formatter 之外，策略模式也經常用在表單驗證的場景，這里舉一個 Vue + ElementUI 項目的例子，其他框架同理。

ElementUI 的 Form 表單 具有表單驗證功能，用來校驗用戶輸入的表單內容。實際需求中表單驗證項一般會比較復雜，所以需要給每個表單項增加 validator 自定義校驗方法。

我們可以像官網示例一樣把表單驗證都寫在組件的狀態(tài) data 函數(shù)中，但是這樣就不好復用使用頻率比較高的表單驗證方法了，這時我們可以結合策略模式和函數(shù)柯里化的知識來重構一下。首先我們在項目的工具模塊（一般是 utils 文件夾）實現(xiàn)通用的表單驗證方法：

然后在 utils/index.js 中增加一個柯里化方法，用來生成表單驗證函數(shù)：

上面的 formValidateGene 函數(shù)接受兩個參數(shù)，第一個是驗證規(guī)則，也就是 src/utils/validates.js 文件中提取出來的通用驗證規(guī)則的方法名，第二個參數(shù)是報錯的話表單驗證的提示信息。

可以看見在使用的時候非常方便，把表單驗證方法提取出來作為策略，使用柯里化方法動態(tài)選擇表單驗證方法，從而對策略靈活運用，大大加快開發(fā)效率。

代碼實例可以參看 codesandbox - 策略模式表單驗證實戰(zhàn)

運行結果：

5. 策略模式的優(yōu)缺點

策略模式將算法的 實現(xiàn)和使用拆分，這個特點帶來了很多優(yōu)點：

策略之間相互獨立，但 策略可以自由切換，這個策略模式的特點給策略模式帶來很多靈活性，也提高了策略的復用率；

如果不采用策略模式，那么在選策略時一般會采用多重的條件判斷，采用策略模式可以 避免多重條件判斷，增加可維護性；

可擴展性好，策略可以很方便的進行擴展；

策略模式的缺點：

策略相互獨立，因此一些復雜的算法邏輯 無法共享，造成一些資源浪費；

如果用戶想采用什么策略，必須了解策略的實現(xiàn)，因此 所有策略都需向外暴露，這是違背迪米特法則/最少知識原則的，也增加了用戶對策略對象的使用成本。

6. 策略模式的適用場景

那么應該在什么場景下使用策略模式呢：

多個算法 只在行為上稍有不同的場景，這時可以使用策略模式來動態(tài)選擇算法；

算法 需要自由切換的場景；

有時 需要多重條件判斷，那么可以使用策略模式來規(guī)避多重條件判斷的情況；

7. 其他相關模式

7.1 策略模式和模板方法模式

策略模式和模板方法模式的作用比較類似，但是結構和實現(xiàn)方式有點不一樣。

策略模式讓我們在程序運行的時候動態(tài)地指定要使用的算法；

模板方法模式是在子類定義的時候就已經確定了使用的算法；

7.2 策略模式和享元模式

關于“策略模式如何實現(xiàn)Vue動態(tài)表單驗證”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

新聞標題：策略模式如何實現(xiàn)Vue動態(tài)表單驗證
本文URL：http://bm7419.com/article42/jdieec.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供做網站、全網營銷推廣、網站制作、自適應網站、企業(yè)網站制作、建站公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)