學習JavaScript設計模式之策略模式_javascript技巧

把不變的部分和變化的部分隔開是每個設計模式的主題。

• 條條大路通羅馬。我們經常會遇到解決一件事情有多種方案，比如壓縮檔，我們可以使用zip演算法、也可以使用gzip演算法。其靈活多樣，我們可以採用策略模式解決。

一、定義

定義一系列的演算法，把它們一個個封裝起來，並且使它們可以相互替換。
基於策略類模式的程式至少由兩部分組成。第一個部分是一組策略類，策略類封裝了具體的演算法，並負責具體的計算過程。第二個部分是環境類Context，Context接收客戶的請求，隨後把請求委託給某一個策略類。

二、樣本

計算獎金。績效為S的發放4倍工資，績效為A的發放3倍工資，績效為B的發放2倍工資。

var strategies = { "S": function(salary) {  return salary * 4; }, "A": function(salary) {  return salary * 3; }, "B": function(salary) {  return salary * 2; }};// 接收請求var calculateBonus = function(level, salary) { return strategies[level](salary);};// 測試console.log(calculateBonus("S", 20000));console.log(calculateBonus("A", 20000));console.log(calculateBonus("B", 20000));

三、延伸：表單驗證

/* 校正策略對象 */var validateStrategies = { isEmpty: function (val, errorMsg) {  if (!val) {   return errorMsg;  } }, isURL: function (val, errorMsg) {  if (!new RegExp("^(http:\\/\\/|https:\\/\\/)?([\\w\\-]+\\.)+[\\w\\-]+(\\/[\\w\\-\\.\\/?\\@\\%\\!\\&=\\+\\~\\:\\#\\;\\,]*)?$").test(val)) {   return errorMsg;  } }, isEmail: function (val, errorMsg) {  if (!new RegExp('\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+').test(val)) {   return errorMsg;  } }, isMaxLength: function (val, length, errorMsg) {  if (val.length > length) {   return errorMsg;  } }, isMinLength: function (val, length, errorMsg) {  if (val.length < length) {   return errorMsg;  } }};/* validator類 */var validator = function () { // 緩衝驗證策略 this.cache = [];};/** * 添加要驗證的策略 * @param dom  要驗證的dom元素 * @param rules  驗證規則 */validator.prototype.add = function (dom, rules) { var self = this; for (var i = 0, rule; rule = rules[i++];) {  (function (rule) {   var strategyAry = rule.strategy.split(":");  // ["isMaxLength", "10"]   var errorMsg = rule.errorMsg;     // "內容長度不能超過10"   self.cache.push(function () {    var strategy = strategyAry.shift();   // "isMaxLength"    strategyAry.unshift(dom.value);    // ["1@qq", "10"]    strategyAry.push(errorMsg);     // ["1@qq", "10", "內容長度不能超過10"]    return validateStrategies[strategy].apply(dom, strategyAry);   });  })(rule); }};/* 開始校正 */validator.prototype.start = function () { for (var i = 0, validateFunc; validateFunc = this.cache[i++];) {  var errorMsg = validateFunc();  if (errorMsg) {   return errorMsg;  } }};// 測試<label for="email">郵箱：</label><input type="text" name="email" value="1@qq">var validatorInstance = new validator();validatorInstance.add( document.getElementsByName("email")[0],  [{  strategy: "isEmpty",  errorMsg: "內容不可為空" },{  strategy: "isMaxLength:10",  errorMsg: "內容長度不能超過10" },{  strategy: "isEmail",  errorMsg: "email格式不對" }]);errorMsg = validatorInstance.start();

希望本文所述對大家學習javascript程式設計有所協助。