몇 십 줄에 불과한 간단한 순수한 전단 템플릿 엔진.
2639 단어 템플릿 엔진
엔진 코드
/**
* 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("
"))(data);
}
function transform(content) {
var arr = [];
var reg = //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?
/g, "\
");
list.push({
txt: content
});
}
return render;
});
사용 방법
1. script 태그를 통해 템플릿 정의
<% 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>
<% } %>
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);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
몇 십 줄에 불과한 간단한 순수한 전단 템플릿 엔진.간단하고 사용하기 좋은 순수한 전단 템플릿 엔진, AJAX의 좋은 파트너!github 주소:https://github.com/shalldie/mini-tpl 엔진 코드 사용 방법 1. script 태그를 통해 템플릿...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.