模板引擎template.js
岳景明
模板引擎
什么是模板引擎
可以根据程序员指定的模板结构和数据，自动生成一个完整的html即为模板引擎
模板引擎的好处
- 减少字符串的拼接操作
- 使代码更加清晰
- 使代码更易于阅读与维护
art-template
使用步骤
- 导入 art-template
- 定义数据
- 定义模板
- 调用template函数
- 渲染html结构
<body>
<div id="container"></div>
<script src="./js/template-web.js"></script>
<!-- 定义模板 -->
<script type="text/html" id="tpl-user">
<h1>{{name}}+{{age}}</h1>
</script>
<script>
// 定义要渲染的数据
var data = {
name: 'mod',
age: 17
};
// 调用template函数
var htmlStr = template('tpl-user', data);
console.log(htmlStr);
container.innerHTML = htmlStr;
</script>
</body>
标准语法
- 输出：
{{}}语法，在{{}}内可以进行变量输出或循环数组等操作 - 原文输出：若要输出的value值包含了html标签结构，则需要使用原文输出语法
{{@value}} - 条件输出： 如果要实现条件输出，可以在
{{}}中使用if else if /if的方式{{if value}} 输出 {{else if newValue} 输出new {{/if}} - 循环输出：在
{{}}内通过each语法循环数组，当前循环的索引使用$index进行访问，循环项使用$value进行访问{{each arr}} {{$index}} {{$value}} {{/each}} - 过滤器：
{{value | filterName}}，过滤器语法类似管道操作符，它的上一个输出作为下一个输入；
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){//return ...}
封装一个简单的template函数
function template(id, data){
var str = document.getElementById(id).innerHTML;
var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
var result = null;
while(result = pattern.exec(str)){
str = str.replace(result[0], data[result[1]])
}
return str;
}
类似资料：