微型js模版,15行代码,JS代码库,德仔网

代码语言

代码分类

【JS】微型js模版,15行

作者:wmlgl / 发布于2013/11/21/ 402

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript template, wmlgl, oschina.com</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
function mtpl(templ) {
 var lines = [], i = 0;
 var render = new Function('__l,options'
   , ('var out=[]\nout.write=out.push\nwith(options){#>'+templ+'<#}\nreturn out.join("")')
     .replace(/<#=((:?.|\s)*?)#>/g,'<#out.write($1)#>')
     .replace(/#>(?:.|\s)*?<#/g, function(match) {
       lines.push(match.substring(2,match.length-2));
       return '\nout.write(__l['+(i++)+'])\n';
      }));
 templ = i = null;
 return function(options) {
  return render(lines, options);
 };
}
$(function(){
 // example：
 var data = {
  formatTime: function(ts){ var date = new Date(ts); return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(); },
  formatTag: function(tags){ return tags?tags.join(','):""; },
  bookMarks: "嘟嘟书店",
  books:[{
   name: "被遗忘的魔王",
   author: "清水鱿鱼",
   price: 100,
   updateTime: new Date().getTime(),
   tags: ['xxoo','yy','mm','sm'],
   desc: "魔王称霸后宫壮大"
  },{
   name: "神誓宣言",
   author: "清水鸡蛋",
   price: 200,
   updateTime: new Date().getTime(),
   tags: ['yy','mm','抖M'],
   desc: "候选神使与S mm们"
  }]
 };
 
 ts = new Date().getTime();
 for ( var i = 0; i < 100; i++) {
  tplBookList = mtpl($('#body').html());
  $('#list').html(tplBookList(data));
 }
 $('#test1').html("测试100次用时(每次都是重新读取编译): " + (new Date().getTime()-ts));
 
 ts = new Date().getTime();
 tplBookList = mtpl($('#body').html());
 for ( var i = 0; i < 100; i++) {
  $('#list').html(tplBookList(data));
 }
 $('#test2').html("测试100次用时(缓存第一次编译): " + (new Date().getTime()-ts));
});
</script>
<style type="text/css">
</style>
<!-- 模版开始, 使用script做模版是避免尖括号被浏览器转义  -->
<script id="body" type="text/template">
<h3>欢迎光临<#=bookMarks#>, 现在是: <#=Date() #></h3>
<#
 $.each(books, function(i, book) { #>
  
   <b><#=(i+1)+'.'/*第一种输出*/#></b>
   <hr/>
   <div><strong>书名:</strong><em><b><#out.write('《',book.name,'》')//第二种输出#></b></em></div>
   <div><strong>价格:</strong><em style="color:red"><#=book.price#></em></div>
   <div><strong>作者:</strong><em><#=book.author#></em></div>
   <div><strong>更新:</strong><em><#=formatTime(book.updateTime)#></em></div>
   <div><strong>标签:</strong><em><#=formatTag(book.tags)#></em></div>
   <div><strong>简介:</strong><em><#=book.desc#></em></div>
  
 <# });
#>----------------------------------------------------------------------------
</script>
<!-- 模版结束 -->
</head>
<body style="font-size: 0.8em">
<div id="test1"></div>
<div id="test2"></div>
<div id="list"></div>
</body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　微型js模版　

同语言下

可能有用的

wmlgl贡献的其它代码(1)

.微型js模版,15行