基于模板的ajax的客户端组件

   前段时间忽然神游起来，给自己放大暑假。整天在家闲着也是闲着。就把已经搁置已久的oo语言计划翻出来做。虚拟机元旦就做好了，一直没有具体的应用。要是让我整个web框架搭建起来，那工作也太过于庞大，纯粹是浪费我美好的暑假。所以我就搭了简单的web 服务器,客户端就用现在最火的ajax技术来构建，也算是个应用。
   架构示例：

也许是做.net WEB组件做久了，所以很自然的想到DataGrid里的组件模版格式。既然在服务端可以处理，那么在客户端同样可以处理。

< EditGrid id="EGList" runat="server" ShowPageCount="True"PageSize="20" 
    ShowActionCell="True">
    <Columns>
     <asp:BoundColumn Visible="False" DataField="ID" ReadOnly="True" HeaderText="ID"></asp:BoundColumn>
    </Columns>
   </ EditGrid>

  依葫芦画瓢，我们先定义模版，有过.net  web组件开发的人一定很眼熟吧！（简直就是抄袭）：

<div id="dtopicList" tagType="GridView">
 <GridView>
    <GridHead>
            [td]ID[/td][td]标题[/td][td]内容[/td][td]编辑[/td]
    </GridHead>     
     <GridColumns>
            <BoundField>[DataItem.ID]</BoundField>
            <BoundField>[DataItem.Title]</BoundField>
            <BoundField>[DataItem.Content]</BoundField>
            <BoundField>增加 修改 删除</BoundField>
        </GridColumns>
     <GridFoot>
            [td]编号[/td][td][/td][td][/td][td][/td]
     </GridFoot>
 </GridView>
</div>

   定义好了xml模版，就得想办法让数据集转换成浏览器可识别的代码。这里上段我的代码，大家参考一下。模版内容的识别和转换依然使用大家所熟识的正则表达式。

Sys.WebControl = new Object();
    
    Sys.WebControl.GetDom =  function(s){
        var doc = new ActiveXObject('Microsoft.XMLDOM'); 
        doc.async = false;
        doc.loadXML(s) ;    
        return doc;
    }

    //数据列表组件
    Sys.WebControl.DataList =  function(control){
        this.Control = control;
        this.TemplateDoc = Sys.WebControl.GetDom(this.Control.innerHTML);
        this.Control.innerHTML = "";
        
        //数据绑定
        this.DataBind  = function(dataSrc){
            //读取模版
            var ix = this.TemplateDoc.selectSingleNode("/ITEMTEMPLATE/LABEL").text;            
            var pstr = "";

            //遍历数据源
            for(var i = 0;i < dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes.length;i++){
                var xobj =  dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes[i];
                   
                //解析模版
                var str = ix;
                var re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");

                var arr;
                while ((arr = re.exec(str)) != null){
                    str = str.replace(arr[0],xobj.selectSingleNode(arr[1]).text);//解析并替换
                    re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");
                    
                }
                    //alert(arr[0]);
                    //alert(arr.index + "-" + arr.lastIndex + "\t" + arr);

                str = str.replace(/\[/ig,"<").replace(/\]/ig,">");
                pstr += str;
            }

            this.Control.innerHTML = pstr;
        }
        
        return this;        
    }
    
    //数据网格组件
    Sys.WebControl.GridView =  function(control){
        this.Control = control;
        this.TemplateDoc = Sys.WebControl.GetDom(this.Control.innerHTML);

        this.Control.innerHTML = "";
        
        //数据绑定
        this.DataBind  = function(dataSrc){
            //读取模版
            //alert(this.TemplateDoc.documentElement.tagName);
            var viewDom = this.TemplateDoc.selectSingleNode("/GRIDVIEW");
                        
            var pstr = "<table width='98%'>";
            
            //表头            
            var sHear = viewDom.selectSingleNode("GRIDHEAD").text;
            pstr += "<tr>"
            pstr += sHear.replace(/\[/ig,"<").replace(/\]/ig,">");
            pstr += "</tr>"
            

            //遍历数据源
            for(var i = 0;i < dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes.length;i++){
                var xobj =  dataSrc.selectSingleNode("/xDoc/ObjectCollect").childNodes[i];
                  
                 pstr += "<tr>"
                  
                 //遍历Columns
                for(var j = 0;j < viewDom.selectSingleNode("GRIDCOLUMNS").childNodes.length;j++){
                    var xItem = viewDom.selectSingleNode("GRIDCOLUMNS").childNodes[j];
                    
                    pstr += "<td>"
                    
                     //解析模版
                    var str = xItem.text;
                    var re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");
                     
                    var arr;
                    while ((arr = re.exec(str)) != null){
                        str = str.replace(arr[0],xobj.selectSingleNode(arr[1]).text);//解析并替换
                        re = new RegExp("\\[DataItem\.(\\w+)\\]","ig");
                    }
                    
                    str = str.replace(/\[/ig,"<").replace(/\]/ig,">");
                    pstr += str;
                    
                    pstr += "</td>";
                }
                
                pstr += "</tr>";
            }
            
            //表尾
            var sHear = viewDom.selectSingleNode("GRIDFOOT").text;
            pstr += "<tr>";
            pstr += sHear.replace(/\[/ig,"<").replace(/\]/ig,">");
            pstr += "</tr>";
            
            pstr += "</table>";
            this.Control.innerHTML = pstr;
        }
        
        return this;        
    }

用法：

    //初始化话题列表组件
        topiclist  = new Sys.WebControl.GridView(document.getElementById("dtopicList"));
    //数据绑定
    topiclist.DataBind(Sys.Net.HttpSession.GetDom(s));