zoukankan      html  css  js  c++  java
  • 前端-【学习心得】-模板渲染的简单方法

    平时我们使用ajax请求完数据后通常都会有 一个渲染数据的过程,最开始的时候我的做法是在html界面做好数据模板,使用一些类似于angular的标记,然后用使用replace函数替换这些标记为真实的数据,后来再学习过程中找到了一个更加简洁的方法。该方法使用了正则表达式中的捕获数组的方法,完美实现了数据的渲染。

    var regexp = /(?:{{)([a-zA-z][^s}]+)(?:}})/g
    function render(template, data) {
         return template.replace(regexp, function(fullMatch, capture) {           if (data[capture]) {                return data[capture];           } else {                return fullMatch;           }      }); }
    window.renderTemplate = render;

    核心代码如上,我们这里定义的正则是匹配{{}}里面的数据,这个render方法传递了两个参数,一个是模板,一个是要渲染的数据,比如我们定义模板 的dom 结构为   <table><tr><td>{{aa}}</td></tr></table>,返回数据为json,同样包含{aa:"真实的值"},那么我们调用完render(template,data)后得到的就是带上真实数据的模板了,大家可以尝试一下。假如项目小可以试着自己写渲染模板。

  • 相关阅读:
    github上传文件让别人下载--xdd
    C#Windows Forms 使MessageBox顶层显示--xdd
    2019.7.16.5.21留念
    Fortran流程控制与逻辑运算、循环--xdd
    Fortran输入输出与声明--xdd
    c#关于数据和方法在不同类中的引用-xdd
    C#Windows Forms (Demo.SYS)--xdd
    github下载历史版本--xdd
    Matlab查看本机IP地址---xdd
    Matlab生成Word--xdd
  • 原文地址:https://www.cnblogs.com/wq123/p/4396454.html
Copyright © 2011-2022 走看看