doT.js适用于混合开发的模板引擎

一个适用于混合开发的模板引擎
最近通过Apicloud开发App,使用了Apicloud提供的api.js和doT.js
doT.js框架下载地址： https://github.com/olado/doT
doT.js官方说明文档：http://jinlong.github.io/doT/

1、特点是快,小,无依赖其他插件
2、常用语法

{{ }}     for evaluation 模板标记符
{{= }}    for interpolation 输出显示，默认变量名叫it
{{! }}    for interpolation with encoding 编码后输出显示
{{? }}    for conditionals 条件分支，if条件的简写
{{~ }}    for array iteration 遍历数组

//使用步骤
数据源  ： json
模板 ：   数据显示的格式
区域 ：   数据显示的位置
调用方试 ： 填充数据

{{ }} for evaluation 模板标记符

{{= }} for interpolation 输出显示，默认变量名叫it

{{! }} for interpolation with encoding 编码后输出显示

{{? }} for conditionals 条件分支，if条件的简写

{{~ }} for array iteration 遍历数组

//使用步骤

数据源： json

模板：数据显示的格式

区域：数据显示的位置

调用方试：填充数据

3、在Safari模板引擎渲染速度测试

完整的doT.js在页面中使用的例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>php笔记_https://www.phpnote.cc</title>
</head>
<body>
	<!--  赋值 -->
	<script id="interpolationTemp" type="text/x-dot-template" >
		<h1> hello {{=it.name}} </h1>
	</script>
	<div id="interpolation"></div><hr />
	<!--  循环 -->
	<script id="evaluationTemp" type="text/x-dot-template">
		{{ for(var x in it) { }}
			<p>{{= x }} - > {{= it[x] }}</p>
		{{ } }}
	</script>
	<div id="evaluation"></div><hr />
	<!--  迭代 -->
	<script id="interationTemp" type="text/x-dot-template">
		{{~it.array:value:index}}
			<p>{{= index+1 }}{{= value }}</p>
		{{~}}
	</script>
	<div id="interation"></div><hr />
	<!--  条件语句 -->
	<script id="conditionalsTemp" type="text/x-dot-template">
		{{? it.lastName }}
			<p>{{= it.lastName }}</p>
		{{?}}
		
		{{? it.name }}
			<p>{{= it.name }}</p>
		{{?? it.firstName }}
			<p>{{= it.firstName }}</p>
		{{?}}
	
		{{? it.lastName }}
			<p> {{= it.lastName }}</p>
		{{?? it.age === 22}}
			<p> {{= it.lastName }}</p>
		{{?? it.firstName }}
			<p> {{= it.firstName }}</p>
		{{??}}
			<p>no data！</p>
		{{?}}
	</script>
	<div id="conditionals"></div><hr />
  
<script src="./js/api.js"></script>
<script src="./js/doT.min.js"></script>
<script type="text/javascript">
	//	赋值
	var interpolationData = { 'name' : 'word' };	
	var interpolation = doT.template( $api.dom('#interpolationTemp').innerHTML );
	$api.dom( '#interpolation' ).innerHTML = interpolation( interpolationData );
	//	循环
	var evaluationData = {'firstName' : 'bi', 'lastName' : 'mingxing', 'age' : 22 };	
	var evaluation = doT.template( $api.dom('#evaluationTemp').innerHTML );
	$api.dom( '#evaluation' ).innerHTML = evaluation( evaluationData );
	//	迭代
	var interationData =  {"array":["banana","apple","orange"]};	
	var interation = doT.template( $api.dom('#interationTemp').innerHTML );
	$api.dom( '#interation' ).innerHTML = interation( interationData );
	//	条件语句
	var conditionals = doT.template( $api.dom('#conditionalsTemp').innerHTML );
	$api.dom( '#conditionals' ).innerHTML = conditionals( evaluationData );
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>php笔记_https://www.phpnote.cc</title>

</head>

<body>

<h1> hello {{=it.name}} </h1>

</script>

{{ for(var x in it) { }}

{{ } }}

</script>

<p>{{= index+1 }}{{= value }}</p>

</script>

<p>{{= it.lastName }}</p>

<p>{{= it.firstName }}</p>

<p> {{= it.lastName }}</p>

<p> {{= it.firstName }}</p>

</script>

// 赋值

var interpolationData = { 'name' : 'word' };

var interpolation = doT.template( $api.dom('#interpolationTemp').innerHTML );

$api.dom( '#interpolation' ).innerHTML = interpolation( interpolationData );

// 循环

var evaluationData = {'firstName' : 'bi', 'lastName' : 'mingxing', 'age' : 22 };

var evaluation = doT.template( $api.dom('#evaluationTemp').innerHTML );

$api.dom( '#evaluation' ).innerHTML = evaluation( evaluationData );

// 迭代

var interationData = {"array":["banana","apple","orange"]};

var interation = doT.template( $api.dom('#interationTemp').innerHTML );

$api.dom( '#interation' ).innerHTML = interation( interationData );

// 条件语句

var conditionals = doT.template( $api.dom('#conditionalsTemp').innerHTML );

$api.dom( '#conditionals' ).innerHTML = conditionals( evaluationData );

</script>

</body>

</html>

更多待涛哥实践总结补充

转载请注明：PHP笔记 » doT.js适用于混合开发的模板引擎

相关推荐