Xunm模版升级成功,原购买的朋友可以联系作者进行升级操作
首页 » 教程 » 30行代码实现一个健全的模板渲染
30行代码实现一个健全的模板渲染
  • admin
  • 2019-01-05
  • 41 次
  • 0 条
  • 教程

  • 30行代码实现一个健全的模板渲染

    1、代码实现

    var template = function template(template, data) {
        var templateSettings = Object.assign({
            escape: /<%=\s*([\s\S]+?)\s*%>/g,
            interpolate: /<%-\s*([\s\S]+?)\s*%>/g,
            evaluate: /<%\s*([\s\S]+?)\s*%>/g
        }, options || {});
        var regExp = RegExp(
            templateSettings.escape.source + '|' +
            templateSettings.interpolate.source + '|' +
            templateSettings.evaluate.source + '|([\\s\\S]+?(?=' +
            templateSettings.escape.source + '|' +
            templateSettings.interpolate.source + '|' +
            templateSettings.evaluate.source + ')|[\\s\\S]*$)|$', 'g');
        var compile = `(function (obj) {obj||(obj = {});var __t,__p='';with(obj){`
        compile += template.replace(regExp, function (match, escape, interpolate, evaluate, string) {
            if (escape) {
                return '__p+=String((__t=(' + escape + '))==null?\'\'\:__t).replace(/[&<>"\']/g, function (k) {var obj={"\\\"": "&quot;","&":"&amp;","\\\'":"&#39;","<":"&lt;",">":"&gt;"};return obj[k];});';
            } else if (interpolate) {
                return '__p+=((__t=(' + interpolate + '))==null?\'\'\:__t);';
            } else if (evaluate) {
                return evaluate;
            } else if (string) {
                return '__p+=' + JSON.stringify(string) + ';';
            }
            return '';
        });
        compile += '}return __p;})'
        return eval(compile);
    };
    

    特性

    因为功能逻辑并不复杂,所以可以渲染极限的性能。
    使用 JavaScript 原生语法,在复杂的业务需求都可以实现。
    原始语法兼容 EJS 模板语法。
    模板

    <% if (user) { %>
      <h2><%= user.name %></h2>
    <% } %>
    

    使用说明

    // 创建编译模板
    var compiled = template('hello <%- user %>!');
    compiled({ 'user': 'fred' });
    // => 'hello fred!'
    
    // 转义数据的值
    var compiled = template('<b><%= value %></b>');
    compiled({ 'value': '<script>' });
    // => '<b>&lt;script&gt;</b>'
    
    // 执行 JavaScript 和 生成HTML代码
    var compiled = template('<% for(var i = 0; i < users.length; i++) { %><li><%= user %></li><% } %>');
    compiled({ 'users': ['fred', 'barney'] });
    // => '<li>fred</li><li>barney</li>'
    

    您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的



    最后修改于:2019-01-05 20:47
    分享


    博主介绍

  • 博主:寻梦xunm
  • 邮箱:vipshiyi@qq.com
  • 微信:shiihk
  • 熊掌号:奇乐之梦
  • 语录:追寻最初的梦想,坚持走下去!
  • 博主说说

    申请转正的朋友请在或者文章下面进行评论留言即可,

    转正评论留言格式为:你注册的用户名称或者邮箱即可!