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

前端之家收集整理的这篇文章主要介绍了template.js前端模板引擎使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了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标签存放模板,或者放到字符串中:

<%for(var i = 0; i < list.length; i++) {%>
  • <%:=list[i].name%>
  • <%}%>

    渲染模板

    输出

  • yan
  • haijing
  • 转义

    for循环输出两次 <%var test = '输出自定义变量';%> <%for (var i = 0; i < 2; i++) {%> 默认html转义不转义URI转义表达式
    template.config({sTag: '<#',eTag: '#>'}); var tpl1 = '
    <#:=name#>
    '; console.log('<##>:',template(tpl1,{name: '更改tag<##>'})); template.config({sTag: '{{',eTag: '}}'}); var tpl1 = '
    {{:=name}}
    '; console.log('{{}}:',{name: '更改tag{{}}'})); template.config({sTag: '<%',eTag: '#>'}); var tpl1 = '
    <%:=name#>
    '; console.log('<%#>:',{name: '不一致也可以哦,更改tag<%#>'})); template.config({sTag: '<%',eTag: '%>',compress: true}); var tpl1 = '
    空格会被压缩 空格 空格
    '; console.log('compress:',{})); template.config({sTag: '<%',escape: false}); var tpl1 = '
    默认输出不进行转义<%=html%>
    '; console.log('escape:',{html: '
    html
    '}));

    注册函数

    <div id="wp">


    <script id="tpl" type="text/html">
    <%:up='yanhaijing'%>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的JavaScript相关文章