首頁 > 開發者 > JavaScript
引子:
首先請各位同學跟我來一起複習設計模式中的橋接模式(Bridge), 廢話不多言表直接:
在這個設計模式中我們的抽象類別和實作類別可以各自進行擴充和封裝這樣就可以對它們進行脫耦, 通過組合來產生很多變化。這種思想也符合“少用繼承,多用組合”的設計原則.在橋接模式中我們可以用Abstraction 類來對實作類別(ConreteImplementor)和修正抽象化類(RefinedAbstraction)進行橋接。但JavaScript 如何?橋接呢？Please follow me
1 //Validation類:
2
3 view plain
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 view plain
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 <div id="validation_region">
84 < input type="text"class="jq-validation-required"/>
85 < input type="text"class="jq-validation-email"/>
86 </div>
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
轉載請註明出處:http://www.cnblogs.com/RobbinHan/archive/2011/12/05/2270707.html
本文作者: 十一月的雨 http://www.cnblogs.com/RobbinHan
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
