领星动网编程开发之爆炸小宇宙

cnitblog.com/lxasp - - 有一种信念叫做编程
posts - 54, comments - 34, trackbacks - 0, articles - 0
<script id="tpl" type="text/html">
<ul>
    
<% for (var i = 0, l = data.list.length; i < l; i ++) { %>
        
<li>用户: <%=data.list[i].user%> / 网站:<%=data.list[i].site%>'tmp'%</li>//
    <% };var j=(i===2)?i:'j'; /*只能这样注释不能用双斜杠哦!*/ %><%=j%>
</ul>
</script>

<div id="view"></div>

<script>
$=function(n){return document.getElementById(n)};

function tpl (str) {
    
return new Function("data""_",            /*定义函数的参数,"data"=输入数据,"_"=输出结果字符串*/
    
"_='';_+=" + "'"                            /*构造函数体内容*/
    
+ str.replace(/[\r\t\n]/g, " ")             /*替换全部回车符、换行符和制表符,这样有一个问题是脚本内不能出现双斜杠注释*/
       .replace(/'(?=[^%]*%>)/g,"\t")           /*将脚本代码内的单引号临时替换为制表符*/
       .split("'").join("\\'")                  /*将脚本代码外的单引号转换为"输出结果字符串"内的单引号*/
       .split("\t").join("'")                   /*将脚本代码内的制表符替换回去为单引号*/
       .replace(/<%=(.+?)%>/g, "';_+=$1;_+='")  /*用数据替换模板的<%=xxx%>变量*/
       .split("<%").join("';")                  /*将起始标签替换为"输出结果字符串"的结尾并开始新的"脚本代码部分"*/
       .split("%>").join("_+='")               /*将结束标签替换为开始新的"输出结果字符串"*/
    
+ "'; return _;"                            /*加上"输出结果字符串"的结尾,并返回*/
   );
}

$('view').innerHTML=tpl($('tpl').innerHTML)({list:[{user:"u1",site:"s1"},{user:"u2",site:"s2"}]});
</script>

其实<%%>这种标签在ASP/JSP环境下都有使用,容易造成冲突,建议换成<##>。其实#号在编程语言里使用率算底的,通常也就CSS用得多一些。用文本编辑器的替换功能将以上代码的全部%替换为#也是很方便的哦!修改后的代码如下:

<script id="tpl" type="text/html">
<ul>
    
<for (var i = 0, l = ul.li.length; i < l; i ++) { #>
        
<li>用户: <#=ul.li[i].user#> / 网站:<#=ul.li[i].site#>'tmp'#</li>//
    <# };var j=(i===2)?i:'j'; /*禁用双斜杠注释*/ #><#=j#>
</ul>
</script>

<div id="view"></div>

<script>
$=function(n){return document.getElementById(n)};

function tpl (str,dat) {
    
if(typeof(dat)==="undefined")dat="ul";
    
return new Function(dat, "_",               /*定义函数的参数,"data"=输入数据,"_"=输出结果字符串*/
    
"_='';_+=" + "'"                            /*构造函数体内容*/
    
+ str.replace(/[\r\t\n]/g, " ")             /*替换全部回车符、换行符和制表符,这样有一个问题是脚本内不能出现双斜杠注释*/
       .replace(/'(?=[^#]*#>)/g,"\t")           /*将脚本代码内的单引号临时替换为制表符*/
       .split("'").join("\\'")                  /*将脚本代码外的单引号转换为"输出结果字符串"内的单引号*/
       .split("\t").join("'")                   /*将脚本代码内的制表符替换回去为单引号*/
       .replace(/<#=(.+?)#>/g, "';_+=$1;_+='")  /*用数据替换模板的<#=xxx#>变量*/
       .split("<#").join("';")                  /*将起始标签替换为"输出结果字符串"的结尾并开始新的"脚本代码部分"*/
       .split("#>").join("_+='")                /*将结束标签替换为开始新的"输出结果字符串"*/
    
+ "'; return _;"                            /*加上"输出结果字符串"的结尾,并返回*/
  );
}

$('view').innerHTML=tpl($('tpl').innerHTML)({li:[{user:"u1",site:"s1"},{user:"u2",site:"s2"}]});
</script>

 

只有注册用户登录后才能发表评论。