zoukankan      html  css  js  c++  java
  • 记录一份最简洁只有15行代码的模板引擎!

     1 var TemplateEngine = function(html, options) {
     2     var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];
    ', cursor = 0;
     3     var add = function(line, js) {
     4         js? (code += line.match(reExp) ? line + '
    ' : 'r.push(' + line + ');
    ') :
     5             (code += line != '' ? 'r.push("' + line.replace(/"/g, '\"') + '");
    ' : '');
     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(/[
    	
    ]/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
    }));
  • 相关阅读:
    IOS7 About
    iOS Newsstand Tutorial
    微信开发商
    网络流量监控相关资料
    EDM about
    thinkphp验证码的实现
    thinkphp表单上传文件并将文件路径保存到数据库中
    thinkphp分页实现
    linux 系统简单备份
    Google Hacking总结
  • 原文地址:https://www.cnblogs.com/xiaoweiy/p/5808463.html
Copyright © 2011-2022 走看看