몇 십 줄에 불과한 간단한 순수한 전단 템플릿 엔진.

2639 단어 템플릿 엔진
간단하고 사용하기 좋은 순수한 전단 템플릿 엔진, 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("
"))(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);

좋은 웹페이지 즐겨찾기