Compile your own template parser in javascript, and write a template in javascript

Compile your own template parser in javascript, and write a template in javascript
Compile your own template parser

Recently I have been studying templates such as artTemplate, ejs, and baaiduTemplate. Therefore, I wrote a simple template parser on the rise.

What functions does a basic template parser need?

Based on this idea, we compile a simple parser with the following requirements:

In general, if the template is as follows:

My name is <% = name %> <br/> <% if (type = 1) {%> Status: <% = type %> <%} %>

If the data {name: 'da Zong Xiong 'type: 1} exists, output:

My name is da Zong Xiong. The status is good!

What do we need to do according to the above requirements? Because the script must be executed in the template, the most direct method is to translate the Template into javascript.

Hands-on Variable

I watched the code of the above template engines. The main idea is:

However, the values of <% = variable %> are different for the three:

Through the with statement, ejs specifies the access context of the variable for the variable.

ArtTemplate and baiduTemplate generate variable declaration statements by traversing input variables to assign values to variables.

Considering the inefficiency of the with statement, the second form is adopted here.

// If any input variable parameter is: datavar data = {name: 'da Zong Xiong ', type: 1}; // in the template, traverse the variable, generate the declaration statement var varStatement = ''; for (var name in data) {varStatement + = 'var' + name + '= data. '+ name +';} // varStatement = 'var name = data. name; var type = data. type ;';

Function

The second part is also the most important. It is not a parsing template statement.

Because the template is often the innerHTML of an element, and its line feed [er, I am not good at controlling], I usually replace it:

<! -- If a template exists --> <script id = "template" type = "html/template"> my name is: <% = name %> <br/> <% if (type = 1) {%> Status: <% = type %> <% }%> </script> <script> var html = template. innerHTML; // Replace the following line: html = html. replace (/\ s/g, ""); </script>

Considering ,'Xx content<% Expression %> 'This form is more useful for regular expression matching'Previous content<% Expression %>Subsequent contentRemove the 'pre' and 'post' parts of 'from the following:

// ResList is the final result, and rightContent is the content in the 'post' section var resList = [], rightContent = ''; html = html. replace (/(.*?) (<%. * %> )(. *)/G, function (str, left, center, right) {rightContent = right; resList. push (left); console. log ("left: % s center: % s right: % s", left, center, right); return center ;}); // The RegEx Matching content will be: // left: My name is: // center: <% = name %> <br/> <% if (type = 1) {%> Status: <% = type %> <% }%> // right:

The remaining 'center' content must comply'Xx content<% Expression %> 'format. Therefore, use regular expressions to compile the remaining content:

Var _ TMP_LIST _ = '_ TMP_LIST _', _ TMP_DATA _ = '_ TMP_DATA __'; // The dynamic function content to be compiled var fnStr = ''; // start matching expression, matching 'xxx <% expr %> 'html. replace (/(. *?) <% (.*?) %>/G, function (str, html, exp) {console. log ("html: % s exp: % s", html, exp); // fnStr + = _ TMP_LIST _ + ". push ('"+ quote (html) +"'); "; // expression content, with equal sign, value,, it is the logic control part of the dynamic function if (exp. indexOf ("=") = 0) {fnStr + = _ TMP_LIST _ + ". push ("+ exp. slice (1) + ");" ;}else {fnStr + = exp ;}});

Generate dynamic Functions

The preparation is complete, and the last step is left:

// Construct the compiled dynamic Function var fn = new Function (_ TMP_DATA __, _ TMP_LIST __, fnStr); // if no data exists in the result list, NO content to be compiled if (resList. length> 0) {// input the data to be compiled, result list, to the dynamic function fn (data, resList); // do not miss the last small tail, remove the 'pre' and 'post' sections and leave the resList. push (rightContent); console. log (resList. join ("");} else {console. log (html );}

A simple template compilation function has been completed ~.

Last

Except the version, there must be many bugs, but there should be no wrong idea. There are a lot of extensions, such as escaping, error detection, and setting delimiters. I will not detail them here.

Complete code

<! DOCTYPE html> 

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.