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
    }));
  • 相关阅读:
    [HNOI2006]超级英雄
    [CTSC1999]家园
    火星探险问题
    [HNOI2008]GT考试
    [USACO14DEC]后卫马克Guard Mark
    [NOI2018]归程
    [USACO15DEC]最大流Max Flow
    [NOIPlus]斗地主
    [LUOGU] P3128 [USACO15DEC]最大流Max Flow
    [BZOJ] 1878: [SDOI2009]HH的项链
  • 原文地址:https://www.cnblogs.com/xiaoweiy/p/5808463.html
Copyright © 2011-2022 走看看