Front-end-"learning experience"-a simple way to render templates

Usually we use AJAX to request the completion of data after the process is often a rendering of data, at the beginning of my practice is to do a data template in the HTML interface, using some similar to the angular tag, and then use the Replace function to replace those marked as real data, Later, a more concise approach was found in the learning process. This method uses the method of capturing arrays in regular expressions, which is perfect for rendering data.

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; 

The core code, like the one we define here, matches the data in {{}}, and the Render method passes two parameters, one is the template, the other is the data to be rendered, such as the DOM structure of the template we define as <TABLE><TR><TD >{{aa}}</td></tr></table>, the return data is JSON, also contains {AA: "real Value"}, then we call the end of Render (Template,data) After getting a template with real data, you can try it. If the project is small, try to write your own rendering template.

Front-end-"learning experience"-a simple way to render templates