2025-02-10

 

 

引子:

首先請各位同學跟我來一起復習設計模式中的橋接模式(Bridge), 廢話不多言表直接上圖:

 

在這個設計模式中我們的抽象類和實現類可以各自進行擴展和封裝這樣就可以對它們進行脫耦, 通過組合來產生很多變化。這種思想也符合“少用繼承,多用組合”的設計原則.在橋接模式中我們可以用Abstraction 類來對實現類(ConreteImplementor)和修正抽象化類(RefinedAbstraction)進行橋接。但JavaScript 如何實現橋接呢?Please follow me

 1 //Validation類:

 2

 3

 4 Validation= { 

 5     required: function(elem) { 

 6         return!$(elem).val().trim().isNullOrEmpty(); 

 7     },     

 8     email: function(elem) { 

 9 returnValidation.regexValidator($(elem).val().trim(),Validation.Regex.email); 

10     }, 

11     regexValidator: function(elemVal, /*string*/regex,) { 

12         if(!elemVal.isNullOrEmpty() && !(elemVal.match(regex, "\g"))) { 

13             returnfalse; 

14         } else{ 

15             returntrue; 

16         }; 

17     }, 

18     Regex: { 

19         email:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)?$/ 

20     } 

21 }; 

22 Validation.validateColl= { 

23 'jq-validation-required': {validFunc:Validation.required, ErrMsg: 'Required'}, 

24 'jq-validation-email': {validFunc:Validation.email, ErrMsg: 'Invalid email address'} 

25 }; 

26 Validator類:

27

28

29 (function () { 

30        varvalidator_elements_blur_selector = 'input[type="text"]'; 

31     varvalidator_elements_change_selector = 'select,input[type="hidden"]'; 

32     var validator_elements_selector =validator_elements_blur_selector + ',' +validator_elements_change_selector; 

33   

34     Validator = function(validateScopeSelector) { 

35         this._validateColl= $.extend(true, {}, Validation._validateColl); 

36         this._validateDom= $(validateScopeSelector); 

37         vartheValidator = this; 

38         this._validateDom.delegate(validator_elements_blur_selector,'blur',function() { 

39             theValidator.validateInput(this, 'blur'); 

40         }); 

41 this._validateDom.delegate(validator_elements_change_selector,'change', function() { 

42             varinputValidated = theValidator.validateInput(this,'change'); 

43         }); 

44     }; 

45   

46     Validator.prototype = { 

47         validate: function() { 

48             varvalidated = true; 

49             vartheValidator = this; 

50             $(validator_elements_selector, this._validateDom).each(function() { 

51                 if(!theValidator.validateInput.call(theValidator, this)) { 

52                     validated = false; 

53                 }; 

54             }); 

55             returnvalidated; 

56         }, 

57         validateInput: function(elem, event) { 

58             varinput = $(elem); 

59             varclassArr = input.attr('class').split(''); 

60   

61             varvalidated = true; 

62             varinValidTable = new Hashtable(); 

63             for(var i = 0; i < classArr.length; i++) { 

64                 varclassItem = classArr[i]; 

65                 if(!classItem.startWith('jq-validation')) continue; 

66                 varvalidateItem = this._validateColl[classItem]; 

67                 if(validateItem && validateItem.validFunc) {  

68                     if(!validateItem.validFunc(input, validateItem)) { 

69                         validated = false; 

70                         if (!strPopupErr.isNullOrEmpty()) { 

71                             strPopupErr += ""; 

72                         } 

73                        inValidTable.add(classItem, validateItem); 

74                     } 

75                 } 

76             } 

77             returnvalidated; 

78         } 

79     }; 

80 })(); 

81 //調用例子:

82 <html> 

83 <p id="validation_region">   

84 < input type="text"class="jq-validation-required"/>   

85 < input type="text"class="jq-validation-email"/>   

86 </p>   

87 < input type="button"onclick="submit()"/>   

88    

89 <script language="javascript"type="text/javascript">  

90 var validator = new Validator("#validation_region");     

91 function submit(){   

92 if(validator.validate()){ 

93     alert('驗證通過!'); 

94 }else{ 

95     alert('驗證失敗!'); 

96 } 

97 }   

98 </script> 

99 </html> 

 

解釋:

1.設計思想

其中Validation 可以定義和擴展各種驗證規則的方法,而Validator則負責處理驗證後的錯誤提示以及如何正確反饋給代碼調用者是否驗證通過, Validation.validateColl則定義瞭哪種類型的驗證調用哪一個驗證規則的處理方法,他們各自分工明確,這也符合單一職責的設計原則。以上代碼中我們可以看到Validation 對象是實現類,而Validator 對象是修正抽象化類, 而Validation.validateColl則是橋接器(在經典的Gof 23模式中沒有這個定義)。當然在這裡我們已經不能完全按照設計模式中定義的術語來描述以上代碼瞭。我們隻是按照設計模式的思路和理念來設計和構造我們的代碼。

2.工作原理

在調用的例子中:

var validator = newValidator("#validation_region");   

 

當頁面加載完成後我們首先實例化Validator對象並傳入需要驗證的范圍(Scope), 在這裡我們傳入需要驗證區域的ID, 我們利用jQuery的$() 方法來把選擇符“#validation_region"轉換成可操作的DOM對象.

當Button 點擊時我們調用submit方法,這時執行validator.validate 方法,這個方法會利用jQuery的each方法遍歷驗證范圍內的所有input 控件進行驗證,並最終返回驗證的結果。

在Validate的內部方法中我們還可以加入當驗證未通過時對input 進行改變樣式並錯誤提示的功能,一般作法是在input加上紅色的邊框以提示用戶,在這裡這個功能需要讀者根據項目的需求自己進行擴展瞭.

 

3.擴展驗證規則

前面我們講解瞭設計思想以及工作原理,那麼我們如何對validation 進行擴展呢?

我們隻需要增加新的驗證規則方法到Validation對象上,並在Validation.validateColl 對驗證類型(input 的class 名)和新的驗證規則進行橋接。

例如:

如果我們要加入一個驗證是否是數字的規則,我們需要在Validation 對象中加入

number:function (elem) {

    return!isNaN($(elem).val());

}

並在Validation.validateColl中加入

'jq-validation-number': { validFunc:Validation.number, ErrMsg: 'Notnumber’ }

這時我們並不需要更改任何Validator的代碼就可以在input 的class中加入’jq-validation-number’ 來進行數字規則驗證瞭。

這裡需要說明一點如果需要對一個input 進行多種驗證規則可以在class中以空格分割寫入多種驗證規則的名稱

例如:

<input type="text" class="jq-validation-requiredjq-validation-number"/> 

註:圖片引自博客園呂震宇的設計模式系列,另附引用地址可以更詳細的瞭解橋接模式:

http://www.cnblogs.com/zhenyulu/articles/62720.html

   作者 十一月的雨

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *