原生js模板语法之underscore.js

首先引入依赖文件

  /*
  *引入jq
  */
  <script src="js/jquery-3.6.0.min.js"></script>
  /*
  *引入模板依赖js
  */
 <script src="js/underscore-1.13.1.min.js"></script>

注意：使用underscore时，内容不是写在body标签里

  <javascript type="text/template" id="tpl">
      //这里面放的是页面的内容部分
      //for循环语法
      <ul>
         <% for(var i=0;i<data.leftCont.length;i++){ %>
            <% var item = leftCont[i]%>
                <li><%=item.title%></li>
         <% } %>
      </ul>
      //普通语法
      <p><%=right%></p>
  </javascript>
  <javascript>
     //获取渲染元素和模板内容
     var element = $('body');
     var tpl = $('#tpl').html();
     var data = {
        //这个data的用法与vue中的相似，在里面可以自己定义json数据
        //例如
         leftCont:[
           {title:"业务服务热线",tel:"0000-1111111"},
           {title:"客服服务热线",tel:"0000-1111111"},
           {title:"技术服务热线",tel:"0000-1111111"}
       ],  
        right:"hello world"
    }
    var rander = _.template(tpl);
    var html = rander(data);
    //将解析后的内容填充到渲染元素
    element.html(html);
  </javascript>

注:如果请求数据慢的话 会导致页面空白或者报错 原因是解析模板放在了请求数据之前 在数据没有请求过来就解析完成了 解决方法是模板解析延迟执行。