你的位置:首页 > Java教程

[Java教程]doT js 模板引擎【初探】要优雅不要污


  js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎。

  JavaScript 模板引擎

  JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注。

  常见模板引擎  

  baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate等

  为什么选择doT:

  doT.js 快速,小巧且毫无依赖,源js文件只有140行。下载地址 github。

  兼容性、性能对比详情见,各种JS模板引擎对比数据(高性能JavaScript模板引擎),我就不在copy过来了。

  开始

  1、安装

  github下载doT.js,使用页面引用即可。

  2、使用

  这里就不写基本的使用了,直接上项目中的代码,html部分

<ul class="kucunlist" id="ulList">                <script id="j-tmpl" type="text/template">    {{ if(it.length>0){ }}        {{ for (var i = 0, l = it.length; i < l; i++) {}}      <li class="border-tb tbox" onclick="location.href='<%=basePath%>/query/stock/toQueryProductStock.action?piNo={{=it[i].pi_no}}'">        <div>          <img src="<%=imgServerPath %>{{=it[i].pi_imgpath}}">        </div>                <div class="arrow-right">          <h5 class="ellipsis-t"><i>{{=it[i].pi_no}}</i>{{=it[i].pi_name}}</h5>          <p>{{=it[i].ct_name}} {{=it[i].bd_name}}</p>          <p><b>价格:¥{{=it[i].pi_retailprice}}</b> | <b>库存:{{=it[i].amount}}</b></p>        </div>      </li>      {{ } }}    {{ } else { }}      <li class="border-tb tbox">         <h2>未检索到数据</h2>      </li>    {{ } }}  </script></ul>      

js部分,data为json数据。

var tmpl = document.getElementById('j-tmpl').innerHTML;document.getElementById('ulList').innerHTML=doT.template(tmpl)(data);

效果

 

在这个网页输入你的模板、数据可以看到执行结果。

刚开始使用无法给出更多有用的建议,凡事都是双刃剑,也许后面会有坑,但是它给我带来的更好的维护性、可读性。

140行的源码,有需求满足不了或者遇到源码无法解决的问题,可以把源码消化消化,对其进行扩展。

结语:好东西还是要勇敢尝试,已经开始在项目中使用doT,后面会有更复杂的使用环境,会持续对doT在项目中的使用、问题、解决,进行记录。

 

分享是一种精神,学习仍需坚持,进步仍需努力。