星空网 > 软件开发 > 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='/images/loading.gif' data-original="<%=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);

效果

doT js 模板引擎【初探】要优雅不要污

 

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

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

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

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

 

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




原标题:doT js 模板引擎【初探】要优雅不要污

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

韩国市场暗藏的商机:https://www.ikjzd.com/articles/116784
学习|Amazon's Choice如何玩?:https://www.ikjzd.com/articles/116785
亚马逊运营之如何删除差评:https://www.ikjzd.com/articles/116786
干货|亚马逊listing经常被下架?解决步骤在此!:https://www.ikjzd.com/articles/116787
无人销售Amazon Go进军社区零售市场:https://www.ikjzd.com/articles/116788
号称是美版拼多多的电商平台Brandless,目前已裁员90%:https://www.ikjzd.com/articles/116789
3月独立站新品观察:比基尼、连衣裙、凉鞋、止汗霜等夏季新品热推! :https://www.kjdsnews.com/a/1836553.html
3月独立站新品观察:比基尼、连衣裙、凉鞋、止汗霜等夏季新品热推! :https://www.goluckyvip.com/news/188216.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流