JS引擎模板
baiduTeplate
模板语法
提供一套模板语法，用户可以定义一个模板区块，每次根据传入的数据生成对应数据产生的html片段，从而渲染不同的界面效果；
优点：
- 语法简单直观，学习成本低，开发效率低，采用JavaScript的原生语法；
- 效率较高，默认html转义(防止XSS攻击)，并且支持包括URL转义等多种转义；
- 变量未定义直接输出为空，防止页面错乱；
- 分隔符可以自定义；
用法
- 1.引入文件
使用百度模板时，需要引入baiduTemplate.js文件
<script src='./baiduTemplate.js' type='text/javascript'></script>
-
2.放置模板片段
- 页面中，模块可以放在<script>标签中，设置type为
text/html 或 text/template,用 id 标识，代码示例：
<script id="container1" type="text/html"> 模板部分 </script>
2.或者存放在<textarea>中，一般情况设置其CSS样式display:none来隐藏掉textarea，同样用id来标识，代码示例：
<textarea id="container2" style="display:none;"> 模板部分 </textarea>
3.直接定义变量存储模板
var tpl = "模板内容"；
- 页面中，模块可以放在<script>标签中，设置type为
3.调用引擎方式
模板数据结构是json，可以在本地加载也可以从服务端加载过来
方式1：baidu.template('container1',data); // 直接传入id即可
方式2：baidu.template(tpl,data); //tpl是传入的模板(String类型),可以是模板的id也可以是一个模板片段的字符串，传入模板和对应的数据返回对应的html片段
方式3：只传入tpl,这是返回的是一个编译后的函数，可以把这个函数缓存下来，传入不同的data就可以生成不同的html片段；
代码示例： var fun = baidu.template(tpl);
fun(data); // data 产生的html片段
fun(data1); // data1 产生的html片段
自定义 分隔符
模板的分隔符为%，也可以自定义，自定义语法如下：
设置左分隔符：baidu.template.LEFT_DELIMITER = '<!';
设置右分隔符：baidu.template.RIGHT_DELIMITER = '!>'
模板js语法
<% var test = function(){
//函数体
};
if(1){}else{};
function testFun(){
return;
};
%>
` 数据设置value值时，需要使用 =`
var data={
"title":'欢迎使用baiduTemplate',
"list":[
'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API',
'test2:',
'test3:',
'test4:list[5]未定义，模板系统会输出空'
]
};
atrTempalte
模板语法(两个版本可供使用,原生与简洁)
- 原生语法 原生语法需要引入原生语法版 template-native.js
1.使用：
在页面中引用引擎：<script src='./template-native.js'></script>
2.表达式：
<% %> 符号包裹起来的语句则为模板的逻辑表达式；
对内容编码输出：<%=data%>
不编码输出：<%=#data%>
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
3.逻辑 支持js原生语法
a.使用一个type="text/html"的script标签存放模板：
<h1><%=#name%></h1>
<%for(var i = 0; i<friends.length;i++){%>
<ul>
<li><%=friends[i]%></li>
</ul>
<%}%>
b.渲染模板：
var data = {
name:'tom',
friends:[
{name:'cat'},
{name:'jerry'},
{name:'lily'}
]
}
var html = template(id,data);
document.body.innerHTML = html;
4.模板包含表达式，用于嵌套子模板
5.模板不能访问全局对象，使用公用方法 template.helper(name,callback)注册公用辅助方法
template.helper('$ubb2html', function (content) {
// 处理字符串...
return content;
});
模板中使用方式：
<% $ubb2html(content) %>
- 简介用法 简洁语法需要引入简洁语法版 template.js
推荐使用，语法简单实用，利于读写。
1.使用：
在页面中引用引擎：<script src='./template.js'></script>
2.表达式：
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
条件表达式：
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
遍历表达式：
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
// 或者 (此方法需要加$符)
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
方法
- 1.template(id, data)；根据渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。
- 2.template.compile(source, options)； 返回一个渲染参数
- 3.template.helper(name, callback)； 返回一个渲染结果(添加辅助方法)
- 4.template.config(name, value); 更改引擎的默认设置
artTemplate 支持nodejs Express
- 1.安装：npm-install art-template
- 2.使用： var template = require('art-template');
var data = {list:['data1','data2']};
var html = template(__dirname + 'index/main',data);
Nodejs + Express
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
//app.set('views', __dirname + '/views');
运行demo：
node demo/node-template-express.js
