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'%>