决定在Lite XML中集成编译客户端模板功能直接在服务断模板中划出一块做客户端模板在模板编译过程中，会把c
决定在Lite XML中集成编译客户端模板功能
直接在服务断模板中划出一块做客户端模板
在模板编译过程中，会把<c:client节点下的模板内容编译成js代码。渲染到客户端中可以直接通过js调用，因为不需要在客户端直接解析模板源代码，所以，能达到一个更高的性能。
支持的方式大概是这样的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://www.xidea.org/ns/lite/core"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>前后端统一模板实例</title><link href="tablecloth.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="container"><h1>前后端统一模板实例</h1><div id="content"><h2>${title}</h2><table cellspacing="0" cellpadding="0"><tr><th>姓名</th><th>公司</th><th>年龄</th><th>城市</th></tr><c:for var="item" items="${data}"><tr><td>${item.name}</td><td>${item.company}</td><td>${item.age}</td><td>${item.city}</td></tr></c:for></table></div><div><c:for var="item" items="${[1,2,3,4,5,6]}"><a href="#" onclick="reset(${item});return false;">${item}</a></c:for></div></div><!-- 这里的内容会编译成JS函数 --><c:client id="userTemplate"><!-- 偷懒有道，xpath直接包含前面那段模板片断 --><c:include xpath="//*[@id='content']/*" /></c:client><script>/*<![CDATA[*/function reset(id){ var content = document.getElementById('content');var model = ${JSON.stringify({title:"客户端模板",data:data})}//我们对模型做一点简单的修改（当能你也可以XHR从服务断获取数据，或者从客户端数据模型获取）model.title +=id;for(var i=0;i!=model.data.length;i++){var item = model.data[i];for(var n in item){item[n]+=id;}}content.innerHTML = userTemplate(model);}/*]]>*/</script></body></html> <!-- 这里的内容会编译成JS函数（函数名userTemplate） --> <c:client id="userTemplate"> <h1>前后端统一模板实例</h1> <div id="content"> <h2>${title}</h2> <table cellspacing="0" cellpadding="0"> <tr> <th>姓名</th> <th>公司</th> <th>年龄</th> <th>城市</th> </tr> <c:for var="item" items="${data}"> <tr> <td>${item.name}</td> <td>${item.company}</td> <td>${item.age}</td> <td>${item.city}</td> </tr> </c:for> </table> </div> </c:client>
这是自动生成的JS代码
<script>/*<![CDATA[*/function userTemplate(_$0,_$1,_$2){_$1={};for(_$2 in _$0){_$1[_$2]=_$0[_$2]};_$0=_$1,_$1=[];_$2=function(c){return "&#"+c.charCodeAt()+";";}with(_$0){_$1.push("\t\t<h2>");_$1.push(String(title).replace(/[<>&]/g,_$2));_$1.push("</h2><table cellpadding="0" cellspacing="0">\t<tr>\t<th>姓名</th>\t<th>公司</th>\t<th>年龄</th>\t<th>城市</th>\t</tr>\t");var _$3=data;var _$2=0;if(typeof _$3 == 'number'){_$3= new Array(_$3);}else if(!(_$3 instanceof Array)){var _$4= [];for(item in _$3){_$4.push({key:item,value:_$3[item]});}_$3=_$4;}for(;_$2<_$3.length;_$2++){var item=_$3[_$2];_$1.push("\t<tr>\t<td>");_$1.push(String(item.name).replace(/[<>&]/g,_$2));_$1.push("</td>\t<td>");_$1.push(String(item.company).replace(/[<>&]/g,_$2));_$1.push("</td>\t<td>");_$1.push(String(item.age).replace(/[<>&]/g,_$2));_$1.push("</td>\t<td>");_$1.push(String(item.city).replace(/[<>&]/g,_$2));_$1.push("</td>\t</tr>\t");}_$1.push("\t</table>\t");}return _$1.join('');}/*]]>*/</script>[/list] <!-- 这里的内容会编译成JS函数（函数名userTemplate） --> <c:client id="userTemplate"> <h1>前后端统一模板实例</h1> <div id="content"> <h2>${title}</h2> <table cellspacing="0" cellpadding="0"> <tr> <th>姓名</th> <th>公司</th> <th>年龄</th> <th>城市</th> </tr> <c:for var="item" items="${data}"> <tr> <td>${item.name}</td> <td>${item.company}</td> <td>${item.age}</td> <td>${item.city}</td> </tr> </c:for> </table> </div> </c:client>
这是自动生成的JS代码
<script>/*<![CDATA[*/function userTemplate(_$0,_$1,_$2){_$1={};for(_$2 in _$0){_$1[_$2]=_$0[_$2]};_$0=_$1,_$1=[];_$2=function(c){return "&#"+c.charCodeAt()+";";}with(_$0){_$1.push("\t\t<h2>");_$1.push(String(title).replace(/[<>&]/g,_$2));_$1.push("</h2><table cellpadding="0" cellspacing="0">\t<tr>\t<th>姓名</th>\t<th>公司</th>\t<th>年龄</th>\t<th>城市</th>\t</tr>\t");var _$3=data;var _$2=0;if(typeof _$3 == 'number'){_$3= new Array(_$3);}else if(!(_$3 instanceof Array)){var _$4= [];for(item in _$3){_$4.push({key:item,value:_$3[item]});}_$3=_$4;}for(;_$2<_$3.length;_$2++){var item=_$3[_$2];_$1.push("\t<tr>\t<td>");_$1.push(String(item.name).replace(/[<>&]/g,_$2));_$1.push("</td>\t<td>");_$1.push(String(item.company).replace(/[<>&]/g,_$2));_$1.push("</td>\t<td>");_$1.push(String(item.age).replace(/[<>&]/g,_$2));_$1.push("</td>\t<td>");_$1.push(String(item.city).replace(/[<>&]/g,_$2));_$1.push("</td>\t</tr>\t");}_$1.push("\t</table>\t");}return _$1.join('');}/*]]>*/</script> “不改变或者尽量不改变用户的使用习惯” 这一点确实很明智！！
[/list]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript"> jQuery(document).ready(function(){ var data = [ {title:"title_1"}, {title:"title_2"}, {title:"title_3"}, {title:"title_4"}, {title:"title_5"} ]; var ex = jQuery("._example"); var el = null; for(var i = data.length - 1;i >= 0;i--){ el = ex.clone(); el.removeClass("_example"); el.html((el.html() || "").replace("{$title}",data[i].title)); ex.after(el); } ex.remove(); });</script><ul> <li class="myli _example">{$title}</li></ul> 14 楼 jindw 2009-04-10 zozoh 写道你实际上是把HTML模板，变成一个 JS 函数，这个函数返回的是字符串。 每次对这个jsp的请求，你就会编译一遍。
我的想法大概是这样的：
当用户请求你的网页的时候，你根本不输出 <c:client id="userListTemplate "> 这段内容，
如果当用户调用 userListTemplate(userList) 你就向服务器发请求，请求一个叫 userList 的模板，拿下来，存在 window 对象上，下次再叫 userListTemplate(userList)的时候，你就直接返回给它。
就写作这么一小段 JS 就足够了。
至于服务器端，可以用php,asp,ruby,java 随便什么都无所谓。
恕我直言，你的理解很多是错的。
15 楼 avidmouse 2009-04-10 jindw 写道zozoh 写道你实际上是把HTML模板，变成一个 JS 函数，这个函数返回的是字符串。 每次对这个jsp的请求，你就会编译一遍。
我的想法大概是这样的：
当用户请求你的网页的时候，你根本不输出 <c:client id="userListTemplate "> 这段内容，
如果当用户调用 userListTemplate(userList) 你就向服务器发请求，请求一个叫 userList 的模板，拿下来，存在 window 对象上，下次再叫 userListTemplate(userList)的时候，你就直接返回给它。
就写作这么一小段 JS 就足够了。
至于服务器端，可以用php,asp,ruby,java 随便什么都无所谓。
恕我直言，你的理解很多是错的。
很多是错的，很多指什么？没有申明这个变量吧？ 16 楼 jindw 2009-04-10 其实也就是一些认识上的先入为主的误区。我上面讲的也不清楚，我罗列一下吧：
1.“jsp的请求”，“必须泡在JSP环境下”
这是一个跨平台的模板引擎，就算在Java环境上用，现在也没有支持jsp的tag，和jsp一点关系都扯不上。
2.“每次对这个jsp的请求，你就会编译一遍”
为什么要这么做呢？这个猜测一定事拍屁股想出来的，^_^。
3.“你根本不输出 <c:client id="userListTemplate "> 这段内容”
其实，上面贴出的例子中也完全可以看出来，这里并没有这种内容的输出(可能我理解错了)。
对于有工作经验的人，很容易犯先入为主的错误，我也经常犯类似错误，呵呵。
比如：
一提Java，就是JSP。
一看到xml，名称空间 就会想起jsp taglib。
一想起jsptaglib实现，就会认为他每次都会跑一遍。
一想到模板，他一定在服务端运行。前端XHR请求数据
一想起前端模板，他一定要在前端解析。
avidmouse 写道jindw 写道zozoh 写道你实际上是把HTML模板，变成一个 JS 函数，这个函数返回的是字符串。 每次对这个jsp的请求，你就会编译一遍。
我的想法大概是这样的：
当用户请求你的网页的时候，你根本不输出 <c:client id="userListTemplate "> 这段内容，
如果当用户调用 userListTemplate(userList) 你就向服务器发请求，请求一个叫 userList 的模板，拿下来，存在 window 对象上，下次再叫 userListTemplate(userList)的时候，你就直接返回给它。
就写作这么一小段 JS 就足够了。
至于服务器端，可以用php,asp,ruby,java 随便什么都无所谓。
恕我直言，你的理解很多是错的。
很多是错的，很多指什么？没有申明这个变量吧？
17 楼 zozoh 2009-04-10 引用其实也就是一些认识上的先入为主的误区。我上面讲的也不清楚，我罗列一下吧：
1.“jsp的请求”，“必须泡在JSP环境下”
这是一个跨平台的模板引擎，就算在Java环境上用，现在也没有支持jsp的tag，和jsp一点关系都扯不上。
咳，是这样的啊，的确理解错了。
引用2.“每次对这个jsp的请求，你就会编译一遍”
为什么要这么做呢？这个猜测一定事拍屁股想出来的，^_^。
嗯，这个是我说错了。顺嘴就说了，呵呵。
引用
3.“你根本不输出 <c:client id="userListTemplate "> 这段内容”
其实，上面贴出的例子中也完全可以看出来，这里并没有这种内容的输出(可能我理解错了)。
看来你没明白我的意思是说，根本不输出 <c:client id="userListTemplate "> 编译后的 javascript 内容
引用对于有工作经验的人，很容易犯先入为主的错误，我也经常犯类似错误，呵呵。
比如：
一提Java，就是JSP。
想问问，你的模板解析在什么时候做的呢？ 在编译时，还是在运行时？
引用一看到xml，名称空间 就会想起jsp taglib。
你的 c: 看来是 client 的意思，哈哈，我说怎么和 jstl 重了呢
引用一想起jsptaglib实现，就会认为他每次都会跑一遍。
taglib 是会和 jsp 代码一起变成 java 代码，在被编译成 class， 这个class 中你 taglib 变成的那段 java 调用每次请求都要走一遍，有什么错吗？
引用一想到模板，他一定在服务端运行。前端XHR请求数据
一想起前端模板，他一定要在前端解析。
这个我就不好说什么了，呵呵
18 楼 jindw 2009-04-13 这就是沟通的误差，往往必须反复多次才能减少这种误差，呵呵。
zozoh 写道
引用对于有工作经验的人，很容易犯先入为主的错误，我也经常犯类似错误，呵呵。
比如：
一提Java，就是JSP。
想问问，你的模板解析在什么时候做的呢？ 在编译时，还是在运行时？
没错，实在编译时完成的，不过，这个编译过程可以在程序运行中第一次使用的时候编译。
java和js版本现在是自己编译，php版本可以通过java提供的编译服务远程编译，现在可以直接使用 http://litecompiler.appspot.com的编译服务。
zozoh 写道
引用一看到xml，名称空间 就会想起jsp taglib。
你的 c: 看来是 client 的意思，哈哈，我说怎么和 jstl 重了呢
还是错了，c:不是 client的意思，我之所以取名c 确实是受jstl影响，不过我更愿意把它理解成condition，但是，现在加上 client之后，condition已经不止condition的意思了，还是叫core吧，呵呵
zozoh 写道
引用一想起jsptaglib实现，就会认为他每次都会跑一遍。
taglib 是会和 jsp 代码一起变成 java 代码，在被编译成 class， 这个class 中你 taglib 变成的那段 java 调用每次请求都要走一遍，有什么错吗？
影响中jsp的taginf好像可以插入一些申明代码，我想可能也能插入一些静态内容吧，我也没怎么用过，不敢乱说。
不过我我在Lite中的编译是直接吧编译后的js静态插入到中间代码中的，也就是说，吧模板翻译成脚本的工作不会做第二次。
19 楼 nihongye 2009-04-21 编译成js函数，有什么用? 20 楼 jindw 2009-04-21 nihongye 写道编译成js函数，有什么用?
什么用处就在于自己去发掘了。呵呵
目前主要用在需要在前端组装ui的运用中，比如自定义首页那类。
当然也不都是那么极端，我觉得只要需要局部刷新的富客户端运用，都可以尝试。
数据模型也不一定非要服务端给，对于复杂的前端运用来说。
客户端完全应该有一个自己的数据模型，针对模型编程，而不是针对ui编程。 21 楼 jiazhigang 2009-04-21 xml早就有这个技术了，何必另起炉灶。
