案例一:
数据
var data = {
title: '前端圈',
intro: '一群码js的骚年,幻想改变世界,却被世界改变。',
list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
模板
<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<li>
<span>{{ d.list[i].name }}</span>
<span>所在城市:{{ d.list[i].city }}</span>
</li>
{{# } }}
</ul>
效果
案例二:
//第一步:编写模版。你可以使用一个script标签存放模板,如:
<script id="demo" type="text/html">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<li>
<span>姓名:{{ d.list[i].name }}</span>
<span>城市:{{ d.list[i].city }}</span>
</li>
{{# } }}
</ul>
</script>
//第二步:建立视图。用于呈现渲染结果。
<div id="view"></div>
//第三步:渲染模版
var data = {
title: '前端攻城师',
list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
document.getElementById('view').innerHTML = html;
});
简单的文档:
一、模版语法
输出一个普通字段,不转义html: {{ d.field }}
输出一个普通字段,并转义html: {{= d.field }}
JavaScript脚本: {{# JavaScript statement }}
二、内置方法
1):laytpl(template); //核心函数,返回一个对象
var tpl = laytpl(template);
tpl.render(data, callback); //渲染方法,返回渲染结果,支持异步和同步两种模式
a):异步
tpl.render(data, function(result){
console.log(result);
});
b):同步
var result = tpl.render(data);
console.log(result);
2):laytpl.config(options); //初始化配置
options是一个对象
{open: '开始标签', close: '闭合标签'}
3):laytpl.v //获取版本号
laytpl.js
/**
@Name : laytpl v1.2
@Site : https://github.com/sentsin/laytpl
@License : MIT
*/
;!function(){
"use strict";
var config = {
open: '{{',
close: '}}'
};
var tool = {
exp: function(str){
return new RegExp(str, 'g');
},
//匹配满足规则内容
query: function(type, _, __){
var types = [
'#([\\s\\S])+?', //js语句
'([^{#}])*?' //普通字段
][type || 0];
return exp((_||'') + config.open + types + config.close + (__||''));
},
escape: function(html){
return String(html||'').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
.replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"');
},
error: function(e, tplog){
var error = 'Laytpl Error:';
typeof console === 'object' && console.error(error + e + '\n'+ (tplog || ''));
return error + e;
}
};
var exp = tool.exp, Tpl = function(tpl){
this.tpl = tpl;
};
Tpl.pt = Tpl.prototype;
window.errors = 0;
//编译模版
Tpl.pt.parse = function(tpl, data){
var that = this, tplog = tpl;
var jss = exp('^'+config.open+'#', ''), jsse = exp(config.close+'$', '');
tpl = tpl.replace(/\s+|\r|\t|\n/g, ' ').replace(exp(config.open+'#'), config.open+'# ')
.replace(exp(config.close+'}'), '} '+config.close).replace(/\\/g, '\\\\')
.replace(/(?="|')/g, '\\').replace(tool.query(), function(str){
str = str.replace(jss, '').replace(jsse, '');
return '";' + str.replace(/\\/g, '') + ';view+="';
})
.replace(tool.query(1), function(str){
var start = '"+(';
if(str.replace(/\s/g, '') === config.open+config.close){
return '';
}
str = str.replace(exp(config.open+'|'+config.close), '');
if(/^=/.test(str)){
str = str.replace(/^=/, '');
start = '"+_escape_(';
}
return start + str.replace(/\\/g, '') + ')+"';
});
tpl = '"use strict";var view = "' + tpl + '";return view;';
//console.log(tpl);
try{
that.cache = tpl = new Function('d, _escape_', tpl);
return tpl(data, tool.escape);
} catch(e){
delete that.cache;
return tool.error(e, tplog);
}
};
Tpl.pt.render = function(data, callback){
var that = this, tpl;
if(!data) return tool.error('no data');
tpl = that.cache ? that.cache(data, tool.escape) : that.parse(that.tpl, data);
console.log()
if(!callback) return tpl;
callback(tpl);
};
var laytpl = function(tpl){
if(typeof tpl !== 'string') return tool.error('Template not found');
return new Tpl(tpl);
};
laytpl.config = function(options){
options = options || {};
for(var i in options){
config[i] = options[i];
}
};
laytpl.v = '1.2';
"function" == typeof define ? define(function() {
return laytpl
}) : "undefined" != typeof exports ? module.exports = laytpl : window.laytpl = laytpl
}();