设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

(Tips&Tricks)用客户端模板精简JavaScript代码

导读:出处:http://www.cnblogs.com/osamede/archive/2009/06/11/1501474.html        假设你在做一个AJAX-oriented 项目,使用JavaScript访问服务器 ,获取Json 对象,然后操作DOM,将它们显示出来。如果遇到一些复杂的页面,需要获取和展示大量的JSON对象,那该如何处理?为每一个对象单独写一段JavaScript代...。。。

出处:http://www.cnblogs.com/osamede/archive/2009/06/11/1501474.html

 

       假设你在做一个AJAX-oriented 项目,使用JavaScript访问服务器 ,获取Json 对象,然后操作DOM,将它们显示出来。如果遇到一些复杂的页面,需要获取和展示大量的JSON对象,那该如何处理?为每一个对象单独写一段JavaScript代码创建相应的HTML?那样的话随着JavaScript代码越来越多,页面会变的越来越复杂,而且你不得不通过修改JavaScript代码来改变HTML样式。

       

       使用客户端模可以解决这个问题。你可以先用HTML定义一个模板,然后绑定JSON对象上去。这样你可以任意改变最终生成的HTML,而不用修改JavaScript

 

John Resig’s Microtemplating engine

 

John ResigJQuery的设计者,曾经在他的博客上发布过一个特别微型,但是很强大的的JS模板引擎,仅仅只有20行……。好吧,我承认看不大懂,但是它真的很强。

   这段代码将一个模板解析成一段JavaScript 代码,然后运行。模板的语法类似于ASP,<%= expression %> <% codeblock %>嵌入代码。你可以嵌入任意的JavaScript代码,而不是仅仅几个命令。

Code
        var _tmplCache = {}
        
this.parseTemplate = function(str, data) {
            
var err = "";
            
try {
                
var func = _tmplCache[str];
                
if (!func) {
                    
var strFunc =
            
"var p=[],print=function(){p.push.apply(p,arguments);};" +
                        
"with(obj){p.push('" +
            str.replace(
/[/r/t/n]/g, " ")
               .replace(
/'(?=[^#]*#>)/g, "/t")
               .split(
"'").join("//'")
               .split(
"/t").join("'")
               .replace(
/<#=(.+?)#>/g, "',$1,'")
               .split(
"<#").join("');")
               .split(
"#>").join("p.push('")
               
+ "');}return p.join('');";
                    func 
= new Function("obj", strFunc);
                    _tmplCache[str] 
= func;
                }
                
return func(data);
            } 
catch (e) { err = e.message; }
            
return "< # ERROR: " + err.htmlEncode() + " # >";
        }

          

 

 

一个简单的实例

这个例子将一个Json对象Customers,解析成表格。

 

模板

 

   

Code
 <script id="ItemTemplate" type="text/html">
 
<table border="2px" >
 
<for(var i=0;i<Customers.length;i++){ #>
<tr>
<td><#= Customers[i].name #></td>
<td><#= Customers[i].address.street #></td>
<td><#=Customers[i].address.city#></td>
</tr>
<# } #>
</table>
script>

 

代码

 

 

 1     content.innerHTML = parseTemplate($("#ItemTemplate").html(), { Customers: [
 2          { name: "张三", address: { street: "朝阳路", city: "北京"} },
 3         { name: "张三子", address: { street: "玄武路", city: "北京"} },
 4        { name: "李四", address: { street: "莫干山路", city: "杭州"} },
 5         { name: "李四子", address: { street: "武陵门路", city: "杭州"} }]
 6 
 7     }
 8 
 9     
10 
11 );
12 

 

 

 

 相关链接

John Resig posted a tiny little templating engine

Minimize Code by Using jQuery and Data Templates  ----Dan Wahlin

Client Templating with jQuery----Rick Strahl

(编辑: ITFLY8)

网友评论
相关文章