Sys.UI.Control的理解

有如下代码：

 1 /// <reference name="MicrosoftAjax.js"/>
 2 
 3 Type.registerNamespace("AjaxEnabled");
 4 
 5 //create constructor
 6 AjaxEnabled.PassTextBox = function(element) {
 7     AjaxEnabled.PassTextBox.initializeBase(this, [element]);
 8 
 9     this._weakCssClass = null;
10     this._mediumCssClass = null;
11     this._strongCssClass = null;
12 }
13 
14 //define class
15 AjaxEnabled.PassTextBox.prototype = {
16 
17     //initialize the UI control
18     initialize: function() {
19         AjaxEnabled.PassTextBox.callBaseMethod(this, 'initialize');    
20     
21         this._onKeyupHandler = Function.createDelegate(this, this._onKeyup);
22         $addHandlers(this.get_element(), {'keyup' : this._onKeyup}, this);    
23     },
24 
25     dispose: function() {            
26         $clearHandlers(this.get_element());    
27         AjaxEnabled.PassTextBox.callBaseMethod(this, 'dispose');
28     },
29 
30     //define key press event
31     _onKeyup : function(e) {
32 
33         //get password text    
34         var pass = this.get_element().value;
35         var strength = this.returnPasswordStrength(pass);
36     
37         switch (strength) {
38             case "Weak":
39                 this.get_element().className = this._weakCssClass;
40                 break;
41             case "Medium":
42                 this.get_element().className = this._mediumCssClass;
43                 break;
44             case "Strong":
45                 this.get_element().className = this._strongCssClass;
46                 break;        
47         }
48     },
49 
50     //define properties
51     get_weakCssClass: function() {
52         return this._weakCssClass;
53     },
54     set_weakCssClass: function(value) {
55         this._weakCssClass = value;
56     },
57     get_mediumCssClass: function() {
58         return this._mediumCssClass;
59     },
60     set_mediumCssClass: function(value) {
61         this._mediumCssClass = value;
62     },
63     get_strongCssClass: function() {
64         return this._strongCssClass;
65     },
66     set_strongCssClass: function(value) {
67         this._strongCssClass = value;
68     },
69 
70     returnPasswordStrength: function(password) {          
71         var strPass = new String(password.toString());
72         if (strPass.length < 5) 
73         {
74             return "Weak";          
75         }
76         else 
77         {
78             if (strPass.length < 8) 
79             {          
80                 return "Medium";          
81             }
82             else 
83             {
84                 return "Strong";                    
85             }
86         }
87     }
88 }
89 
90 //register class as a Sys.Control
91 AjaxEnabled.PassTextBox.registerClass('AjaxEnabled.PassTextBox', Sys.UI.Control);
92 
93 //notify loaded
94 if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

第6、7行表明Sys.UI.Control的构造函数带参数。这里element正好是MicrosoftAjax框架会填充到这个函数里面的，DOM对象。这个DOM对象将会成为我们构造的Sys.UI.Control对象里面的一个property，这样之后我们就可以通过this.get_element()方法直接访问到这个dom对象了。

第21行的作用是保证_onKeyup时间被触发的时候，this对象一定是Sys.UI.Control对象。

第22行的作用是通过this.get_element()方法获得与这个控件关联的dom对象，然后将对应的事件绑定上去。

第51到68行的getter/setter作用是在使用$create方法是，传入值的时候使用的。

 

posted on 2012-05-01 21:37  李志鹏  阅读(498)  评论(0)    收藏  举报

导航