策略模式

策略模式指的是定義一些列的演算法，把他們一個個封裝起來，目的就是將演算法的使用與演算法的實現分離開來。說白了就是以前要很多判斷的寫法，現在把判斷裡面的內容抽離開來，變成一個個小的個體。

表單校驗為例：

<form action="http:// xxx.com/register" id="registerForm" method="post">
    請輸入使用者名稱：<input type="text" name="userName" />
    請輸入密碼：<input type="text" name="password"/>
    請輸入手機號：<input type="text" name="phoneNumber" />
    <button>提交</button>
</form>
 

常見的程式碼編寫方式：

var registerForm = document.getElementById('registerForm');
	
registerForm.onsubmit = function(){
    if (registerForm.userName.value == '') {
        alert('使用者名稱不能為空');
        return false;
    }
		
    if (registerForm.password.value.length < 6) {
        alert('密碼長度不能少於6位');
        return false;
    }
		
    if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
        alert('手機號格式不正確');
        return false;
    }
}
 

策略模式：

這個模式涉及到三個角色：

• 具體策略(ConcreteStrategy)角色：包裝了相關的演算法或行為。
• 抽象策略(Strategy)角色：這是一個抽象角色，通常由一個介面或抽象類實現。此角色給出所有的具體策略類所需的介面。
  
• 環境(Context)角色：持有一個Strategy的引用。
  

第一步封裝策略物件（演算法）：

var strategies = {
    isNonEmpty:function(value,errorMsg){		//不為空
        if (value === '') {
	    return errorMsg;
	}
    },
    minLength:function(value,length,errorMsg){		//限制最小長度
        if (value.length < length) {
            return errorMsg;
        }
    },
    isMobile:function(value,errorMsg){			//手機號格式
        if (!/(^1[3|5|8][0-9]{9}$).test(value)) {
            return errorMsg;
        }
    }
}
 

第二步封裝抽象類（介面）：

var Validator = function(){
    this.cache = [];			//儲存校驗規則
}
	
Validator.prototype.add = function(dom,rule,errorMsg){
    var ary = rule.split(':');		//把strategy和引數分開
    this.cache.push(function(){		//把校驗的步驟都用空函式包裝起來，並且放入cache
        var strategy = ary.shift();	//使用者挑選的strategy
        ary.unshift(dom.value);		//把input的value新增進引數列表
        ary.push(errorMsg);		//把errorMsg新增進引數列表
        return strategies[strategy].apply(dom,ary);
    })		
}
	
Validator.prototype.start = function(){
    for (var i = 0,validatorFunc;validatorFunc = this.cache[i++];) {
	var msg = validatorFunc(); 	//開始校驗，並取得校驗後的返回資訊
	if(msg){			//如果有確切的返回值，說明校驗沒有通過
	    return msg;
	}
    }
}

第三步策略的實現（引用）：

var validataFunc = function(){
        var validator = new Validator();	//建立一個validator類
	/*******************新增一些校驗規則*********************/
	validator.add(registerForm.userName,'isNonEmpty','使用者名稱不能為空');
	validator.add(registerForm.password,'minLength:6','密碼長度不能少於6位');
	validator.add(registerForm.phoneNumber,'isMobile','手機號碼格式不正確');
	
	var errorMsg = validator.start();   //獲得校驗結果
	return errorMsg; 		    //返回校驗結果
}

var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function(){
	var errorMsg = validataFunc();      //如果errorMsg有確切的返回值，說明未通過校驗
	if(errorMsg){
		alert(errorMsg);
		return false;	            //阻止表單提交
	}
}