JS implementation HTML template, a few lines of code things

Recently work on a project encountered a problem, that is, the content of the page is read from the background to the interface, in the JS code in the HTML code and read the contents of the mosaic, and then inserted into the HTML, as follows:

　　

This method is also common, but Jiabuzhu, all the content on the page is so, that JS inside the HTML code is not more general, not only destroys the page logic, is not easy to maintain. So much of the content needs to be filled into the page, in what way, yes, completely can learn the background of the program, such as: {{voild.filed1}}, {vo:field.body/},{$v [title]} and so on in many forms, none of the "template", Then we can also use JS to complete this implementation.

Search the code from the Internet, not to understand, is the need to introduce a template JS, there is no I want, both simple and can see understand, take over can use, then the answer is yes.

　　

First look at some people's code:

 1  String.prototype.temp = function           2  return  this . Replace (/\$\w+\$/gi, function  Span style= "color: #000000;" > (matchs) { 3  var  returns = Obj[ma Tchs.replace (/\$/g, " 4  return  (returns + "") = = "Undefine D "? ""  5  });  6} 

The original is to add a field in the HTML of the place with a special symbol ($) wrapped up, and then corresponding to the JSON data in the corresponding property, take its value, and then stitching the string, and then inserted into the page. Probably so, but now the demand has changed, need to take a property value of the JSON data attribute value, is to take a subset of a property, then the above method is not enough, only to change.

1String.prototype.temp =function(Reg, obj) {2         return  This. replace (Reg,function(matchs) {3             varreturns = ' ',4Getstr = Matchs.replace (/\$/g, ""),5Subarr = Getstr.split ('. '));6Len =subarr.length;7             if(len = = 1){ 8returns =Obj[getstr];9}Else if(Len > 1){ Tenreturns = Obj[subarr[0]]; One                  for(varI=1; i<len; i++){ Areturns =Returns[subarr[i]]; -                 } -             } the             return(returns + "") = = "undefined"? "": Returns; -         }); -};

View Code

The example is to use $ ($name $) to wrap the property name, this can be based on personal interests, I just like money, especially the dollar, haha, so use $, can also use other symbols, but notice in the code to modify the corresponding content.

Similarly, if there is a requirement for the next subset, it is also possible to modify the code, such as modifying the regular, to determine the length of the truncated character.

In the above code according to the regular judgment, you can query the subset of the multilevel, but the general use of the 1-2 layer.

Wow, finally finished, not anxious, finally need to join the call method, and the return value inserted into the page, just calculate the completion, not wordy, direct code paste ...

1Domrander =function(TPL, Ele, Reg) {//tpl is the called template, and Ele is where the code needs to be inserted, Reg is, of course, regular.2         varSHOWTPL =tpl.html (),3showhtml = ' ';4          for(varI=0,len = json.length,jsonlist=NULL; i<len; i++){5jsonlist = Json[i] | | {};6showHTML + =showtpl.temp (Reg, jsonlist);7         }8$ (' tbody ', ele). html (showhtml);9};

This time finally is finished, welcome to shoot bricks, if you need to view the instance code, then come here to download it. Demo Address: Https://github.com/wyh909/js-workdemo/tree/js-demo/html-tpl-js