介绍JavaScript的一个微型模版_基础知识

// 简单JavaScript模板引擎
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
 var cache = {};
 
 this.tmpl = function tmpl(str, data){
  // 判断我们是否已经有这么一个模板，或者我们需要载入模板
  // 并保证把结果保存到缓存中。
  var fn = !/W/.test(str) ?
   cache[str] = cache[str] ||
    tmpl(document.getElementById(str).innerHTML) :
   
   // 生成一个可重用的函数，用于提供模板生成功能
   // (它会被记录到缓存内).
   new Function("obj",
    "var p=[],print=function(){p.push.apply(p,arguments);};" +
    
    // 通过with(){}把数据作为本地变量引入
    "with(obj){p.push('" +
    
    // 把模板转换未纯javascript代码
    str
     .replace(/[
	
]/g, " ")
     .split("<%").join("	")
     .replace(/((^|%>)[^	]*)'/g, "$1
")
     .replace(/	=(.*&#63;)%>/g, "',$1,'")
     .split("	").join("');")
     .split("%>").join("p.push('")
     .split("
").join("\'")
   + "');}return p.join('');");
  
  // 给用户提供一些基本的柯里化功能
  return data &#63; fn( data ) : fn;
 };
})();

<script type="text/html" id="item_tmpl">
 <div id="<%=id%>" class="<%=(i % 2 == 1 &#63; " even" : "")%>">
  <div class="grid_1 alpha right">
   @@##@@"/>
  </div>
  <div class="grid_6 omega contents">
   <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10497">
                            <img src="https://img.php.cn/upload/webcode/000/000/019/176240880217401.jpg" alt="医院网站系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10497">医院网站系统</a>
                            <p>HTML医院网站系统基于PHP+MYSQL开发，在文章内容网站的基础上，预设了医院概况、新闻动态、环境设备、名医荟萃、专科介绍、就医指南、专家门诊值班表、网上挂号、医疗保健知识、在线咨询等医院网站常用的栏目和测试数据，采用适合医院网站的专用模版，增强了系统的针对性和易用性。系统具有文章、图文、下载、社区、表单、用户等基本系统模块和一系列网站辅助功能，用户也可根据自身特点任意创建和修改栏目，适合创建</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="医院网站系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10497" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="医院网站系统">
                        </a>
                    </div>
                
  </div>
 </div>
</script>

<script type="text/html" id="user_tmpl">
 <% for ( var i = 0; i < users.length; i++ ) { %>
  <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
 <% } %>
</script>

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

var show_user = tmpl("item_tmpl"), html = "";
for ( var i = 0; i < users.length; i++ ) {
 html += show_user( users[i] );
}