getElementByID是怎样转换成$get()/$()
不好意思今天才回你,因为前两天有一个重要的考试,先多谢谢关注!
(1)ASP.Net AJAX的客户端框架一系列的对DOM对象的维护和操作,基本内容实现就在DomElement类中,其实DomElement类基本是独立的,就像组件样,他主要是可以放开发者无须编写复杂的组件可以容易的与DOM元素交互.
DomElement类方法如下:
Sys.UI.DomElement.getElementByID(id,element)
在element元素的子节点中通过id属性找到并创建相应Sys.UI.DomElement类,如不指定element参数,则默认从文档的根接点document开始搜索.
Sys.UI.DomElement.addCssClass(element,className)
为element元素添加名为className的CSS Class
Sys.UI.DomElement.removeCssClass(element,className)
判断 element元素中是否已经应用了名为className的CSS Class
Sys.UI.DomElement.toggleCssClass(element,className)
在element元素已经应用辽国名为className的CSS Class,则竟其移除,否则添加.
Sys.UI.DomElment.getBounds(element)
获取element元素的边界信息,返回值被封装成一个JSON对象,包括水平位置(X),垂直位置(Y),高度(height)和宽度(width)
Sys.UI.DomElment.getLocation(element)
获取element元素的位置信息,返回值被封装成一个JSON对象包括水平位置(X),垂直位置(Y)
Sys.UI.DomElment.setLocation(element,x,y)
设定element元素的位置信息,X表示水平位置,y表示垂直位置.
(2)Sys.UI.DomElment类及$get()
本类的具体实现code:
1
//Sys.UI.DomElement Class implemented
2Sys.UI.DomElement.registerClass("Sys.UI.DomElement");
3
4//Sys.UI.DomElement.addCssClass method
5Sys.UI.DomElement.addCssClass=function(a,b)
6
{
7
if(!Sys.UI.DomElement.containsCssClass(a,b))
8 if(a.className==="")
9
a.className=b;else a.className+=" "+b};
10
11//Sys.UI.DomElement.containsCssClass method
12Sys.UI.DomElement.containsCssClass=function(b,a)
13{return Array.contains(b.className.split(" "),a)};
14
15//Sys.UI.DomElement.getBounds method
16Sys.UI.DomElement.getBounds=function(a)
17{
18 var b=Sys.UI.DomElement.getLocation(a);
19 return new Sys.UI.Bounds(b.x,b.y,a.offsetWidth||0,a.offsetHeight||0)
20
21};
22
23//Sys.UI.DomElement.getElementById method
24var $get=Sys.UI.DomElement.getElementById=function(f,e)
25{
26 if(!e)
27 return document.getElementById(f);
28 if(e.getElementById)return e.getElementById(f);
29 var c=[],d=e.childNodes;
30
for(var b=0;b<d.length;b++){var a=d[b];
31
if(a.nodeType==1)c[c.length]=a}
32 while(c.length)
33 {a=c.shift();
34 if(a.id==f)
35 return a;d=a.childNodes;
36 for(b=0;b<d.length;b++)
37 {a=d[b];
38 if(a.nodeType==1)
39 c[c.length]=a}}
40 return null
41};
42//Sys.UI.DomElement method(对于不同浏览器的实现)
43switch(Sys.Browser.agent)
44{
45case Sys.Browser.InternetExplorer:Sys.UI.DomElement.getLocation=function Sys$UI$DomElement$getLocation(a)
46{
47 if(a.self||a.nodeType===9)
48 return new Sys.UI.Point(0,0);
49 var d=a.getClientRects();
50 if(!d||!d.length)
51 return new Sys.UI.Point(0,0);
52 var e=a.ownerDocument.parentWindow,g=e.screenLeft-top.screenLeft-top.document.documentElement.scrollLeft+2, h=e.screenTop-top.screenTop-top.document.documentElement.scrollTop+2, c=e.frameElement||null;
53 if(c){
54 var b=c.currentStyle;
55 g+=(c.frameBorder||1)*2+(parseInt(b.paddingLeft)||0)+(parseInt(b.borderLeftWidth)||0)-a.ownerDocument.documentElement.scrollLeft;
56 h+=(c.frameBorder||1)*2+(parseInt(b.paddingTop)||0)+(parseInt(b.borderTopWidth)||0)-a.ownerDocument.documentElement.scrollTop}
57 var f=d[0];
58 return new Sys.UI.Point(f.left-g,f.top-h)};
59break;
60
61case Sys.Browser.Safari:Sys.UI.DomElement.getLocation=function(c)
62{
63 if(c.window&&c.window===c||c.nodeType===9)
64 return new Sys.UI.Point(0,0);
65 var g=0,h=0,j=null,f=null,b;
66 for(var a=c;a;j=a,(f=b,a=a.offsetParent))
67 {
68 b=Sys.UI.DomElement._getCurrentStyle(a);
69 var e=a.tagName;
70 if((a.offsetLeft||a.offsetTop)&&(e!=="BODY"||(!f||f.position!=="absolute")))
71 {g+=a.offsetLeft;h+=a.offsetTop}
72 }
73 b=Sys.UI.DomElement._getCurrentStyle(c);
74 var d=b?b.position:null,k=d&&d!=="static";
75 if(!d||d!=="absolute")
76 for(var a=c.parentNode;a;a=a.parentNode)
77 {
78 e=a.tagName;
79 if(e!=="BODY"&&e!=="HTML"&&(a.scrollLeft||a.scrollTop))
80 {g-=a.scrollLeft||0;h-=a.scrollTop||0}
81 b=Sys.UI.DomElement._getCurrentStyle(a);
82 var i=b?b.position:null;
83 if(i&&i==="absolute")
84 break
85 }
86 return new Sys.UI.Point(g,h)};
87break;
88case Sys.Browser.Opera:Sys.UI.DomElement.getLocation=function(b)
89{
90 if(b.window&&b.window===b||b.nodeType===9)
91 return new Sys.UI.Point(0,0);
92 var d=0,e=0,i=null;
93 for(var a=b;a;i=a,a=a.offsetParent)
94 {
95 var f=a.tagName;d+=a.offsetLeft||0;e+=a.offsetTop||0}
96 var g=b.style.position,c=g&&g!=="static";
97 for(var a=b.parentNode;a;a=a.parentNode)
98 {
99 f=a.tagName;
100 if(f!=="BODY"&&f!=="HTML"&&(a.scrollLeft||a.scrollTop)&&(c&&(a.style.overflow==="scroll"||a.style.overflow==="auto")))
101 {d-=a.scrollLeft||0;e-=a.scrollTop||0}
102 var h=a&&a.style?a.style.position:null;c=c||h&&h!=="static"}
103 return new Sys.UI.Point(d,e)};
104break;
105default:Sys.UI.DomElement.getLocation=function(d)
106{
107 if(d.window&&d.window===d||d.nodeType===9)
108 return new Sys.UI.Point(0,0);
109 var e=0,f=0,i=null,h=null,b=null;
110 for(var a=d;a;i=a,(h=b,a=a.offsetParent))
111 {
112 var c=a.tagName;b=Sys.UI.DomElement._getCurrentStyle(a);
113 if((a.offsetLeft||a.offsetTop)&&!(c==="BODY"&&(!h||h.position!=="absolute")))
114 {e+=a.offsetLeft;f+=a.offsetTop}
115 if(i!==null&&b){if(c!=="TABLE"&&c!=="TD"&&c!=="HTML")
116 {e+=parseInt(b.borderLeftWidth)||0;f+=parseInt(b.borderTopWidth)||0}
117 if(c==="TABLE"&&(b.position==="relative"||b.position==="absolute"))
118 {e+=parseInt(b.marginLeft)||0;f+=parseInt(b.marginTop)||0}}}
119 b=Sys.UI.DomElement._getCurrentStyle(d);
120 var g=b?b.position:null,j=g&&g!=="static";
121 if(!g||g!=="absolute")
122 for(var a=d.parentNode;a;a=a.parentNode)
123 {
124 c=a.tagName;
125 if(c!=="BODY"&&c!=="HTML"&&(a.scrollLeft||a.scrollTop))
126 {
127 e-=a.scrollLeft||0;f-=a.scrollTop||0;b=Sys.UI.DomElement._getCurrentStyle(a);
128 e+=parseInt(b.borderLeftWidth)||0;f+=parseInt(b.borderTopWidth)||0
129 }
130 }
131 return new Sys.UI.Point(e,f)};
132break;
133};
134
135//Sys.UI.DomElement.removeCssClass method
136Sys.UI.DomElement.removeCssClass=function(d,c)
137{
138 var a=" "+d.className+" ",b=a.indexOf(" "+c+" ");
139 if(b>=0)d.className=(a.substr(0,b)+" "+a.substring(b+c.length+1,a.length)).trim()
140};
141
142//Sys.UI.DomElement.setLocation method
143Sys.UI.DomElement.setLocation=function(b,c,d)
144{
145 var a=b.style;a.position="absolute";
146 a.left=c+"px";a.top=d+"px"
147};
148
149//Sys.UI.DomElement.toggleCssClass method
150Sys.UI.DomElement.toggleCssClass=function(b,a)
151{
152 if(Sys.UI.DomElement.containsCssClass(b,a))
153 Sys.UI.DomElement.removeCssClass(b,a);
154 else Sys.UI.DomElement.addCssClass(b,a)
155};
156
157//Sys.UI.DomElement._getCurrentStyle method
158Sys.UI.DomElement._getCurrentStyle=function(a)
159{
160 var b=(a.ownerDocument?a.ownerDocument:a.documentElement).defaultView;
161 return b&&a!==b&&b.getComputedStyle?b.getComputedStyle(a,null):a.style
162};
//Sys.UI.DomElement Class implemented 2
Sys.UI.DomElement.registerClass("Sys.UI.DomElement");3
4
//Sys.UI.DomElement.addCssClass method5
Sys.UI.DomElement.addCssClass=function(a,b)6
{
7
if(!Sys.UI.DomElement.containsCssClass(a,b))8
if(a.className==="")9
a.className=b;else a.className+=" "+b};10
11
//Sys.UI.DomElement.containsCssClass method12
Sys.UI.DomElement.containsCssClass=function(b,a)13
{return Array.contains(b.className.split(" "),a)};14
15
//Sys.UI.DomElement.getBounds method16
Sys.UI.DomElement.getBounds=function(a)17
{18
var b=Sys.UI.DomElement.getLocation(a);19
return new Sys.UI.Bounds(b.x,b.y,a.offsetWidth||0,a.offsetHeight||0)20
21
};22
23
//Sys.UI.DomElement.getElementById method24
var $get=Sys.UI.DomElement.getElementById=function(f,e)25
{26
if(!e)27
return document.getElementById(f);28
if(e.getElementById)return e.getElementById(f);29
var c=[],d=e.childNodes;30
for(var b=0;b<d.length;b++){var a=d[b];
31
if(a.nodeType==1)c[c.length]=a}32
while(c.length)33
{a=c.shift();34
if(a.id==f)35
return a;d=a.childNodes;36
for(b=0;b<d.length;b++)37
{a=d[b];38
if(a.nodeType==1)39
c[c.length]=a}}40
return null41
};42
//Sys.UI.DomElement method(对于不同浏览器的实现)43
switch(Sys.Browser.agent)44
{45
case Sys.Browser.InternetExplorer:Sys.UI.DomElement.getLocation=function Sys$UI$DomElement$getLocation(a)46
{47
if(a.self||a.nodeType===9)48
return new Sys.UI.Point(0,0);49
var d=a.getClientRects();50
if(!d||!d.length)51
return new Sys.UI.Point(0,0);52
var e=a.ownerDocument.parentWindow,g=e.screenLeft-top.screenLeft-top.document.documentElement.scrollLeft+2, h=e.screenTop-top.screenTop-top.document.documentElement.scrollTop+2, c=e.frameElement||null;53
if(c){54
var b=c.currentStyle;55
g+=(c.frameBorder||1)*2+(parseInt(b.paddingLeft)||0)+(parseInt(b.borderLeftWidth)||0)-a.ownerDocument.documentElement.scrollLeft;56
h+=(c.frameBorder||1)*2+(parseInt(b.paddingTop)||0)+(parseInt(b.borderTopWidth)||0)-a.ownerDocument.documentElement.scrollTop}57
var f=d[0];58
return new Sys.UI.Point(f.left-g,f.top-h)};59
break;60
61
case Sys.Browser.Safari:Sys.UI.DomElement.getLocation=function(c)62
{63
if(c.window&&c.window===c||c.nodeType===9)64
return new Sys.UI.Point(0,0);65
var g=0,h=0,j=null,f=null,b;66
for(var a=c;a;j=a,(f=b,a=a.offsetParent))67
{68
b=Sys.UI.DomElement._getCurrentStyle(a);69
var e=a.tagName;70
if((a.offsetLeft||a.offsetTop)&&(e!=="BODY"||(!f||f.position!=="absolute")))71
{g+=a.offsetLeft;h+=a.offsetTop}72
}73
b=Sys.UI.DomElement._getCurrentStyle(c);74
var d=b?b.position:null,k=d&&d!=="static";75
if(!d||d!=="absolute")76
for(var a=c.parentNode;a;a=a.parentNode)77
{78
e=a.tagName;79
if(e!=="BODY"&&e!=="HTML"&&(a.scrollLeft||a.scrollTop))80
{g-=a.scrollLeft||0;h-=a.scrollTop||0}81
b=Sys.UI.DomElement._getCurrentStyle(a);82
var i=b?b.position:null;83
if(i&&i==="absolute")84
break85
}86
return new Sys.UI.Point(g,h)};87
break;88
case Sys.Browser.Opera:Sys.UI.DomElement.getLocation=function(b)89
{90
if(b.window&&b.window===b||b.nodeType===9)91
return new Sys.UI.Point(0,0);92
var d=0,e=0,i=null;93
for(var a=b;a;i=a,a=a.offsetParent)94
{95
var f=a.tagName;d+=a.offsetLeft||0;e+=a.offsetTop||0}96
var g=b.style.position,c=g&&g!=="static";97
for(var a=b.parentNode;a;a=a.parentNode)98
{ 99
f=a.tagName;100
if(f!=="BODY"&&f!=="HTML"&&(a.scrollLeft||a.scrollTop)&&(c&&(a.style.overflow==="scroll"||a.style.overflow==="auto")))101
{d-=a.scrollLeft||0;e-=a.scrollTop||0}102
var h=a&&a.style?a.style.position:null;c=c||h&&h!=="static"}103
return new Sys.UI.Point(d,e)};104
break;105
default:Sys.UI.DomElement.getLocation=function(d)106
{107
if(d.window&&d.window===d||d.nodeType===9)108
return new Sys.UI.Point(0,0);109
var e=0,f=0,i=null,h=null,b=null;110
for(var a=d;a;i=a,(h=b,a=a.offsetParent))111
{112
var c=a.tagName;b=Sys.UI.DomElement._getCurrentStyle(a);113
if((a.offsetLeft||a.offsetTop)&&!(c==="BODY"&&(!h||h.position!=="absolute")))114
{e+=a.offsetLeft;f+=a.offsetTop}115
if(i!==null&&b){if(c!=="TABLE"&&c!=="TD"&&c!=="HTML")116
{e+=parseInt(b.borderLeftWidth)||0;f+=parseInt(b.borderTopWidth)||0}117
if(c==="TABLE"&&(b.position==="relative"||b.position==="absolute"))118
{e+=parseInt(b.marginLeft)||0;f+=parseInt(b.marginTop)||0}}}119
b=Sys.UI.DomElement._getCurrentStyle(d);120
var g=b?b.position:null,j=g&&g!=="static";121
if(!g||g!=="absolute")122
for(var a=d.parentNode;a;a=a.parentNode)123
{124
c=a.tagName;125
if(c!=="BODY"&&c!=="HTML"&&(a.scrollLeft||a.scrollTop))126
{127
e-=a.scrollLeft||0;f-=a.scrollTop||0;b=Sys.UI.DomElement._getCurrentStyle(a);128
e+=parseInt(b.borderLeftWidth)||0;f+=parseInt(b.borderTopWidth)||0129
}130
}131
return new Sys.UI.Point(e,f)};132
break;133
};134
135
//Sys.UI.DomElement.removeCssClass method136
Sys.UI.DomElement.removeCssClass=function(d,c)137
{138
var a=" "+d.className+" ",b=a.indexOf(" "+c+" ");139
if(b>=0)d.className=(a.substr(0,b)+" "+a.substring(b+c.length+1,a.length)).trim()140
};141
142
//Sys.UI.DomElement.setLocation method143
Sys.UI.DomElement.setLocation=function(b,c,d)144
{145
var a=b.style;a.position="absolute";146
a.left=c+"px";a.top=d+"px"147
};148
149
//Sys.UI.DomElement.toggleCssClass method150
Sys.UI.DomElement.toggleCssClass=function(b,a)151
{152
if(Sys.UI.DomElement.containsCssClass(b,a))153
Sys.UI.DomElement.removeCssClass(b,a);154
else Sys.UI.DomElement.addCssClass(b,a)155
};156
157
//Sys.UI.DomElement._getCurrentStyle method158
Sys.UI.DomElement._getCurrentStyle=function(a)159
{160
var b=(a.ownerDocument?a.ownerDocument:a.documentElement).defaultView;161
return b&&a!==b&&b.getComputedStyle?b.getComputedStyle(a,null):a.style162
};
而$get()是code如下:
//Sys.UI.DomElement.getElementById methodvar $get=Sys.UI.DomElement.getElementById=function(f,e){ if(!e)//从根节点开始搜索 return document.getElementById(f); //从指定节点开始搜索 if(e.getElementById)return e.getElementById(f); var c=[],d=e.childNodes;//获得后代集合 for(var b=0;b<d.length;b++) { var a=d[b]; if(a.nodeType==1)//返回a所表示的节类型 c[c.length]=a } while(c.length) { a=c.shift();//删除原数组第一项,并返回删除元素的值 if(a.id==f) return a;d=a.childNodes; for(b=0;b<d.length;b++) { a=d[b]; if(a.nodeType==1) c[c.length]=a } } return null};这样就是实现将document.getElementById()转成$get().接着再深入看一下,上面的代码是通过ScriptMananger引用到客户端浏览器上,让浏览器执行,所以在前端的.aspx网页上的时候,你查看代码时.你看不到js代码.(当然我想可能是通过render到客户端的).
$get()是Sys.UI.DomElement.getElementByID它的简写而Sys.UI.DomElement.getElementByID是对document.getElementById()的增强,值得注意的$get('是在client的id'),和这个在Sys.UI.Behavior类中的get_element()方法有不同的点,get_element()是可以用在只要使用ScriptMananger的页面上的任意Id,如果想在服务端怎样使用$get();只用向客户端注册脚本的方式.
//Sys.UI.Behavior.get_element() methodSys.UI.Behavior=function(b){Sys.UI.Behavior.initializeBase(this);this._element=b;var a=b._behaviors;if(!a)b._behaviors=[this];else a[a.length]=this};get_element:function(){return this._element}可以看出是直接返回的您传入的页面上对象的参数.
(3)关于Script#中的$()
而在Script#中是怎样实现的拉,这样实现的
//Script# $() methodfunction $(id){return document.getElementById(id);}
所以可以看出是得到Client端的标签的ID,
在Script#中它还支持Asp.net Ajax Runtime,主要支持的Atlas,而Atlas上面使用的还原来的那种方式$(),而C#是不支持的,所以通过写C#转换JavaScript时,这个特性就受到限制.所以其他Script#限制瞒多的,但我相信它用C#写client逻辑这个特性还是很吸引人的.
