template.js前端模板引擎使用详解


Posted in Javascript onOctober 10, 2017

本文介绍了template.js前端模板引擎使用,分享给大家,具体如下:

下载地址:https://github.com/yanhaijing/template.js

作者编写的文档:https://github.com/yanhaijing/template.js/blob/master/README.md

源码学习

默认的开始标签和结束标签分别是:

  1. sTag: '<%',//开始标签,可以重写,我项目中使用的是<:
  2. eTag: '%>',//结束标签,我项目中使用的是:>

快速上手

编写模板

使用一个type=”text/html”的script标签存放模板,或者放到字符串中:

<script id="tpl" type="text/html">
<ul>
  <%for(var i = 0; i < list.length; i++) {%>
  <li><%:=list[i].name%></li>
  <%}%>
</ul>
</script>

渲染模板

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

输出:

<ul>
  <li>yan</li>
  <li>haijing</li>
</ul>

转义

<script id="tpl" type="text/html">
  <table>
    <caption>for循环输出两次</caption>
    <%var test = '输出自定义变量';%>
    <%for (var i = 0; i < 2; i++) {%>
      <tr><td><%=html%>默认</td><td><%=html%></td></tr>
      <tr><td><%:h=html>html转义</td><td><%:h=html%></td></tr>
      <tr><td><%:=html>不转义</td><td><%:=html%></td></tr>
      <tr><td><%:u=url>URI转义</td><td><%:u=url%></td></tr>
      <tr><td>var</td><td><%:=test%></td></tr>
      <tr><td><%=test + 1>表达式</td><td><%=test + 1%></td></tr>
      <%if (true) {%>
        <tr><td>if</td><td>if 语句</td></tr>
      <%}%>
      <tr><td>分割线</td><td>------------------------------</td></tr>
    <%}%>
  </table>
  </script>
  <script src="../template.js"></script>
  <script>
  var html = template(document.getElementById('tpl').innerHTML, {
    url: 'http://yanhaijing.com?name=颜海镜', 
    html: '<div id="test">template.js "</div>'
  });
  console.log(html);
  document.getElementById('wp').innerHTML = html;
  </script>
<script>
  template.config({sTag: '<#', eTag: '#>'});
  var tpl1 = '<div><#:=name#></div>';
  console.log('<##>:', template(tpl1, {name: '更改tag<##>'}));
  template.config({sTag: '{{', eTag: '}}'});
  var tpl1 = '<div>{{:=name}}</div>';
  console.log('{{}}:', template(tpl1, {name: '更改tag{{}}'}));
  template.config({sTag: '<%', eTag: '#>'});
  var tpl1 = '<div><%:=name#></div>';
  console.log('<%#>:', template(tpl1, {name: '不一致也可以哦,更改tag<%#>'})); 
  template.config({sTag: '<%', eTag: '%>', compress: true});
  var tpl1 = '<div>空格会被压缩 空格 空格</div>';
  console.log('compress:', template(tpl1, {}));  
  template.config({sTag: '<%', eTag: '%>', escape: false});
  var tpl1 = '<div>默认输出不进行转义<%=html%></div>';
  console.log('escape:', template(tpl1, {html: '<div>html</div>'}));
  </script>

注册函数

<div id="wp"></div>
  <script id="tpl" type="text/html">
  <%=dateFormat(Date.now(), 'yyyy年 MM月 dd日 hh:mm:ss')%>
  </script>
  <script src="../template.js"></script>
  <script>
    template.registerFunction('dateFormat', function (date, format) {
      date = new Date(date);
      var map = {
        "M": date.getMonth() + 1, //月份 
        "d": date.getDate(), //日 
        "h": date.getHours(), //小时 
        "m": date.getMinutes(), //分 
        "s": date.getSeconds(), //秒 
        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
        "S": date.getMilliseconds() //毫秒 
      };
      format = format.replace(/([yMdhmsqS])+/g, function(all, t){
        var v = map[t];
        if(v !== undefined){
          if(all.length > 1){
            v = '0' + v;
            v = v.substr(v.length-2);
          }
          return v;
        }
        else if(t === 'y'){
          return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
      });
      return format;
    });
    console.log(template.registerFunction());
    console.log(template.registerFunction('dateFormat'));
  </script>
  <script>
  var html = template(document.getElementById('tpl').innerHTML, {});
  console.log(html);
  document.getElementById('wp').innerHTML = html;
  template.unregisterFunction('dateFormat');
  console.log(template.registerFunction('dateFormat'));
  </script>
 
<div id="wp"></div>
  <script id="tpl" type="text/html">
  <%:up='yanhaijing'%>
  </script>
  <script src="../template.js"></script>
  <script>
    template.registerModifier('up', function (str) {
      return str.toUpperCase();
    });
    console.log(template.registerModifier());
    console.log(template.registerModifier('up'));
  </script>
  <script>
  var html = template(document.getElementById('tpl').innerHTML, {});
  console.log(html);
  document.getElementById('wp').innerHTML = html;
  template.unregisterModifier('up');
  console.log(template.registerModifier('up'));
  </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
AngularJS中table表格基本操作示例
Oct 10 #Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 #Javascript
JavaScript实现计数器基础方法
Oct 10 #Javascript
JS实现合并json对象的方法
Oct 10 #Javascript
jQuery实现的form转json经典示例
Oct 10 #jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 #Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 #Javascript
You might like
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
php支付宝APP支付功能
2020/07/29 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
中专自我鉴定
2014/02/05 职场文书
完美的中文自荐信
2014/05/24 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
2015年工商所工作总结
2015/05/21 职场文书
家庭贫困证明
2015/06/16 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android