码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-25 23:25:46      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

 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
}));

 

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

标签:

原文地址:http://www.cnblogs.com/xiaoweiy/p/5808463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!