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};

 而$get()是code如下:
 

//Sys.UI.DomElement.getElementById method
var $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() method
Sys.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# $() method
function $(id)
{return document.getElementById(id);}

 

所以可以看出是得到Client端的标签的ID,

在Script#中它还支持Asp.net Ajax Runtime,主要支持的Atlas,而Atlas上面使用的还原来的那种方式$(),而C#是不支持的,所以通过写C#转换JavaScript时,这个特性就受到限制.所以其他Script#限制瞒多的,但我相信它用C#写client逻辑这个特性还是很吸引人的.