简单好用的纯前端模板引擎,AJAX的好搭档!
github地址:https://github.com/shalldie/mini-tpl
引擎源码
/**
* 简易模板 语法与ejs一样
*/
(function(root, factory) {
if (typeof define === "function" && define.amd) {
define(factory);
} else if (typeof exports === "object") {
var mo = factory();
mo.__esModule = true;
mo["default"] = mo;
module.exports = mo;
} else {
root.miniTpl = factory();
}
})(this, function() {
function render(content, data) {
data = data || {};
var list = [ 'var tpl = "";' ];
var codeArr = transform(content);
for (var i = 0, len = codeArr.length; i < len; i++) {
var item = codeArr[i];
if (item.type == 1) {
list.push(item.txt);
} else if (item.type == 2) {
var txt = "tpl+=" + item.txt + ";";
list.push(txt);
} else {
var txt = 'tpl+="' + item.txt.replace(/"/g, '\\"') + '";';
list.push(txt);
}
}
list.push("return tpl;");
return new Function("data", list.join("\n"))(data);
}
function transform(content) {
var arr = [];
var reg = /<%([\s\S]*?)%>/g;
var match;
var nowIndex = 0;
while (match = reg.exec(content)) {
appendTxt(arr, content.substring(nowIndex, match.index));
var item = {
type: 1,
txt: match[1]
};
if (match[1].substr(0, 1) == "=") {
item.type = 2;
item.txt = item.txt.substr(1);
}
arr.push(item);
nowIndex = match.index + match[0].length;
}
appendTxt(arr, content.substr(nowIndex));
return arr;
}
function appendTxt(list, content) {
content = content.replace(/\r?\n/g, "\\n");
list.push({
txt: content
});
}
return render;
});
使用方法
1、通过script标签定义模板
<script id="tplContent" type="text/html">
<% for(var i=0; i < data.length; i++){
var item = data[i];%>
<tr>
<td><%=item.id%></td>
<%if(item.status == 0){%>
<td>在线</td>
<%}else{%>
<td>离线</td>
<%}%>
<td><%=item.name%></td>
</tr>
<% } %>
</script>
2、使用模板
var _data = [{id:1, status:0, name: "张亮"},{id:2, status:1, name: "张良"},{id:3, status:0, name: "张梁"},{id:4, status:0, name: "张靓"}];
var myTemplate = document.getElementById('tplContent').innerHTML;
var myHtml = miniTpl(myTemplate, _data);