這裡舉乙個 vue + elementui 專案中用到的例子，其他框架的專案原理也類似，和大家分享一下。
element 的**控制項的 column 接受乙個 formatter 引數，用來格式化內容，其型別為函式，並且還可以接受幾個特定引數，像這樣：function(row,column,cellvalue,index)。
以檔案大小轉化為例，後端經常會直接傳 bit 單位的檔案大小，那麼前端需要根據後端的資料，根據需求轉化為自己需要的單位的檔案大小，比如 kb/mb。
首先實現檔案計算的演算法：
export
const strategymap =
, bittomb: val =>};
const
strategcontext
=function
(type, rowkey);}
;export
default strategcontext;
"tabledata"
>
"date" lable=
"日期"
>
<
/el-table-column>
"name" lable=
"檔名"
>
<
/el-table-column>
prop=
"sizekb"
lable=
"檔案大小（kb）"
:formatter=
"strategycontext("sizetokb","sizekb")"
>
<
/el-table-column>
prop=
"sizemb"
lable=
"檔案大小（mb）"
:formatter=
"strategycontext("sizetomb","sizemb")"
>
<
/el-table-column>
"date" lable=
"日期"
>
<
/el-table-column>
<
/el-table>
<
/template>
import strategycontext from
"../common/strategy"
;export
default,]
};}}
;<
/script>
elementui 的 form 表單 具有表單驗證功能，用來校驗使用者輸入的表單內容。實際需求中表單驗證項一般會比較複雜，所以需要給每個表單項增加 validator 自定義校驗方法。
我們可以像官網示例一樣把表單驗證都寫在元件的狀態 data 函式中，但是這樣就不好復用使用頻率比較高的表單驗證方法了，這時我們可以結合策略模式和函式柯里化的知識來重構一下。首先我們在專案的工具模組（一般是 utils 資料夾）實現通用的表單驗證方法：
/* 姓名校驗 由2-10位漢字組成 */
export
function
validateusername
(str)$/;
return reg.
test
(str);}
/* 手機號校驗 由以1開頭的11位數字組成 */
export
function
validatemobile
(str)$/;
return reg.
test
(str);}
/* 郵箱校驗 */
export
function
validateemail
(str)
import
*as validates from
"./validates.js"
;/* 生成**自定義校驗函式 */
export
const
formvalidategene
=(key, msg)
=>
(rule, value, cb)
=>
else
};
"ruleform"
:rules=
"rules"
:model=
"ruleform"
>
"使用者名稱" prop=
"username"
>
"ruleform.username"
>
<
/el-input>
<
/el-form-item>
"手機號" prop=
"mobile"
>
"ruleform.mobile"
>
<
/el-input>
<
/el-form-item>
"郵箱" prop=
"email"
>
"ruleform.email"
>
<
/el-input>
<
/el-form-item>
<
/el-form>
<
/template>
import
*as utils from
"../utils"
;export
default
, rules:],
mobile:
, email:
}};}
};<
/script>
策略模式實戰
在專案中可能遇到這樣的情況，我們要收集專案中的所有資訊，而每種資訊的收集方法是不一樣的，我就遇到了這樣的情況。起初我用的是直接收集合併，在二個時就已經很費力了，這次是把所有的資訊 有11處之多 收集起來。我想到了策略模式的意圖，把策略選擇邏輯和策略執行邏輯分開。所以我就把4種選擇方法分別做成了四種策...
策略模式實戰
把各種策略解耦 返獎策略介面 public inte ce rewardstrategy 新使用者返獎策略 public class newuserrewardstrategy implements rewardstrategy 老使用者返獎策略 public class olduserreward...
常用設計模式 策略模式實戰
什麼是策略模式？常用設計模式 策略模式 場景 假設有乙個支付的業務場景，不同 的訂單要做不同的處理 下面是普通的寫法 override public string order order order else if order.getsource equals ordersourceenum.wec...