推荐javascript简单模板
jquery老大写的。
在模板里用类似jsp的语法写。可以减少大量使用+来拼接。且效率很高。
使用方法：
tmpl(模板html,json数据串) 
2. [代码][JavaScript]代码
01 |
// Simple JavaScript Templating |
02 |
// John Resig - http://ejohn.org/ - MIT Licensed |
03 |
(function(){ |
04 |
var cache = {}; |
05 |
this.tmpl = function tmpl(str, data){ |
06 |
// Figure out if we're getting a template, or if we need to |
07 |
// load the template - and be sure to cache the result. |
08 |
var fn = !/\W/.test(str) ? |
09 |
cache[str] = cache[str] || |
10 |
tmpl(document.getElementById(str).innerHTML) : |
11 |
// Generate a reusable function that will serve as a template |
12 |
// generator (and which will be cached). |
13 |
new Function("obj", |
14 |
"var p=[],print=function(){p.push.apply(p,arguments);};" + |
15 |
// Introduce the data as local variables using with(){} |
16 |
"with(obj){p.push('" + |
17 |
// Convert the template into pure JavaScript |
18 |
str |
19 |
.replace(/[\r\t\n]/g, " ") |
20 |
.split("<%").join("\t") |
21 |
.replace(/((^|%>)[^\t]*)'/g, "$1\r") |
22 |
.replace(/\t=(.*?)%>/g, "',$1,'") |
23 |
.split("\t").join("');") |
24 |
.split("%>").join("p.push('") |
25 |
.split("\r").join("\\'") |
26 |
+ "');}return p.join('');"); |
27 |
// Provide some basic currying to the user |
28 |
return data ? fn( data ) : fn; |
29 |
}; |
30 |
})(); |
3. [代码][JavaScript]代码 跳至 [2] [3] [全屏预览]
01 |
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[ |
02 |
$(document).ready(function(){ |
03 |
var json = |
04 |
{ |
05 |
"key":"1", |
06 |
"datas": |
07 |
[{"k":"v1","k2":"v2"}], |
08 |
"test_if":true, |
09 |
"test_for_datas":[1,2,3,4,5,6,7,8,9,10] |
10 |
}; |
11 |
var tmp = 'key:<%=key%></br>'+ |
12 |
'datas: |
13 |
<ul> |
14 |
<li><%=datas[0].k%></li> |
15 |
<li><%=datas[0].k2%></li> |
16 |
</ul> |
17 |
'+ |
18 |
'test_if:'+ |
19 |
'<%if(test_if){%>'+ |
20 |
'成立'+ |
21 |
'<%}else{%>'+ |
22 |
'失败'+ |
23 |
'<%}%>'+ |
24 |
'</br>'+ |
25 |
'循环:'+ |
26 |
'<%for(var i=0;i<test_for_datas.length;i++){%>'+ |
27 |
'<%=test_for_datas[i]%>'+ |
28 |
'<%}%>'; |
29 |
$("#conent").html(tmpl(tmp,json)); |
30 |
}); |
31 |
// ]]></script> |
