JavaScript模板引擎模板射流研究…使用详解

时间：2021-09-06 来源：互联网编辑：宝哥软件园浏览：次

模板。射流研究…一款Java脚本语言模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的超文本标记语言片段，渲染不同的效果。https://github.com/aui/artTemplate

1、特性

(1)、性能卓越，执行速度通常是髭与tmpl的20 多倍（性能测试)(2)、支持运行时调试，可精确定位异常模板所在语句（演示)

(3)、对NodeJS快递友好支持(4)、安全，默认对输出进行转义、在沙箱中运行编译后的代码（节点版本可以安全执行用户上传的模板)

(5)、支持包括语句

(6)、可在浏览器端实现按路径加载模板（详情)

(7)、支持预编译，可将模板转换成为非常精简的射流研究…文件

(8)、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选

(9)、支持所有流行的浏览器

2、语法

(1)、使用

引用简洁语法的引擎版本，例如：脚本src=' http :列表/模板。js '/脚本

(2)、表达式

{{ 与}} 符号包裹起来的语句则为模板的逻辑表达式。

(3)、输出表达式

对内容编码输出：{{content}}不编码输出：{{#content}}编码可以防止数据中含有超文本标记语言字符串，避免引起XSS攻击。

(4)、条件表达式

{ { if admin } } padmin/p { { else if code 0 } } pm aster/p { { else } } perror！/p {{/if}} (5)、遍历表达式

无论数组或者对象都可以用每个进行遍历。

{{每个列表作为值索引}}李{ { index } }-{ { value。用户} }/李{ {/每个} }亦可以被简写：

{{每个列表} }李{ { $ index } }-{ $ value。用户} }/李{ {/每个}} (6)、模板包含表达式

用于嵌入子模板。

{ {包含模板名称' }}

子模板默认共享当前数据，亦可以指定数据：{ {包含"模板名称"新闻列表}}

(7)、辅助方法

使用template.helper(名称，回调)注册公用辅助方法：

template.helper('dateFormat '，函数（日期，格式){ //.返回值；});模板中使用的方式：{ {时间|日期格式： ' yyyy-MM-DD hh :MM :s ' } }支持传入参数与嵌套使用：{ { time | say : ' CD | | ubb | link } }

3、实例

！DOCTYPE HTML HTML头元字符集=' UTF-8 '标题基本-演示/标题脚本src=' http :/dist/模板。js '/script/head body div id=' content '/div script id=' test ' type=' text/html ' { if isAdmin } } h1 { { title } }/h1 ul { }每个列表作为值i}} li索引{ { I 1 } }:{ { value } }/Li { {/每个} }/ul { {/if } }/script script var data={ title : '基本例子，isAdmin: true，list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] };var html=模板(“测试”，数据);文件。getelementbyid(' content ').innerHTML=html/脚本/正文/html

！DOCTYPE HTML HTML头元字符集=' UTF-8 '标题无转义-演示/标题脚本src=' http :/dist/模板。js '/脚本/头体h1不转义HTML/h1 div id='content'/div脚本id='test' type='text/html' p不转义：{{#value}}/p p默认转义：{ { value } }/p/script script var data={ value : ' span style=' color : # F00 ' hello world！/span ' }；var html=模板(“测试”，数据);文件。getelementbyid(' content ').innerHTML=html/脚本/正文/html

！DOCTYPE HTML HTML头元字符集=' UTF-8 '标题包括-演示/标题脚本src=' http :/dist/模板。js '/script/head body div id=' content '/div script id=' test ' type=' text/html ' h1 { { title } }/h1 { { include ' list ' }/script script id=' list ' type=' text/html ' ul { }每个列表作为值i}} li索引{ { I 1 } }:{ { value } }/Li { {/每个} }/ul/脚本var数据={ title : '嵌入子模板，列表： ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] };var html=模板(“测试”，数据);文件。getelementbyid(' content ').innerHTML=html/脚本/正文/html

！DOCTYPE HTML HTML头元字符集=' UTF-8 '标题助手-演示/标题脚本src=' http :/dist/模板。js '/脚本/头体h1辅助方法/h1 div id='content'/div脚本id=' test ' type=' text/html ' { time | date format : ' yyyy年梅智节拍器月截止日期(截止日期的缩写)日hh :mm :s ' } }/脚本脚本/** *对日期进行格式化，* @参数日期要格式化的日期* @param格式进行格式化的模式字符串* 支持的模式字母有：* y:年，* M:年中的月份(1-12)，* d:月份中的天(1-31)，* h:小时(0-23)，* m:分(0-59)，* s:秒(0-59)，* S:毫秒(0-999)，* q:季度(1-4)* @返回字符串* @作者yanis。王* @参见http://yaniswang。com/frontend/2013/02/16/date form-performance/*/template。助手('日期格式'，函数(日期，格式){ if(日期类型==' String '){ var MTS=Date。匹配(/(\/Date(\ d)\/)/))；if(MTS MTS . length=3){ date=parsent(MTS[2])；} }日期=新日期(日期)；if(！日期| |日期。toutstring()=="无效日期" { return} var map={ ' M ' :日期。getmonth()1，//月份d': date.getDate()，//日h': date.getHours()，//小时m': date.getMinutes()，//分s': date.getSeconds()，//秒q ' :数学。楼层((日期。GetMountry)(3)/3)、//季度S ' :毫秒()//毫秒};格式=格式。替换(/([yMdhmsqS])/g，函数(all，t){ var v=map[t]；if(v！==未定义){ if(all)。长度1){ v=' 0 ' v；v=v . substr(v . length-2)；}返回五；} else if(t==' y '){ return(date。getfullyear()' ').substr(4-all。长度)；}全部返回；});返回格式；});//- var数据={ time: 1408536771253，}；var html=模板(“测试”，数据);文件。getelementbyid(' content ').innerHTML=html/脚本/正文/html