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 相关文章推荐
jQuery中remove()方法用法实例
Dec 25 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
js实现网页定位导航功能
Mar 07 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
canvas 中如何实现物体的框选
Aug 05 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
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python安装scipy的步骤解析
2019/09/28 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
新年联欢会主持词
2014/03/27 职场文书
地球一小时倡议书
2014/04/15 职场文书
中学生操行评语
2014/04/24 职场文书
兴趣小组活动总结
2014/05/05 职场文书
企业授权委托书范本
2014/09/22 职场文书
商业门面租房协议书
2014/11/25 职场文书
个人借条范本
2015/05/25 职场文书
红色经典电影观后感
2015/06/18 职场文书