记录一份最简洁只有15行代码的模板引擎！

时间：2021-06-11 15:01:58
 1 var TemplateEngine = function(html, options) {
 2     var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\n', cursor = 0;
 3     var add = function(line, js) {
 4         js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
 5             (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
 6         return add;
 7     }
 8     while(match = re.exec(html)) {
 9         add(html.slice(cursor, match.index))(match[1], true);
10         cursor = match.index + match[0].length;
11     }
12     add(html.substr(cursor, html.length - cursor));
13     code += 'return r.join("");';
14     return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
15 }

使用示例如下

var template = 
'My skills:' + 
'<%if(this.showSkills) {%>' +
    '<%for(var index in this.skills) {%>' + 
    '<a href="#"><%this.skills[index]%></a>' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p>' +
'<%}%>';
console.log(TemplateEngine(template, {
    skills: ["js", "html", "css"],
    showSkills: true
}));

 

标签：

相关文章