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滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
详谈javascript中的cookie
Jun 03 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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
php MySQL与分页效率
2008/06/04 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python opencv如何实现图片绘制
2020/01/19 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
使用Python构造hive insert语句说明
2020/06/06 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Python生成器generator原理及用法解析
2020/07/20 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
遗体告别仪式主持词
2014/03/20 职场文书
伦敦奥运会口号
2014/06/13 职场文书
借款民事起诉状范文
2015/05/19 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers