設計模式之策略模式，學習筆記

好比在多個條件判斷中，也許條件會被更改這樣的話，咱們又得從新寫過，策略模式就是解決這個問題。

var get = {
　　A:function(){
　　　　console.log('a');
　　},
　　B:function(){
　　　　console.log('b');
　　}
};

var getAB = function(why){
　　return get[why]();
};

getAB('B');

 

表單驗證：

 

用戶名：<input type="text" name="userName" id="user">

// 規則列表
var obj = {
　　isempty:function(val,errmsg){
　　　　if(val===''){return errmsg;};
　　},
　　minLen:function(val,len,errmsg){
　　　　if(val.length<len){return errmsg;};
　　}
};

// 定義如何添加規律
var v = function(){

　　//保存錯誤信息列表
　　this.count = [];
};

v.prototype.add = function(val,rule,errmsg){
　　var arr = rule.split(':');
　　if(arr.length==1){
　　　　this.count.push(obj[rule](val,errmsg));
　　}else{
　　　　this.count.push(obj[arr[0]](val,arr[1],errmsg));
　　}
};
//返回驗證結果列表
v.prototype.stat = function(){
　　return this.count.join(',');
};

 

--------------------------------------

//使用實例

// 添加你須要的規律
var c = function(dom){
　　var s = new v();
　　s.add(dom.value,'isempty','用戶名不能爲空！');
　　s.add(dom.value,'minLen:3','用戶名長度不能小於3');
　　return s.stat();
};

var user = document.getElementById('user');
user.onblur = function(){
　　var msg = c(user);
　　console.log(msg);
};

 

先學會怎麼去用，再來編寫核心代碼。

 

升級版，給一個元素添加多個規則

var obj = {
　　isempty:function(val,errmsg){
　　　　if(val===''){return errmsg;};
　　},
　　minLen:function(val,len,errmsg){
　　　　if(val.length<len){return errmsg;};
　　}
};

var v = function(){
　　this.count = [];
};

v.prototype.add = function(val,arr){
　　for(var i=0;i<arr.length;i+=1){
　　　　var rule = arr[i]['rule'].split(':');
　　　　var r = null;
　　　　if(rule.length===1){
　　　　　　r = obj[rule[0]](val,arr[i]['errmsg']);
　　　　}else{
　　　　　　r = obj[rule[0]](val,rule[1],arr[i]['errmsg']);
　　　　}
　　　　r&&this.count.push(r);
　　}
};

v.prototype.stat = function(){
　　return this.count.join(',');
};

var c = function(dom){
　　var s = new v();
　　s.add(dom.value,[{rule:'isempty',errmsg:'用戶名不能爲空！'},{rule:'minLen:5',errmsg:'用戶名長度不能小於5'}]);
　　return s.stat();
};

var user = document.getElementById('user');
user.onblur = function(){
　　var msg = c(user);
　　if(msg){
　　　　console.log(msg);
　　　　return false;
　　}
　　console.log('所有驗證成功');
};

若是後期須要增長規律咱們只須要這樣

var obj = {
　　isempty:function(val,errmsg){
　　　　if(val===''){return errmsg;};
　　},
　　minLen:function(val,len,errmsg){
　　　　if(val.length<len){return errmsg;};
　　},
　　maxLen:function(val,len,errmsg){
　　　　if(val.length>len){return errmsg;};
　　}
};

var c = function(dom){
　　var s = new v();
　　s.add(dom.value,[{rule:'isempty',errmsg:'用戶名不能爲空！'},{rule:'minLen:5',errmsg:'用戶名長度不能小於5個'},{rule:'maxLen:10',errmsg:'用戶名長度不能超過10個'}]);
　　return s.stat();
};

　　其餘不變，這樣話維護起來仍是很方便的，雖然代碼是多了點。

　　小小的總結一下策略模式，固然是我我的的理解，不必定正確，本來咱們把判斷都寫在一塊兒，若是後期須要添加規則的話又獲得裏面去更改邏輯，而策略模式推薦你把這裏規則單獨提取出來，放到一個對象裏面，你須要用到哪些規則你就添加哪些規則，這樣的話，代碼複用性也強，我以爲面向對象絕大部分都是在講代碼複用性。